Статьи

Как разработать расширение для Firefox

Признайте, что вы всегда хотели знать, как разработать расширение для Firefox, но у вас никогда не было времени на обучение :-)Здесь я проведу вас до конца, и в конце статьи мы создадим полнофункциональное расширение для Firefox!

Наша цель

Мы создадим расширение Firefox, чтобы найти все ссылки на текущей веб-странице, выделить те, которые имеют targetатрибут, и предупредить вас, сколько ссылок оно нашло. Хорошая часть заключается в том, что после того, как вы это сделаете, у вас есть понимание разработки расширений Firefox, а также проект для любого расширения, которое вы захотите разработать в будущем.

Что вам нужно — настройка среды разработки

Сначала давайте начнем с настройки среды разработки. Вам нужен Firefox (да) и в основном любой редактор кода, который вы предпочитаете. Затем, есть несколько рекомендуемых вещей для подготовки Firefox:

Создайте другой профиль разработки

Первым шагом является создание другого профиля в Firefox, так как вы сделаете некоторые настройки и изменения, которые вы, вероятно, не хотите использовать в своем обычном профиле. В моем случае я создал новый профиль разработки под названием «dev». Шаги, чтобы сделать это:

Диспетчер профилей в Windows

Откройте меню «Пуск» и выберите «Выполнить» (в Vista его может и не быть — просто нажмите Windows key+ Rв этом случае). В диалоговом окне запуска напишите firefox -Pи нажмите enter/ нажмите OK. Выберите Create Profile в диалоговом окне и следуйте инструкциям.

Менеджер профилей на Mac

Откройте терминал (находится в папке / Applications / Utilities) и введите /Applications/Firefox.app/Contents/MacOS/firefox -profilemanager. Выберите Create Profile в диалоговом окне и следуйте инструкциям.

Менеджер профилей в Linux

Откройте терминал, используйте, CDчтобы перейти в каталог Firefox и затем войти ./firefox -profilemanager. Выберите Create Profile в диалоговом окне и следуйте инструкциям.

Настройки конфигурации для Firefox

Откройте Firefox с помощью диспетчера профилей (процесс, описанный выше, или установите профиль разработки по умолчанию во время разработки расширений). Затем введите about:configв адресной строке. Он предупредит вас об изменении настроек, но это нормально, так как вы будете делать только незначительные изменения для разработки. Вы можете отфильтровать существующие настройки, и если какие-либо из приведенных ниже настроек не существуют, вы можете просто создать их.

Рекомендуемые настройки

Это хорошо для включения ошибок расширения в Консоли ошибок Firefox (Инструменты> Консоль ошибок), отключения кэширования XUL и т. Д.

  • javascript.options.showInConsole = true
  • nglayout.debug.disable_xul_cache = true
  • browser.dom.window.dump.enabled = true

Дополнительные настройки

Это не обязательно, но они могут помочь вам. Лично я этим не пользуюсь.

  • javascript.options.strict = true
  • extensions.logging.enabled = true

Укажите ваш каталог расширений Firefox на ваше расширение

Вместо постоянной подготовки и переустановки вашего расширения, есть простой способ добавить указатель из каталога расширений Firefox в местоположение вашего кода. Для этого вы должны сначала найти каталог своего профиля:

Найдите каталог своего профиля

В каталоге профилей вы найдете все настройки для ваших профилей Firefox, включая информацию о расширениях.

Найти каталог профиля в Windows

В Windows 2000 и XP откройте проводник и перейдите C:\Documents and Settings\[your user name]\Application Data\Mozilla\Firefox\Profilesв Vista и перейдите в C:\Users\[your user name]\AppData\Roaming.

Найти каталог профиля на Mac

Откройте Терминал и введите CD ~/Library/Application\ Support/Firefox/profiles/. Там вы найдете свои профили Firefox, и они будут названы буквами и цифрами, за которыми следует точка (.), А затем имя вашего профиля, например 12a3bc4d.dev.

Найти каталог профиля в Linux

Откройте терминал и введите CD ~/.mozilla/. В этом месте вы найдете все свои профили Firefox, и они будут названы буквами и цифрами, за которыми будет точка (.), А затем имя вашего профиля, например 12a3bc4d.dev.

Указывая на расширение

В папке вашего профиля разработки вы найдете папку с именем extensions. В нем у вас будет код для всех установленных расширений. Вместо того чтобы размещать там свой код, вы можете создать файл указателя. Сделайте это, создав файл с уникальным именем для вас (это должно быть то же самое, что вы выбрали для своего em:idзначения в вашем install.rdfфайле — подробнее об этом ниже).

