На выбор темы для расширения повлияло новогоднее настроение и передозировка мандаринками.:) Проглядывая хабрахабр в таком вот развесёлом состоянии, я наткнулся на статью о рисовании на canvas-е вашего сайта снежинок в виде фрактала Коха. В тот момент, на меня нахлынула ностальгия по временам, когда под Новый Год почти все сайты пытались хоть как то отличиться, и представить пред очами неискушённой публики, падающие снежинки, реализованные средствами JavaScript. В памяти, так и всплывает всё то многообразие "снега", падающего на мой монитор.:) Вот тогда то, меня и посетила мысль о единообразии оформления эффекта падающих снежинок. А ведь действительно, как можно изменить оформление любого сайта на свой вкус и цвет? Ведь исходники нам с вами некто подправить не даст, и даже изменить таблицу стилей не позволят.:) Что-же тогда делать?
До появления мощных инструментов обработки изображений, для достижения необходимого цветового эффекта, фотографы применяли светофильтры. Это были такие цветные стёклышки, которые устанавливались перед объективом камеры. Такой приём, позволял не меняя окружающую действительность(время суток, освещённость, и т.д.) изменить фотографию, придать ей особое настроение. Воспользовавшись опытом фотографов, перефразируем пословицу про Магомеда: если нам не дают исходники, тогда изменим браузер! Вот, собственно, и появилась на свет наша концепция, и главная идея: разработка расширения, "осыпающее" снегом каждую просматриваемую страницу.
Общая информация о расширениях
Что есть расширение для Google Chrome? На самом деле ничего сложного: совокупность html-страничек JavaScript скриптов, таблиц стиля, и конечно же манифеста, в котором описываются базовые настройки расширения. Казалось бы из такого небогатого набора возможностей, трудно сделать по настоящему что-то полезное и функциональное. Но в программировании, всё решает фантазия.:) Для создания вашего расширения создайте каталог, который мы в скором времени наполним кодом. :)
Как уже сказано выше, манифест это перечень базовых настроек вашего расширения. Что необходимо знать о манифесте? Во-первых, манифест это файл в формате json. Во-вторых, перечень возможных полей и настроек достаточно велик, но не все из них обязательны. Если быть точным, обязательных параметров всего два, это название и номер версии. С подробным перечнем полей можете ознакомиться на сайте с документацией. Далее я приведу свой вариант файла манифеста:
{
"name": "Snow",
"version": "0.1",
// разрешения, то есть то, что будет доступно нашему расширению
"permissions": ["tabs", "http://*/*", "https://*/*"],
// настройки для кнопочки нашего расширеня, которое будет справо от строки URL
"browser_action": {
"default_title": "Snow over every page in you'r browser",
"default_icon": "icon.png"
},
// Немного терпения, об этом будет подробно рассказано ниже :)
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["popup.js"],
"run_at": "document_idle"
}
]
}
Манифест должен находится в корневом каталоге нашего расширения, и называться manifest.json.
Для повышения интерактивности взаимодействия вашего расширения с браузером, разработчики предусмотрели два интересных механизма, brouser_action и page_action. brouser_action предоставляет разработчикам возможность поместить иконку своего расширения справа от строки URL, соответственно для этого необходима иконка(это единственное обязательное поле). Для перечня всех полей просьба обращаться в документацию. Что вам следует знать про brouser_action, так это то, что при помощи этого замечательного механизма можно обмениваться информацией о работе ващего расширение(верно и для page_action). Например в небезивсестном раширении Google Mail Checker browser_action используется не только для перехода к своему почтовому ящику, но и для отображения новых писем. Это сделано благодаря тому, что browser_action предоставляет разработчикам поле badge, длинной 4 символа, которое будет отображаться поверх иконки вашего расширения. Ещё, у browser_action, есть возможность отображать информацию при щелчке на кнопку расширения. Это поможет вам отобразить больше информации чем в badge, но и строк кода в вашем расширении тоже прибавится больше. Поле default_popup (если вы вообще хотите его использовать), должно ссылаться на html-контент.
В своём расширении я не стал прибегать к page_action, так как это противоречит гайдлайнам разработчиков системы расширения, а именно: "Do use browser actions for features that make sense on most pages". Внимательный читатель, наверное уже заметил отличие brouser_action и page_action. А именно то, что page_action необходимо применять для тех действий, которые работают на уровни текущей страницы, а brouser_action на уровне всего браузера. Это проявляется в проектировании UI: кнопочка page_action будет находится внутри строки URL, как бы подсказывая нам о том что действие будет применено только по этому адресу URL. В остальном возможности этих методов мало разняться(правда у page_action нет badge). Я бы даже сказал что разница у них в филосовской концепции архитектуры расширений.
Всю работу по отрисовки падающих снежинок я решил поручить замечательному механизму content_stripts. Он позволяет взаимодействовать с загруженной страницей, и изменять её. Как сказано в документации, при помощи content_scripts можно например увеличить размер шрифта для повышения читабельности текста. Разумеется возможности content_scripts не могут быть безграничными по вопросам безопасности, но даже того что есть, нам хватит с запасом.:) Так же хотелось бы отметить, возможность подключения различных библиотек JavaScript. Например вполне реально заставить ваш content_scripts работать рука об руку с jQuery. Это не только облегчит написание ваших расширений, но и поможет вам быстрее и проще работать с деревом DOM. Правда тут кроется небольшая заковыка, а именно: напрямую, взаимодействие различных content_scripts невозможно. Поэтому если вы внесёте изменения в манифест:
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["popup.js", "jquery.js"]
}
]
То у вас не получится в файле popup.js использовать JavaScript код с применением библиотечки jQuery. Для того что бы вы могли воспользоваться возможностями этой библиотеки, я ничего лучше не придумал как воспользовться грязным хаком, и включить весь код в один файл. Конечно пришлось наступисть на горло своему чувству прекрасного, но куда деваться - вопросы безопасности важнее. В итоге для использования jQuery, ваш content_scripts должен выглядеть следующим образом:
// manifest.json
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["popup.js"]
}
]
// popup.js
//* Библиотека
//* jQuery
// ваш код(для примера подкрасим фон у абзацев)
$('p').css({'background-color': 'red'});
В манифесте описаны параметры настройки content_scripts, а именно: matches, js, run_at. Далее обо всех этих параметрах поподробнее. Matches, как нетрудно догодаться, перечисляет страницы в которые будет производиться инъекция нашего JavaScript(а именно все сайты на протоколах http и https, с обозначенными уровнями вложенности). js описывает какие файлы надо интегрировать со страничкой, ну а параметр run_at (который имеет всего 3 возможных значения) означает когда следует запустить скрипт. Подробнее можно прочитать по ссылке выше.
Вот мы и добрались до фазы активного творчества, нам осталость только создать и наполнить кодом файлик popup.js. Тут вы можите сами написать код для отрисовки снегопада, или воспользоваться кодом из урока побудившего меня на написание расширения, как собственно поступил и я.
Проверка работы расширения
Для проверки нашей работы, вам потребуется запустить написанное расширение в своём браузере. Для этого вам понадобиться перейти на страницу ваших расширений и раскрыть список Developer Mode. После этого > Load unpacked extension и в появившемся диалоге, выбрать каталог с расширением. Ваше расщирение должно будет появиться в списке с расширением. Вот тут то и проясняются все эти поля в манифесте, которые помогают собрать сведения о расширении и что оно делает. Теперь при посещении сайтов, вас будет сопровождать снегопад созданный средствами html5.
Небольшой скриншот работы расширения:
