Быстрый старт в разработке дополнений Firefox

Про создание дополнений 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. Надеюсь, тем кто впервые сталкивается с этой темой статья окажется полезной. На мой взгляд, всё для быстрого старта у вас есть: начальная информация, инструменты и процесс.

Просьба к читателям не ругать сильно, на роль «знающего» человека не претендую и на дополнительные вопросы вряд ли смогу ответить.