В нашем примере создайте файл с именем linktargetfinder@robertnyman.comбез какого-либо расширения, и в нем просто укажите его, где вы будете иметь свой код, например C:\extensions\(Windows) или ~/Sites/linktargetfinder/(Mac).

Создание структуры папок и файлов

Чтобы создать хорошую основу для разработки расширений, необходимо создать структуру кода расширения. Начните с создания этой иерархии:

[Img_assist | NID = 7650 | название = | убывание = | ссылка = нет | Align = нет | ширина = 156 | Высота = 166]

я nstall.rdf

Начнем с пугающего кода install.rdf. Здесь у вас будет вся мета-информация о вашем расширении, поддерживаемых версиях Firefox и другая информация. Наш 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>linktargetfinder@robertnyman.com</em:id>
<em:name>Link Target Finder</em:name>
<em:version>1.0</em:version>
<em:type>2</em:type>
<em:creator>Robert Nyman</em:creator>
<em:description>Finds links that have a target attribute</em:description>
<em:homepageURL>http://www.robertnyman.com/</em:homepageURL>
<em:optionsURL>chrome://linktargetfinder/content/options.xul</em:optionsURL>

<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>2.0</em:minVersion>
<em:maxVersion>3.1b2</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>

Страшно, правда? Ну, даже если вы не привыкли к RDF, это не так уж и плохо. Как и большинство кода, есть некоторая обязательная информация, которую вам никогда не понадобится изменять, а затем добавьте свою собственную. Интересные части для нас:

В Descriptionузле

em:id

Здесь вы можете добавить свой уникальный идентификатор разработчика по своему выбору.
Обратите внимание, что это должен быть файл указателя, который вы создали выше.
em:name

Название вашего расширения.
em:version

Текущая версия вашего расширения.
em:type

Тип объявляет, что это расширение, в отличие, например, от темы.
em:creator

Ну вы!
em:description

Описывает вашу функциональность расширения.
Будет отображаться в окне «Инструменты»> «Дополнения».
em:homepageURL
URL веб — сайта вашего расширения.
em:optionsURL
URL , где вы будете иметь свой файл для редактирования опций / предпочтений.

В Description/em:targetApplicationузле

em:id

Это значение является фактическим идентификатором Firefox.
Измените это, если вы хотите разрабатывать для Thunderbird или что-то еще.
em:minVersion

Минимальная версия Firefox, необходимая для запуска расширения.
Допустимые версии приложения .
em:maxVersion

Максимальная версия Firefox, необходимая для запуска расширения.
Допустимые версии приложения .

Подробнее о дополнительных параметрах читайте в разделе «Установочные манифесты» .

c hrome.manifest

Хром Firefox — это все вокруг окна контента. т. е. панель инструментов веб-браузера, меню, строка состояния и т. д. Следующий файл для нашего расширения, который, вероятно, будет неудобно редактировать, — это chrome.mainfestфайл. Это, однако, связано с install.rdfключом к тому, как ваше расширение будет добавлено в Firefox и как оно будет работать. Наш chrome.manifestфайл выглядит так:

content     linktargetfinder    chrome/content/
content linktargetfinder chrome/content/ contentaccessible=yes
overlay chrome://browser/content/browser.xul chrome://linktargetfinder/content/browser.xul

locale linktargetfinder en-US locale/en-US/

skin linktargetfinder classic/1.0 skin/
style chrome://global/content/customizeToolbar.xul chrome://linktargetfinder/skin/skin.css

Итак, что же это за варианты? Давайте пройдемся по ним:

content linktargetfinder chrome/content/

Путь к тому, где будут найдены ваши файлы содержимого расширения.
content linktargetfinder chrome/content/ contentaccessible=yes

То же, что и выше, но когда
contentaccessible=yesон добавлен, он позволяет Firefox 3 и более поздним версиям получать доступ к файлам расширения и отображать их в веб-браузере (как на веб-странице). Нашел эту отличную помощь через
веб-страницы, доступ к chrome: // запрещен .
overlay chrome://browser/content/browser.xul chrome://linktargetfinder/content/browser.xul

Путь к файлу, который вы будете использовать для переопределения элементов веб-браузера и добавления элементов на панель инструментов, в меню и строку состояния.
locale linktargetfinder en-US locale/en-US/

Используется для локализации контента.
skin linktargetfinder classic/1.0 skin/

Кожа ссылка.
style chrome://global/content/customizeToolbar.xul chrome://linktargetfinder/skin/skin.css

Наложения стилей для хромированных страниц.

Более подробную информацию можно найти в Chrome Manifest .

папка c hrome

Хорошо, как только обязательные части убраны, теперь вещи начинают становиться интересными. Это также когда мы начинаем смотреть на XUL, что означает XML User Interface Language. Он разработан Mozilla для создания интерфейсов в Firefox, Thunderbird и т. Д.

Сначала в chrome/contentпапке создайте три файла:

  • browser.xul
  • options.xul
  • linkTargetFinder.js

browser.xul

Это файл, который мы будем использовать, чтобы переопределить внешний вид веб-браузера по умолчанию, т. Е. Добавить кнопку на панель инструментов, элемент в меню «Инструменты» и значок в строке состояния. Давайте посмотрим на полный файл browser.xul, а затем разберем его:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://linktargetfinder/skin/skin.css" type="text/css"?>
<!DOCTYPE linktargetfinder SYSTEM "chrome://linktargetfinder/locale/translations.dtd">
<overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="linkTargetFinder.js" />

<menupopup id="menu_ToolsPopup">
<menuitem label="&runlinktargetfinder;" key="link-target-finder-run-key" oncommand="linkTargetFinder.run()"/>
</menupopup>

<keyset>
<key id="link-target-finder-run-key" modifiers="accel alt shift" key="L" oncommand="linkTargetFinder.run()"/>
</keyset>

<statusbar id="status-bar">
<statusbarpanel id="link-target-finder-status-bar-icon" class="statusbarpanel-iconic" src="chrome://linktargetfinder/skin/status-bar.png" tooltiptext="&runlinktargetfinder;" onclick="linkTargetFinder.run()" />
</statusbar>

<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="link-target-finder-toolbar-button" label="Link Target Finder" tooltiptext="&runlinktargetfinder;" oncommand="linkTargetFinder.run()"/>
</toolbarpalette>
</overlay>

Сначала есть некоторый общий синтаксис XML , затем вы включаете свой код CSS и устанавливаете DOCTYPE для локализации. За ним следует overlayкорневой элемент с пространством имен, вдохновленным Ghostbuster (разработчики — настоящие гики :-)).

После этого вы можете написать любой XUL-файл, который вам нужен, и, в принципе, HTML должен был быть таким. Я имею в виду то, что он заполнен базовыми опциями интерфейса, которые нигде не встречаются в HTML . Для полного обзора того, что вы можете сделать, пожалуйста, прочитайте XUL Reference .

В нашем коде мы начинаем с добавления пункта меню в меню «Инструменты» в Firefox и подключаем его к сочетанию клавиш:

<menupopup id="menu_ToolsPopup">
<menuitem label="&runlinktargetfinder;" key="link-target-finder-run-key" oncommand="linkTargetFinder.run()"/>
</menupopup>

<keyset>
<key id="link-target-finder-run-key" modifiers="accel alt shift" key="L" oncommand="linkTargetFinder.run()"/>
</keyset>

Затем добавьте значок в строку состояния Firefox:

<statusbar id="status-bar">
<statusbarpanel id="link-target-finder-status-bar-icon" class="statusbarpanel-iconic" src="chrome://linktargetfinder/skin/status-bar.png" tooltiptext="&runlinktargetfinder;" onclick="linkTargetFinder.run()" />
</statusbar>

И в конце мы добавляем кнопку на панель инструментов Firefox:

<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="link-target-finder-toolbar-button" label="Link Target Finder" tooltiptext="&runlinktargetfinder;" oncommand="linkTargetFinder.run()"/>
</toolbarpalette>

Обратите внимание, что вам нужно перейти в меню «Вид»> «Панели инструментов»> «Настроить…», чтобы добавить кнопку на видимую панель инструментов.

В приведенных выше примерах вы могли заметить &runlinktargetfinder;код. Это используется для локализации текста, а его перевод можно найти в localeпапке. Подробнее об этом позже.

Еще одна вещь, на которую следует обратить внимание, что поначалу может показаться хитрой, заключается в том, что некоторые идентификаторы и классы для элементов XUL действительно имеют значение для их отображения, вытекающие из основного кода Firefox. Обязательно внимательно прочитайте XUL Reference для элементов, которые вы используете.

Если вы хотите использовать обычные элементы HTML вместо / вместе с XUL, вы можете включить определение XHTML в свой корневой элемент, а затем включить любой элемент HTML с html:префиксом. Как это:

<overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:HTML="http://www.w3.org/1999/xhtml">

<html:input type="submit" value="Send" />

options.xul

Этот файл используется для диалога опций / предпочтений вашего расширения, и его путь указан в install.rdfфайле в Description/em:optionsURLузле. Полный файл опций для нашего расширения выглядит так:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<prefwindow
title="Link Target Finder Preferences"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<prefpane label="Link Target Finder Preferences">
<preferences>
<preference id="link-target-finder-autorun" name="extensions.linktargetfinder.autorun" type="bool"/>
</preferences>

<groupbox>
<caption label="Settings"/>
<grid>
<columns>
<column flex="4"/>
<column flex="1"/>
</columns>
<rows>
<row>
<label control="autorun" value="Autorun"/>
<checkbox id="autorun" preference="link-target-finder-autorun"/>
</row>
</rows>
</grid>
</groupbox>

</prefpane>

</prefwindow>

Опять же, некоторая регулярная информация XML и стилизация содержимого. Затем он использует XUL для разметки содержимого диалога настроек. Интересная часть здесь, однако, соединяет пользовательский ввод с фактическими настройками расширения (эти настройки можно найти в prefs.jsфайле, подробно описанном ниже).

Для начала вы создаете preferencesгруппу в options.xulфайле с вашими предпочтениями. Затем присвойте каждому предпочтению идентификатор и свяжите его с реальными предпочтениями расширения с помощью nameатрибута:

<preferences>
<preference id="link-target-finder-autorun" name="extensions.linktargetfinder.autorun" type="bool"/>
</preferences>

Затем вы создаете элемент и добавляете preferenceк нему атрибут, указывающий на предварительно выбранный idатрибут для предпочтения в preferencesгруппе. Затем он автоматически свяжет свое значение с этим конкретным предпочтением.

<checkbox id="autorun" preference="link-target-finder-autorun"/>

Обратите внимание, что вам не нужно добавлять кнопку «ОК» для диалогового окна — например, на Mac ее не будет, пока она автоматически добавляется для пользователей Windows. Все о совместимости системы, друзья мои.

linkTargetFinder.js

Если вы похожи на меня, то здесь вы будете чувствовать себя как дома. Хороший старый код JavaScript.:-)

Здесь приятно то, что вы можете написать любой элемент в XUL и любой элемент в окне содержимого HTML . Все, что вам нужно, чтобы получить доступ к окну контента, — это предшествовать вызову документа contentключевым словом, например так:

content.document.getElementsByTagName("a");

Вот полный код linkTargetFinder.jsфайла:

var linkTargetFinder = function () {
var prefManager = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
return {
init : function () {
gBrowser.addEventListener("load", function () {
var autoRun = prefManager.getBoolPref("extensions.linktargetfinder.autorun");
if (autoRun) {
linkTargetFinder.run();
}
}, false);
},

run : function () {
var head = content.document.getElementsByTagName("head")[0],
style = content.document.getElementById("link-target-finder-style"),
allLinks = content.document.getElementsByTagName("a"),
foundLinks = 0;

if (!style) {
style = content.document.createElement("link");
style.id = "link-target-finder-style";
style.type = "text/css";
style.rel = "stylesheet";
style.href = "chrome://linktargetfinder/skin/skin.css";
head.appendChild(style);
}

for (var i=0, il=allLinks.length; i<il; i++) {
elm = allLinks[i];
if (elm.getAttribute("target")) {
elm.className += ((elm.className.length > 0)? " " : "") + "link-target-finder-selected";
foundLinks++;
}
}
if (foundLinks === 0) {
alert("No links found with a target attribute");
}
else {
alert("Found " + foundLinks + " links with a target attribute");
}
}
};
}();
window.addEventListener("load", linkTargetFinder.init, false);

Хотя это довольно много кода, он также очень простой. Когда окно загружается, оно запускает initметод linkTargetFinderобъекта. Если для параметра autorunустановлено значение true, он runнемедленно вызывает свой метод. В противном случае он будет вызываться только при нажатии кнопки панели инструментов, элемента меню или значка строки состояния. Это происходит через oncommandатрибут на элементах в browser.xulфайле.

Код в runметоде довольно прост. Он добавляет файл CSS из папки расширений chrome в текущий документ, находит все ссылки в нем, просматривает их и проверяет, есть ли у них targetатрибут, подсчитывает их, выделяет их и предупреждает о количестве обращений.

Как видите, в коде есть указатель на то, что называется gBrowser. Вот как получить ссылку на текущий веб-браузер, и вы также можете использовать getBrowser(). Обратите внимание, что этот вид кода доступен только из контекста XUL веб-браузера. Дополнительную информацию и опции можно найти в браузере с вкладками.

