Как стать автором
Обновить

Пара слов о разработке и публикации add-ons для FireFox и Chrome

Время на прочтение 2 мин
Количество просмотров 3.4K
image
На днях мне обломился инвайт на лепру. В связи с чем появилось желание поэкспериментировать с плагинами для отображения картинок из комментариев к посту. Дальше о лепре ни слова, просто несколько тезисов о написании и публикации простого или чуть более чем простого адд-она для FireFox и Chrome. Ну и в конце — ссылки на поделки.

Контекст


JS-код, обрабатываемый на веб-странице, и JS-код адд-она обрабатываются в разных контекстах. Вы не сможете вызывать из своего адд-она функции сприптов, внедренные в веб-страницу и наоборот. Приведу два примера:
  • Вы реализовали некоторую js-функцию в адд-оне (пускай, отображение превью картинок с открытой старницы). Для включения превью вы адд-оном внедряете в код страницы ссылку и пишете в событии onclick этой ссылки вызов вашей js-функции. Но такой код работать не будет — клик на ссылке будет обрабатываться в контексте страницы, где функции адд-она не видны.
  • Для манипуляции с DOM удобно использовать один из js-фреймворков. Но даже если данный фреймворк всключен в веб-страницу, которую обрабатывает ваш адд-он — вы не сможете его использовать.

Использование внешних js-фреймворков


Для того, чтобы использоваться в своем адд-оне js-фреймворк, его нужно вставить непосредственно в адд-он. Для FireFox это делается следующим образом. Сначала копируете файл фреймворка (в моем случае — jquery.js) в «content» директорию вашего адд-она, а затем используете код динамической загрузки внешнего скрипта:
Components.classes["@mozilla.org/moz/jssubscript-loader;1"].
getService(Components.interfaces.mozIJSSubScriptLoader).
loadSubScript("chrome://leprokartinki/content/jquery.js");

В моем случае этот код помещен в обработчик window.addEventListener("load",...)

В chrome все немного проще. Помещаете файл (в моем случае — jquery.js) в папку адд-она и затем просто указываете его в manifest.json вместе с остальными используемыми js-файлами.

После этих манипуляций в адд-оне возможно использование функционала фреймворка

У меня не получилось использовать в адд-оне jQuery-функцию клонирования объектов clone(). В последствии я обошелся без клонирования. Как ведет себя эта функция в chrome я не проверял. Есть предположения о причинах ошибки, но я не копался.

Официальная публикация адд-онов


FireFox позволяет свободно публиковать свои поделки в галерею и со временем присваивает адд-онам статусы («Не проверено», «Предварительно проверено», «Проверено»). Между изменениями статусов проходит от нескольких дней до нескольких недель. Статус адд-она влияет на его вхождение в выборки и рейтинги.
А вот chrome для возможности официальной публикации в своем магазине требует платы за регистрацию разработчика (5$). Только после этого ваш адд-он будет доступен для свободной загрузки и установки.

Талмуды для тех, кто хочет попробовать


  1. Создание расширения для FireFox
  2. Getstarted для Crome

PS: Две свои поделки — плагины для просмотра всех картинок поста лепры — я выложил здесь (FireFox) и здесь (Chrome).
UPD: Еще одна поделка для FireFox — заменяет номера телефонов a-ля Skype, найденные на веб-странице, на ссылки на телефонный справочник с информацией об этих номерах.
Теги:
Хабы:
+32
Комментарии 17
Комментарии Комментарии 17

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн