Задача: Разобраться как создавать плагины (дополнения) для Firefox.
Для начала заходим на
Add-on Developer Hub и посредством формы создаем простой плагин (будем использовать его как болванку для разработки своего плагина). В качестве уникального ID можно указать собственный e-mail или что-то вроде того.
Скачав сгенерированный код сразу можно его проверить, для этого достаточно переименовать .zip на .xpi и установить как обычное расширение к Firefox (
Меню >
Инструменты >
Дополнения, в открытом окне
Файл >
Установить расширения)
.
Распакуем полученный архив и разберемся со структурой плагина.
./chrome
/content
about.xul
ff-overlay.js
ff-overlay.xul
options.xul
overlay.js
/locale
/en-US
about.dtd
options.dtd
overlay.dtd
overlay.properties
/skin
overlay.css
toolbat-button.png
./defaults/
/preferences
prefs.js
chrome.manifest
install.rdf
Начнем с файла
chrome.manifest. Этот файл отвечает за привязку дополнительных объектов к базовым объектам Firefox. К примеру, базовый объект браузера описан в файле
chrome://browser/content/browser.xul, для того чтобы иметь возможность использовать свои обработчики для событий браузера нам необходимо создать свой объект. В файле
chrome.manifest происходит наложение (overlay) нового объекта на базовому:
overlay chrome://browser/content/browser.xul chrome://HelloWorld/content/ff-overlay.xul
Файл ff-overlay.xul имеет формат XUL (XML User Interface Language), другими словами это специфический XML-файл. В нашем случае он имеет следующий начальный вид:
<?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">
<script src="overlay.js"/>
<script src="ff-overlay.js"/>
<stringbundleset id="stringbundleset">
<stringbundle id="HelloWorld-strings" src="chrome://HelloWorld/locale/overlay.properties"/>
</stringbundleset>
<menupopup id="menu_ToolsPopup">
<menuitem id="HelloWorld-hello" label="&HelloWorld.label;"
oncommand="HelloWorld.onMenuItemCommand(event);"/>
</menupopup>
<popup id="contentAreaContextMenu">
<menuitem id="context-HelloWorld" label="&HelloWorldContext.label;"
accesskey="&HelloWorldContext.accesskey;"
insertafter="context-stop"
oncommand="HelloWorld.onMenuItemCommand(event)"/>
</popup>
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="HelloWorld-toolbar-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
label="&HelloWorldToolbarButton.label;" tooltiptext="&HelloWorldToolbarButton.tooltip;"
oncommand="HelloWorld.onToolbarButtonCommand()"/>
</toolbarpalette>
</overlay>
Заглянем в файлик overlay.js.
var HelloWorld = {
onLoad: function() {
// initialization code
this.initialized = true;
this.strings = document.getElementById("HelloWorld-strings");
},
onMenuItemCommand: function(e) {
var promptService = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
.getService(Components.interfaces.nsIPromptService);
promptService.alert(window, this.strings.getString("helloMessageTitle"),
this.strings.getString("helloMessage"));
},
onToolbarButtonCommand: function(e) {
// just reuse the function above. you can change this, obviously!
HelloWorld.onMenuItemCommand(e);
}
};
window.addEventListener("load", function () { HelloWorld.onLoad(); }, false);
В этом файле находится сгенерированный класс (HelloWorld) для обработки определенных событий. Для инициализации "прослушивания" обработчиков используется метод DOM объекта Window
addEventListener().
Событие "load" возникает при загрузке нового окна браузера. Согласно нашему коду, этому событию будет отвечать метод
onLoad класса
HelloWorld.
Создадим новый метод, который будет обрабатывать все открываемые браузером страницы и заменять их содержание на предложение "Hello World!".
onPageLoad: function(aEvent) {
var doc = aEvent.originalTarget;
// doc - документ, на котором произошло событие "onload"
doc.body.innerHTML = "Hello World!";
}
К методу OnLoad добавим код, который будет "перехватывать" событие, отвечающее за загрузку страниц в окне браузера (DOMContentLoaded) и вызывать созданный нами метод:
var appcontent = document.getElementById("appcontent"); // browser
if(appcontent)
appcontent.addEventListener("DOMContentLoaded", HelloWorld.onPageLoad, true);
Получился следующий скрипт:
var HelloWorld = {
onLoad: function() {
// initialization code
this.initialized = true;
this.strings = document.getElementById("HelloWorld-strings");
var appcontent = document.getElementById("appcontent"); // browser
if(appcontent)
appcontent.addEventListener("DOMContentLoaded", HelloWorld.onPageLoad, true);
},
onMenuItemCommand: function(e) {
// ...
},
onToolbarButtonCommand: function(e) {
// ...
},
onPageLoad: function(aEvent) {
var doc = aEvent.originalTarget;
// doc - документ, на котором произошло событие "onload"
doc.body.innerHTML = "Hello World!";
}
};
window.addEventListener("load", function () { HelloWorld.onLoad(); }, false);
Теперь можем запаковать измененный код в zip-архив, поменять расширения файла на .xpi, и попробовать установить как дополнение в Firefox (см. више).
Результат работы плагина HelloWorld:
Разберемся как работают настройки плагина.
Предположим нам нужно создать счетчик, который будет увеличивать свое значение каждый раз, когда открывается новое окно браузера.
Все параметры настройки плагина описаны в файле
/defaults/preferences/prefs.js. Для того чтобы добавить новый параметр достаточно прописать в этом файле следующую строчку:
pref("extensions.HelloWorld.counter",0);
Теперь добавим к нашему методу
onLoad объекта
HelloWorld код для работы с созданным параметром настройки:
onLoad: function() {
// initialization code
this.initialized = true;
this.strings = document.getElementById("HelloWorld-strings");
//находим компонент настроек и получаем доступ к узловой ветке
var prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService);
//подключаемся к ветке нашего плагина
prefs = prefs.getBranch("extensions.HelloWorld.");
//получение значения параметра counter
counter = prefs.getIntPref("counter");
counter = counter+1;
//сохранение нового значения параметра
prefs.setIntPref("counter",counter);
alert("Вы открываете Фаерфокс уже в "+counter+" раз!");
}
Подробнее о методах и функциях для работы с настройками можно почитать на странице
nsIPrefBranch - MDC Doc.
В результате при каждом запуске Firefox или открытии нового окна будет отображаться диалог с количеством просмотров.
Полезные ссылки по теме:
- DOM Window Object methods
- Code snippets - MDC Doc
- nsIPrefBranch - MDC Doc
