Написание расширения под Firefox

Написание расширения под Firefox

iSergium

Привет, читатель!

Вы решили присоединиться к удивительному миру расширений Mozilla? Добро пожаловать. Для пропуска Вам понадобятся элементарные навыки программирования, так как Вам придется разговаривать на языках XML, JavaScript и CSS. Проходите. Браузеры давно уже перестали быть простым средством для просмотра веб-страниц, наличие дополнений значительно расширило их функционал и сделало каждого из них целой экосистемой. Благодаря различным реализованным в дополнениях функциям пользователь может построить браузер своей мечты. Пожалуй, почти каждый пользователь Firefox ставил так недостающий дефолтной сборке Speed Dial или ограждающий от всякой навязчивой рекламы adBlock, и уж точно большинство веб-разработчиков пользуются расширением Firebug, который уже сам по себе является целым комбайном. А как Вам дополнение, позволяющее сканировать доступные WiFi-сети или полноценный FTP-клиент внутри браузера? Ни один их существующих ныне браузеров не может предложить такой функционал «из коробки».

Самыми известными и используемыми из дополнений Firefox являются расширения (или аддоны, англ. Add-on) и темы. В этой статье мы разбираем расширения. Mozilla предоставила разработчикам расширений широкий простор для действий — весь браузер, получить доступ можно практически к любому элементу браузера, именно поэтому все расширения в магазине addons.mozilla.org проходят строгую модерацию — задействованы не только валидаторы, но и живые люди, которые при необходимости связываются с Вами по email, поэтому, если Вы захотите поделиться расширением, Вам понадобится хотя бы минимальное знание английского языка.

Само расширение представляет из себя zip-архив с расширением xpi. У него своя структура, свои стандарты и обычаи, с которыми Вы со временем ознакомитесь.

Шаг 0 - Подготовка.

Если Вы используете Огнелис как браузер по умолчанию, то Вам, наверняка, не захочется захламлять его незаконченными тестовыми расширениями, хоть и своими. Если для Вас это не критично, то пропустите шаг 0.0.

Шаг 0.0 - Создание нового профиля.

Создание нового профиля — это просто. Чтобы вызвать окно работы профилями нужно выполнить (Firefox должен быть закрыт):

Для Windows:

Start -> Run "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
или
firefox -P

Windows 64 bit:

Start -> Run "%ProgramFiles(x86)%\Mozilla Firefox\firefox.exe" -no-remote -P dev
или
firefox -P

Ubuntu и многие другие Linux-дистрибутивы:

/usr/bin/firefox -no-remote -P dev
или
firefox -P

Остальные Linux/Unix дистрибутивы:

/usr/local/bin/firefox -no-remote -P dev

MacOS 10.6 и новее:

/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &

MacOS 10.5 и старше:

arch -arch i386 /Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &

Создание нового профиля никаких сложностей не сулит, так что подробно останавливаться на нем не буду. Напомню лишь, что при работе с реальным проектом (относится к любому проекту) обязательно делайте бэкапы. Папку, указанную при создании профиля, условно назовем эту папку dev_folder а профиль dev_profile. После первой загрузки этого профиля папка заполнится файлами со всеми дефолтными настройками.

Шаг 0.1 — Делаем зародыш приложения.

Приступаем к созданию. Если Вам лень создавать эту структуру, можете скачать этот архив (этот) и распаковать, если же не лень, то создаем папку и следующую структуру (файлы создаем пустые, их содержимое будет расписано ниже):

/content/overlay.xul
/chrome.manifest
/install.rdf

Начнем с самого интересного файла - install.rdf.

0.1.1 — Install.rdf, или коротко о главном

Install.rdf – это обязательный файл, он является манифестом установки дополнения, написан в формате XML и даёт всю информацию о дополнении.

<?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>myfirstextension@coddism.com</em:id>
  <em:name>Test Extension</em:name>
  <em:version>0.0.0.1</em:version>
  <em:description>Test Description For Test Extension</em:description>
  <em:creator>NewDeveloper</em:creator>
  <em:type>2</em:type>
  <em:unpack>true</em:unpack>

  <em:targetApplication>
  <Description>
    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
    <em:minVersion>3.6</em:minVersion>
    <em:maxVersion>20.*</em:maxVersion>
  </Description>
  </em:targetApplication>

</Description>
</RDF>

Как и большинство других XML-файлов, он начинается с объявления версии. Далее находится объявление формата RDF и описание:

em:id — id приложения, по правилам хорошего тона пишется в формате email и обязано быть уникальным
em:name — под этим именем расширение будет отображаться в списке расширений
em:version — версия, тоже отображается в списке, рядом с названием
em:description — описание, выводится в просмотре расширения
em:creator — разработчик, выводится в просмотре расширения, здесь указывается имя/ник разработчика или название организации
em:type — тип. Тип, равный двум, означает, что этот xpi файл является расширением. Четыре, например, это тема (полный список здесь: https://developer.mozilla.org/en-US/docs/Install_Manifests#type)
em:unpack — этот параметр, установленный в true, нужен для того, чтобы расширение в папке dev_folder было распаковано — так легче редактировать.

Далее разберем :

em:id = {ec8030f7-c20a-464f-9b0e-13a3a9e97384} id браузера firefox. Для Thunderbird это значение будет {daf44bf7-a45e-4450-979c-91cf07434c3d}
em:minVersion — минимальная версия firefox, необходимая для работы приложения
em:maxVersion — соответственно максимальная версия firefox, необходимая для работы расширения

Больше параметров Вы увидите здесь: https://developer.mozilla.org/en-US/docs/Install_Manifests.

0.1.2 — chrome.manifest, связуем связуемое

Связывает все компоненты дополнения воедино именно этот файл. Все файлы, используемые в этом манифесте, подгружаются через адрес с протоколом chrome://. Протокол chrome:// является привилегированной адресацией внутри Firefox, по нему выполняется код браузера и дополнений, еще он имеет следующий вид:

chrome://*имя пакета*/*тип пакета*/*путь внутри пакета*

Основной пакет браузера так и называется — browser. Имена пакетов дополнений прописываются в chrome.manifest и считываются браузером при запуске. В нашем примере:

content myfirstextension content/
overlay chrome://browser/content/browser.xul chrome://myfirstextension/content/overlay.xul

Разберемся с этим. Строка 1:

content – тип пакета, пакеты бывают трех типов – content, locale и skin
myfirstextension — имя пакета, желательно в нижнем регистре (Firefox 2, Thunderbird 2, и SeaMonkey 1.1 не понимают смешанный регистр, с той поры это требование осталось правилом хорошего тона)
content/ - путь до этого пакета относительно файла chrome.manifest, слэш в конце строки обязателен.

Если одной фразой, то мы грузим content-пакет, названный myfirstextension из папки content.

Строка 2:

Регистрация оверлея. Файл overlay.xul добавляется в интерфейс браузера browser.xul.

Больше информации и разных приколюх можно найти здесь: https://developer.mozilla.org/en-US/docs/Chrome_Registration.

0.1.3 — что такое XUL

XUL – это такой язык разметки на основе XML, разрабатываемый MozillaFoundation, некая альтернатива HTML. Весь интерфейс Firefox написан на этом языке. Чтобы посмотреть, что он представляет из себя, надо ввести в адресную строку chrome://browser/content/browser.xul и посмотреть его исходный код (Ctrl+U).

Разберем наш простейший overlay.xul

<?xml version="1.0" encoding="utf-8"?>
<overlay id="coddismo-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <statusbar id="status-bar">
    <statusbarpanel id="coddism-panel" label="Hello, world!"/>
  </statusbar>
</overlay>

Эта запись означает, что браузер находит в своей разметке панель статуса (обычно называется панелью дополнений, в разметке браузера обозначается как statusbar с id='status-bar'), добавляет туда панель с id="coddism-panel", которая имеет стандартный для учебных программ заголовок "Hello, world". Все эти изменения происходят в созданном тут же слое overlay с id="coddismo-overlay", параметр xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" необходим для использования xul элементов. Для использования html-элементов внутри слоя придется добавить параметр xmlns:html="http://www.w3.org/1999/xhtml".

1.0 — Установка

Существует два способа установки:

1. В папке с Вашим профилем (dev_folder) найти папку extensions (если её нет, то создать), внутри неё создать файл, название которого должно совпадать с id дополнения (в нашем случае myfirstextension@coddism.com), и внутрь его записать полный путь до папки с дополнением (должно состоять только из латиницы и желательно не содержать знаков подчеркивания), не забыв в конце написать слэш.

Если всё сделать правильно, то при запуске Firefox спросит разрешение установить дополнение, после установки и перезагрузки браузера дополнение заработает.

2. Установка из файла.
Этот способ мне нравится гораздо больше. Всё что нужно — упаковать всю папку в zip-архив (install.rdf и chrome.manifest должны находиться в корневой папке архива), сменить его расширение на xpi, установить, перезагрузить браузер. Установить можно тоже разными способами, но суть их одна:

  1. Перетащить файл в окно firefox

  2. Открыть его (Ctrl+O или Файл -> Открыть)

  3. Через меню в управлении дополнениями

  4. Либо просто открыть этот файл через любой файловый менеджер при условии, если для открытия xpi файлов Firefox назначен приложением по умолчанию

В этом случае в папке extensions внутри dev_folder создастся папка или файл (в зависимости от параметра em:unpack внутри install.rdf) с названием, совпадаюшим с id дополнения.

1.1 — Правка.

Если Вы устанавливали дополнение способом 1 (с прописыванием пути) или install.rdf имеет параметр true, то процесс написания дополнения будет выглядеть следующим образом — правка файлов внутри папки, перезагрузка Firefox, тестирование, при необходимости повторить.

В ином случае придется после каждого изменения повторять пункт 2 из главы 1.0.

На этом вводная статья заканчивается, написание рабочего расширения будет разобрано в следующей статье (этой).

UPD:

Дополнение Addon Developer Helper может избавить вас от необходимости перезагружать браузер после каждого изменения в коде.

Дополнение недоступно для последних версий Firefox, измененную мною версию дополнения можно скачать по этой ссылке - в ней проблем с совместимостью нет.

Addon Developer Helper

Функционал этого дополнения можно реализовать двумя другими:

  1. Developer Assistant (Reload All Chrome + немного других интересностей)
  2. Restart Button (Restart Firefox)