Пишем дополнение к Firefox

Как всегда принцип рассмотрим на примере приложения Hello world! Мы слава богу русский знаем лучше английского, так что будем им пользоваться))) Напишем «Привет мир!». Сразу покажу как это будет выглядеть:

Как видите следом за меню «Справка» добавлен новый пункт 😉 Итак начнём!

Дополнения Firefox имеют расширение XPI. Произносится на удивления «зиппи». Не пугайтесь это просто завуалированный зип архив. Вот архив с рассматриваем дополнением. Предлагаю его скачать и рассмотреть.

Распакуйте любой удобной вам утилитой.. Вы увидите каталог «chrome» и два файла — chrome.manifest и install.rdf
Такая структура будет сохранятся в любых ваших приложениях.

Рассмотрим файл install.rdf. Он написан в формате RDF (таком себе переделанном XML). Чтобы дать браузеру понять что это файл в правильном формате необходимо указывать такие строки:

<?xml version=»1.0″?>

<RDF xmlns=»https://www.w3.org/1999/02/22-rdf-syntax-ns#«

xmlns:em=»https://www.mozilla.org/2004/em-rdf#«>

После них слудуют строки определяющие id приложения.
Откроем секцию <Description about=»urn:mozilla:install-manifest»> и начнём её заполнять:

Укажем id приложения:

<em:id>helloworld@how2.org.ua</em:id>

ID может задаваться разными форматами. Я задал в формате <приложение>@<домен>. Другим методом может быть генерация uuid. Если вы пользователь Linux вы можете воспользоваться утилитой uuidgen. В других ОС есть подобны…

Теперь оприделим название дополнение:

<em:name>XUL Привет мир!</em:name>

Его описание:

<em:description>Описание «Привет мир!»</em:description>

версию:

<em:version>0.1</em:version>

Домашнюю страницу:

<em:homepageURL>«>https://how2.org.ua/</em:homepageURL>

Тип дополнения:

<em:type>2</em:type>

2 — аддоны
4 — темы
8 — локализации
32 — темы иконок

Теперь необходимо оприделить, что дополнение будет для браузера Firefox и указать поддерживаемые версии:

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

Таким образом мы указали, что данное дополнение для версий Firefox 3.0 и 3,6,* . id Firefox неизменен и служит для определения приложения (у mozilla ведь не только одни браузер).

Теперь приступим к файлу chrome.manifest. Он содержит сведения о файлах дополнения.

content xulschoolhello jar:chrome/xulschoolhello.jar!/content/

skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/

locale xulschoolhello ru jar:chrome/xulschoolhello.jar!/locale/ru/

overlay chrome://browser/content/browser.xul chrome://xulschoolhello/content/browserOverlay.xul

Первое слово сообщает Firefox о предмете декларирования (content, locale и skin). Второе — имя пакета. skin и locale имеют третье ключевое слово, которое указывает какую локализацию или скин они улучшают. Последний столбец указывает в какой папке искать контент. jar: указывает что данные необходимо искать в jar файле.

Последняя строка даёт браузеру понять, что ему необходимо добавить данные из файла browserOverlay.xul в файл браузера browser.xul
Файлы XUL определяют внешний вид браузера.

Перейдём к обзору каталога chrome там вы найдёте jar архив. Распакуем его. Внутри указанные нами каталоги.
Рассмотрим browserOverlay.xul. Первые несколько строк указывают тип файла, пропустим их..

Оприделим главный элемент у нас это overlay вы также можете использовать window или dialog:

id — должен быть уникален везде в XUL. Второй параметр указывает что этот и все дочерние элементы — XUL

Подключим необходимые файлы:

Правда похоже на html ?

Теперь приступим непосредственно к добавлению нового пункта меню — «Привет мир!».

Для написания этого кода необходимы некоторые знания XUL. main-menubar — главное меню браузера.
Добавляем наш пункт в меню после меню «Справка»:

insertafter=»helpMenu»

При нажатии вызываем сообщение:

oncommand=»XULSchoolChrome.BrowserOverlay.sayHello(event);»

Эта команда — событие javascript. Наступает при нажатии любым способом.

Оприделим имя элемента:

label=»&xulschoolhello.hello.label;

И клавиши доступа к нему:

accesskey=»&xulschoolhello.helloItem.accesskey;»

Теперь рассмотрим browserOverlay.js:

if («undefined» == typeof(XULSchoolChrome)) {
var XULSchoolChrome = {};
};

Эта конструкция создаёт объект XULSchoolChrome. Это сделано именно так, чтобы обеспечить «бесконфликтность» дополнения с другими имеющимися. Учтите что все объекты и переменные, которые мы создаём глобальны и доступны другим дополнениям и браузеру. Мы создаём объект, толькое если таковой не задан.

Теперь зададим действия дополнения. Оприделим обект BrowserOverlay и функцию вывода сообщения sayHello внутри него:

XULSchoolChrome.BrowserOverlay = {
sayHello : function(aEvent) {
let stringBundle = document.getElementById(«xulschoolhello-string-bundle»);
let message = stringBundle.getString(«xulschoolhello.greeting.label»);
window.alert(message);
}
};

Текст сообщения выбирается из файла который мы рассмотрим позже. Сначала выбирается «пузырь» со строкой при помощи DOM, а затем уже из него выбирается строка.

Перейдём к папке locale. В ней находятся папки локализаций. Русская локаль — ru, или ru_RU..

browserOverlay.dtd:

<!ENTITY xulschoolhello.hello.label «Привет мир!»>

<!ENTITY xulschoolhello.helloMenu.accesskey «l»>

<!ENTITY xulschoolhello.helloItem.accesskey «H»>

В этом файле определяются текстовые значения всех необходимых переменных в соответствии с локалью. Грубо говоря мы наполняем значениями необходимые нам переменные.

browserOverlay.properties:

xulschoolhello.greeting.label = Привет! Ты там?

Выполняет тоже значение, но имеет другое назначение. Именно тут определяется тот самый «пузырь».

В папке skin находятся необходимые css файлы. Рассматривать их я не буду..

Вот собственно и всё.. Вот что получилось: