Признайте, что вы всегда хотели знать, как разработать расширение для 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
файле — подробнее об этом ниже).
В нашем примере создайте файл с именем [email protected]
без какого-либо расширения, и в нем просто укажите его, где вы будете иметь свой код, например 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>[email protected]</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 и что оно помогло вам понять концепции, над которыми вы еще не получили полного контроля. Удачи, и не стесняйтесь спрашивать, если у вас есть какие-либо вопросы!