Про создание дополнений Firefox я знаю мало, но для того чтобы узнать это немногое мне потребовалось несколько дней. Эти знания мне не довелось пока применить для реальной задачи, и кто знает когда придётся. По теме есть много информации на английском языке, но в силу скудности моего английского эта информация была для меня трудновоспринимаема. Статьи, что я видел на русском, это в основном переводы, в которых много внимания уделяется деталям, но после их прочтения не возникает целостной картины. Моя статья — это попытка создать маленькое, но целостное знание: с чего начать и как с этим можно работать.
Думаю, все знают, что дополнения Firefox распространяются в виде xpi-файлов. xpi-файл представляет собой zip-архив, внутри которого есть какое-то количество файлов и директорий. Файлы могут быть js, css, xul, файлы изображений и, кажется, даже jar. У директорий обычно задаются стандартные названия, но жёстких требований нет.
В качестве первого своего дополнения мне захотелось сделать кнопку, по клику на которой отобразилось бы сообщение «Hello, World!». Кнопка должна была уметь размещаться на произвольной панели Firefox. И сделать это у меня получилось. Такое дополнение мне хотелось сделать ещё и потому, что обычно новые проекты удобнее создавать не с нуля, а с какого-то шаблона. Кроме этого, мне было интересно, можно ли работать с файловой системой, т.к. это, наверное, самое существенное ограничение JavaScript-а.
Думаю, Вам не будет интересно проходить тот же путь, по которому шёл я, чтобы создать всего лишь «Hello, World», а Вы сможете взять накопленную информацию и сразу двинуться дальше.
Мне нравится, когда работать удобно. Поэтому я озадачился поиском подходящих инструментов под привычный мне стиль работы. Работаю я под Windows 7, про него и пишу.
Создать отдельный профиль Firefox:
закрыть Firefox, нажать win+r и выполнить firefox -P
При создании профиля надо выбрать папку, которая будет легко доступна, например:
D:\experiments\firefox
Скачиваем и устанавливаем мой шаблонный проект helloworld.xpi. После установки внутри директории
D:\experiments\firefox\extensions
появится папка с названием
helloworld@ru.wikiversity.org.xpi
Да простит меня сообщество, информация о моих наработках сначала появилась в Викиверситете. Но эта статья не является копипастом, и, надеюсь, имеет несколько другую смысловую окраску.
Я не очень хорошо знаю, для чего предназначен каждый файл и тем более каждое слово в нём. Выделяю лишь те моменты, на которые сам обратил внимание.
Это основной файл, он говорит, что кнопка должна быть добавлена на панель BrowserToolbarPalette. Где-то видел, что все панели имеют идентификаторы. В таком файле можно создать не только кнопку, но и свою панель. Код написан на языке XUL.
Внутри XUL может содержаться JavaScript или JavaScript может подключаться из внешних файлов.
Это просто справочник текстовых констант.
В этой папке содержатся изображение для кнопки и файл со стилями
Очевидно, что это важный файл, который конфигурирует работу приложения. Подробнее не разбирался.
В соответствии с этим файлом происходит установка дополнения. Интересен тег id, идентификатор Firefox-а как продукта и без него работать не будет, а у Seamonkey другой идентификатор.
Думаю, что рабочий процесс большинства JS-разработчиков выглядит как и мой: написал несколько строчек — посмотрел что получилось. Чтобы посмотреть, что изменилось в XUL надо перегрузить Firefox. Это немного напрягает… совсем чуть-чуть. Потому что хочется параллельно и документацию в интернете почитать. И перегружать получается не быстро.
Я нашёл дополнение Extension Developer. После установки на панель управления Firefox нужно вытащить кнопку 'Reload all Chrome'. Изменения внутри кода разрабатываемого дополения вступят в силу сразу после клика по кнопке.
В плане работы с файловой системой у меня возникла (большей частью скопирована откуда-то) функция:
Как я понял, записывать в файлы тоже можно, но уже не разбирался.
Вот в-общем-то и всё, что я смог узнать за несколько дней (несколько свободных вечеров) о разработке дополнений Firefox. Надеюсь, тем кто впервые сталкивается с этой темой статья окажется полезной. На мой взгляд, всё для быстрого старта у вас есть: начальная информация, инструменты и процесс.
Просьба к читателям не ругать сильно, на роль «знающего» человека не претендую и на дополнительные вопросы вряд ли смогу ответить.
Думаю, все знают, что дополнения Firefox распространяются в виде xpi-файлов. xpi-файл представляет собой zip-архив, внутри которого есть какое-то количество файлов и директорий. Файлы могут быть js, css, xul, файлы изображений и, кажется, даже jar. У директорий обычно задаются стандартные названия, но жёстких требований нет.
В качестве первого своего дополнения мне захотелось сделать кнопку, по клику на которой отобразилось бы сообщение «Hello, World!». Кнопка должна была уметь размещаться на произвольной панели Firefox. И сделать это у меня получилось. Такое дополнение мне хотелось сделать ещё и потому, что обычно новые проекты удобнее создавать не с нуля, а с какого-то шаблона. Кроме этого, мне было интересно, можно ли работать с файловой системой, т.к. это, наверное, самое существенное ограничение JavaScript-а.
Думаю, Вам не будет интересно проходить тот же путь, по которому шёл я, чтобы создать всего лишь «Hello, World», а Вы сможете взять накопленную информацию и сразу двинуться дальше.
Подготовка к работе
Мне нравится, когда работать удобно. Поэтому я озадачился поиском подходящих инструментов под привычный мне стиль работы. Работаю я под Windows 7, про него и пишу.
Создать отдельный профиль Firefox:
закрыть Firefox, нажать win+r и выполнить firefox -P
При создании профиля надо выбрать папку, которая будет легко доступна, например:
D:\experiments\firefox
Скачиваем и устанавливаем мой шаблонный проект helloworld.xpi. После установки внутри директории
D:\experiments\firefox\extensions
появится папка с названием
helloworld@ru.wikiversity.org.xpi
Да простит меня сообщество, информация о моих наработках сначала появилась в Викиверситете. Но эта статья не является копипастом, и, надеюсь, имеет несколько другую смысловую окраску.
Содержимое архива helloworld.xpi
Я не очень хорошо знаю, для чего предназначен каждый файл и тем более каждое слово в нём. Выделяю лишь те моменты, на которые сам обратил внимание.
content\overlay.xul
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://helloworld/skin/overlay.css" type="text/css"?> <!DOCTYPE overlay SYSTEM "chrome://helloworld/locale/overlay.dtd"> <overlay id="helloworld-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="helloButton" label="&helloworld;" oncommand="alert('Hello, World!');"/> </toolbarpalette> </overlay>
Это основной файл, он говорит, что кнопка должна быть добавлена на панель BrowserToolbarPalette. Где-то видел, что все панели имеют идентификаторы. В таком файле можно создать не только кнопку, но и свою панель. Код написан на языке XUL.
Внутри XUL может содержаться JavaScript или JavaScript может подключаться из внешних файлов.
<script> function showHello(){ alert('hello!'); } </script> ... <toolbarbutton id="helloButton" label="&helloworld;" oncommand="showHello();"/>
locale\en-US\overlay.dtd
<!ENTITY helloworld "Hello World!">
Это просто справочник текстовых констант.
skin\...
В этой папке содержатся изображение для кнопки и файл со стилями
chrome.manifest
content helloworld content/ overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul locale helloworld en-US locale/en-US/ skin helloworld classic/1.0 skin/ style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css
Очевидно, что это важный файл, который конфигурирует работу приложения. Подробнее не разбирался.
install.rdf
<?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>helloworld@ru.wikiversity.org</em:id> <em:name>Hello World extension for Firefox</em:name> <em:version>1.0</em:version> <em:description>Demo Hello World extension.</em:description> <em:creator>Wikiversity student</em:creator> <em:unpack>true</em:unpack> <!-- чтобы архив распаковался при установке --> <!-- Firefox --> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>3.6</em:minVersion> <em:maxVersion>8.0.*</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF>
В соответствии с этим файлом происходит установка дополнения. Интересен тег id, идентификатор Firefox-а как продукта и без него работать не будет, а у Seamonkey другой идентификатор.
Рабочий процесс
Думаю, что рабочий процесс большинства JS-разработчиков выглядит как и мой: написал несколько строчек — посмотрел что получилось. Чтобы посмотреть, что изменилось в XUL надо перегрузить Firefox. Это немного напрягает… совсем чуть-чуть. Потому что хочется параллельно и документацию в интернете почитать. И перегружать получается не быстро.
Я нашёл дополнение Extension Developer. После установки на панель управления Firefox нужно вытащить кнопку 'Reload all Chrome'. Изменения внутри кода разрабатываемого дополения вступят в силу сразу после клика по кнопке.
Функция read
В плане работы с файловой системой у меня возникла (большей частью скопирована откуда-то) функция:
function read(path) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { alert("Permission to read file was denied."); } var file = Components.classes["@mozilla.org/file/local;1"] .createInstance(Components.interfaces.nsILocalFile); file.initWithPath( path ); if ( file.exists() == false ) { alert("File does not exist"); } var is = Components.classes["@mozilla.org/network/file-input-stream;1"] .createInstance( Components.interfaces.nsIFileInputStream ); is.init( file, 0x01, 00004, null); var sis = Components.classes["@mozilla.org/scriptableinputstream;1"] .createInstance( Components.interfaces.nsIScriptableInputStream ); sis.init( is ); return sis.read( sis.available() ); } alert(read("D:\\1.txt"));
Как я понял, записывать в файлы тоже можно, но уже не разбирался.
Заключение
Вот в-общем-то и всё, что я смог узнать за несколько дней (несколько свободных вечеров) о разработке дополнений Firefox. Надеюсь, тем кто впервые сталкивается с этой темой статья окажется полезной. На мой взгляд, всё для быстрого старта у вас есть: начальная информация, инструменты и процесс.
Просьба к читателям не ругать сильно, на роль «знающего» человека не претендую и на дополнительные вопросы вряд ли смогу ответить.