Единственная необычная часть для JavaScript — это переменная prefManager, которая подключается к диспетчеру предпочтений Firefox и позже получает autorunпредпочтение с помощью этого кода:

var autoRun = prefManager.getBoolPref("extensions.linktargetfinder.autorun");

Три типа расширений: строковое, целое и логическое, и шесть методов для работы с ними:

  • getBoolPref()
  • setBoolPref()
  • getCharPref()
  • setCharPref()
  • getIntPref()
  • setIntPref()

д efaults папки

Внутри defaultsпапки вы создаете preferencesпапку, а в ней — файл с именем pref.js. Это используется для предпочтений, которые вы хотите использовать для вашего расширения, и выглядит так:

pref("extensions.linktargetfinder.autorun", false);

l ocale папка

Используется для локализации. В нашем случае у нас есть только одна дочерняя папка для en-USконтента, но она может быть легко расширена. У этой папки есть файл с именем translations.dtd, который содержит переводы для сущностей, используемых в файлах XUL. Наш файл выглядит так:

<!ENTITY runlinktargetfinder "Run Link Target Finder">

Помните &runlinktargetfinder;в browser.xulфайле? Вот где он получает свой перевод.

папка s kin

Теперь, когда у нас есть все функциональные возможности, давайте сделаем вещи немного более симпатичными (немного, хорошо?). В нашей skinпапке, у нас есть три файла: skin.css, status-bar.pngи toolbar-large.png. Изображения, естественно, используются для панели инструментов и строки состояния соответственно.

CSS в skin.cssиспользуется для установки изображения на панели инструментов, размер и место для значка STATUSBAR и выделения вида ссылок с targetатрибутом. Код выглядит так:

#link-target-finder-toolbar-button {
list-style-image: URL("chrome://linktargetfinder/skin/toolbar-large.png");
}

#link-target-finder-status-bar-icon {
width: 83px;
margin: 0 5px;
}

.link-target-finder-selected {
outline: 2px solid red !important;
}

Упаковка и установка

Расширения Firefox поставляются как файлы XPI, и в основном это просто ZIP-файлы с другим расширением. Поэтому, когда вы закончите со своим расширением, все, что вам нужно сделать, это сжать файлы вместе и дать ему расширение XPI. Примечание: не не ZIP вмещающей папки для расширения, только его содержимого ( chromeпапок, chrome.manifestи install.rdfфайлов и т.д.).

Получив файл XPI, вы можете просто перетащить его в Firefox, и он автоматически установится.

Упаковка с Windows

Выберите все содержимое вашей папки расширения, щелкните правой кнопкой мыши и выберите Send To > Compressed (Zipped) Folder. Переименуйте его .xpiвместо, .zipи все готово!

Упаковка с Mac

Откройте терминал, перейдите к вашему внутреннему номеру с помощью CDкоманды и введите zip -r LinkTargetFinder.xpi *. Та даа!

Упаковка с Linux

Откройте терминал, перейдите в папку расширений и введите zip -r LinkTargetFinder.xpi *All done!

Распределение вашего расширения

Есть два варианта распространения вашего расширения. Или используйте addons.mozilla.org или разместите его самостоятельно. Если вы делаете это самостоятельно, вы можете указать updateURLв своем install.rdfфайле, но учтите, что начиная с Firefox 3 это должно быть безопасное место, например, через SSL или подобное.

Лично я бы порекомендовал addons.mozilla.org для большей досягаемости, автоматического обновления и статистики. Недостатком этого является то, что процесс рассмотрения может занять некоторое время, чтобы ваше расширение получило одобрение. До этого его еще можно было загрузить в качестве экспериментального дополнения, но для этого необходимо иметь учетную запись addons.mozilla и войти в систему.

Чтобы убедиться, что это не займет больше времени, чем необходимо, я рекомендую прочитать
статью «Успешно рассмотрите свой аддон»
.

Загрузки

Весь код, который я здесь создал, доступен как ZIP-файл, так что вы можете начать экспериментировать, что-то менять и посмотреть, что произойдет. Он также доступен в виде файла XPI, который вы можете установить в Firefox просто для проверки функциональности (перетащите его в Firefox).

Счастливое расширение развивается!

Я надеюсь, что это было хорошее, хотя и долгое, введение в разработку расширений Firefox и что оно помогло вам понять концепции, над которыми вы еще не получили полного контроля. Удачи, и не стесняйтесь спрашивать, если у вас есть какие-либо вопросы!