Внимание! Содержимое данной статьи устарело. Сейчас дополнения создаются с помощью WebExtensions.
Вы решили присоединиться к удивительному миру расширений 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 должен быть закрыт):
Start -> Run "%ProgramFiles%Mozilla Firefoxfirefox.exe" -no-remote -P dev
или
firefox -P
Start -> Run "%ProgramFiles(x86)%Mozilla Firefoxfirefox.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 > em:id >
em:minVersion > 3.6 em:minVersion >
em:maxVersion > 20.* em:maxVersion >
Description >
em:targetApplication >
Как и большинство других 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: >em:minVersion — минимальная версия firefox, необходимая для работы приложения
em:maxVersion — соответственно максимальная версия firefox, необходимая для работы расширения
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.
Регистрация оверлея. Файл overlay.xul добавляется в интерфейс браузера browser.xul.
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 с .
1.0 — Установка
Существует два способа установки:
1. В папке с Вашим профилем (dev_folder) найти папку extensions (если её нет, то создать), внутри неё создать файл, название которого должно совпадать с id дополнения (в нашем случае myfirstextension@coddism.com), и внутрь его записать полный путь до папки с дополнением (должно состоять только из латиницы и желательно не содержать знаков подчеркивания), не забыв в конце написать слэш.
Если всё сделать правильно, то при запуске Firefox спросит разрешение установить дополнение, после установки и перезагрузки браузера дополнение заработает.
2. Установка из файла.
Этот способ мне нравится гораздо больше. Всё что нужно — упаковать всю папку в zip-архив (install.rdf и chrome.manifest должны находиться в корневой папке архива), сменить его расширение на xpi, установить, перезагрузить браузер. Установить можно тоже разными способами, но суть их одна:
Перетащить файл в окно firefox
Открыть его (Ctrl+O или Файл -> Открыть)
Через меню в управлении дополнениями
Либо просто открыть этот файл через любой файловый менеджер при условии, если для открытия 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, измененную мною версию дополнения можно скачать по этой ссылке — в ней проблем с совместимостью нет.
Функционал этого дополнения можно реализовать двумя другими:
- Developer Assistant (Reload All Chrome + немного других интересностей)
- Restart Button (Restart Firefox)
Сегодня в менеджере обновлений решил обновится firefox до шестой версии. Всё скачалось и установилось без проблем, но вот огне-лис загружатся отказался и выдал:
Я с этим уже сталкивался при при обновлении на 5-ю версию firefox и сегодня проблему решил менее чем за минуту.
Проблема в русификации лиса. Удаляем дополнение руссификации и всё работает.
Дополнения firefox держит в
Переходим в эту папку.
Помните, что файлы начинающиеся с точки являются скрытыми. Если обозреваем файлы и папки в наутилусе, то надо нажать Cntl+H
И удаляем файл langpack-ru@firefox.mozilla.org.xpi
Удаляем русификацию из firefox
Если удаление langpack-ru@firefox.mozilla.org.xpi не поможет, то тут скорее всего глючит какое-то другое дополнение. Советую для начала полностью перетащить папку extensions в другое место, если и это не поможет, то перетаскиваем папку Cache возможно ошибка возникает из-за него. В крайнем случае можно полностью очистить папку xxxyyy.default, но тогда потеряются все настройки профиля.
Загружаем браузер и видим, что он на английском. Для русификации переходим на сайт http://mozilla-russia.org/ и выбираем русификацию под нужную версию firefox, как показано на скриншоте.
Устанавливаем дополнение и перезагружаем браузер. Наслаждаемся русским firefox.
В данной статье представлена пошаговая инструкция по разработке простейшего расширения для FireFox.
Это частичный перевод оригинальной статьи.
Это не моя статья, а моего друга (его мыльце: templar8@gmail.com). Он очень хочет попасть на Хабр. У меня самого не хватает кармы для инвайта.
Вступление
Это руководство — пошаговая инструкция по созданию простейшего расширения. Мы попробуем добавить в строку состояния еще одну небольшую панельку с фразой «Hello, World!».
Подготовка окружения
Расширения упаковываются и распространяются в виде zip-файлов или пакетов с расширением XPI.
Вот пример типичной внутренней структуры XPI-файла:
exampleExt.xpi:
/install.rdf
/components/*
/components/cmdline.js
/defaults/
/defaults/preferences/*.js
/plugins/*
/chrome.manifest
/chrome/icons/default/*
/chrome/
/chrome/content/
Нам нужно создать структуру каталогов, похожую на эту. Для начала создайте корневую директорию расширения (например, C:extensionsmy_extension или
/extensions/my_extension/ ). Внутри этого каталога создайте каталог chrome , в котором создайте каталог content .
В корневом каталоге расширения создайте два пустых текстовых файла с именами chrome.manifest и install.rdf . В итоге должна получиться структура каталогов следующего вида:
install.rdf
chrome.manifest
chrome
content
Дополнительная информация о настройке окружения находится по этой ссылке.
Сценарий установки
Откройте файл 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 > sample@example.net em:id >
- em:version > 1.0 em:version >
- em:type > 2 em:type >
- with minimum and maximum supported versions. —>
- em:targetApplication >
- Description >
- em:id >em:id >
- em:minVersion > 1.5 em:minVersion >
- em:maxVersion > 3.0.* em:maxVersion >
- Description >
- em:targetApplication >
- em:name > sample em:name >
- em:description > A test extension em:description >
- em:creator > Your Name Here em:creator >
- em:homepageURL > www.example.com em:homepageURL >
- Description >
- RDF >
* This source code was highlighted with Source Code Highlighter .
- sample@example.net — ID расширения. Это значение записывается формате email-адреса и необходимо для идентификации расширения (оно не должно быть вашим email-адресом). Сделайте его уникальным. Вы также можете использовать GUID. ПРИМЕЧАНИЕ: Хотя этот параметр и записывается в формате email-адреса, он не обязательно должен быть валидным. (example.example.example)
- Параметр 2 — 2 указывает на то, что это будет расширение. Допустим, для тем оформления это значение должно быть установлено в 4 (все коды типов можно посмотреть тут).
- — ID Firefox’а (прим. пер. – видимо, для Thunderbird будет другое значение).
- 1.5 — номер минимально необходимой для работы расширения версии Firefox. Никогда не используйте символ * для указания minVersion, это может привести к неожиданным результатам.
- 3.0.* — максимальный номер версии Firefox с которой будет работать расширение. Это значение должно быть не новее самой последней на данный момент версии браузера! В данном случае «3.0.*» указывает на то, что расширение будет работать с Firefox 3.0 и версиями 3.0.x.
(Если вы получили сообщение, что install.rdf неверен, полезным будет загрузить этот файл в Firefox (Файл->Открыть файл…), после чего браузер покажет вам xml ошибки. В моем случае был пробел перед « browser.xul ( $FIREFOX_INSTALL_DIR/chrome/browser.jar содержит content/browser/browser.xul ) В browser.xul мы можем найти описание строки состояния, которое выглядит приблизительно так:
- statusbar id ="status-bar" >
- . statusbarpanel > .
- statusbar >
* This source code was highlighted with Source Code Highlighter .
— это «связующая точка» XUL-слоя.
XUL-слои
XUL-слои — это способ добавления виджетов в XUL-документ. XUL-слой — это .xul-файл, который определяет XUL-фрагменты, описывающие связующие точки в «основном» документе. Эти фрагменты могут указывать на виджеты, которые будут добавлены, удалены или изменены.
Пример документа XUL-слоя
- xml version ="1.0" ? >
- overlay id ="sample"
- xmlns ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
- statusbar id ="status-bar" >
- statusbarpanel id ="my-panel" label ="Hello, World" />
- statusbar >
- overlay >
* This source code was highlighted with Source Code Highlighter .
Тег с id, равным « status-bar » указывает на виджет браузера в который мы хотим добавить наш элемент.
Тег — это новый виджет, который мы хотим добавить.
Сохраните этот код в файле sample.xul каталога chrome/content .
Chrome URIs
XUL-файлы – это часть т.н. «Chrome Packages» — пакетов элементов пользовательского интерфейса, загружаемых через URI вида chrome:// . Вместо того, чтобы загружать интерфейс, используя URI вида file:// (тем более, расположение Firefox может быть различным в зависимости от платформы и систем), разработчики Mozilla пришли к решению создать новый вид URI, используя который все установленные приложения будут иметь доступ к содержимому XUL.
URI для окна браузера – это chrome://browser/content/browser.xul . Попробуйте ввести этот URL в адресной строке Firefox.
Chrome URI состоит из нескольких частей:
- 1-я — протокол ( chrome ), которая сообщает сетевой библиотеке Firefox, что это Chrome URI.
- 2-я — название пакета (в данном примере, browser ), который указывает на набор компонентов пользовательского интерфейса. Для вашего приложения эта часть должна быть уникальной, во избежание конфликтов с другими расширениями.
- 3-я — тип запрашиваемых данных. Бывает трех типов: content (XUL, JavaScript, XBL связи и другие составляющие пользовательского интерфейса приложения), locale (DTD, файлы .properties, в которых могут быть и другие файлы, содержащие строки локализации пользовательского интерфейса) и skin (CSS и изображения темы).
- Последняя часть – путь к загружаемому файлу.
Например, chrome://foo/skin/bar.png загружает файл bar.png из раздела skin темы foo .
Когда вы загружаете что-либо, оперируя Chrome URI, Firefox использует реестр Chrome (Chrome Registry) для преобразования этого URI в реальный путь к файлу на диске (или в JAR архивах).
Создание Chrome Manifest
Для получения большей информации о Chrome Manifest и всех его свойствах можно обратиться к справочному руководству.
Откройте файл chrome.manifest, который был создан в корневом каталоге вашего расширения. Добавьте следующий код:
content sample chrome/content/
(Не забудьте о закрывающем слеше, «/»! Без него пакет не будет зарегистрирован.)
Разберем каждый элемент:
- тип пакета chrome
- название пакета chrome (должно быть написано в нижнем регистре, потому что Firefox/Thunderbird в версии 2 и более ранних не поддерживают названия со смешанным регистром — баг 132183)
- размещение файлов пакетов chrome
Это означает, что файлы пакета sample расположены в каталоге chrome/content относительно места расположения файла chrome.manifest .
Обратите внимание, что файлы контента, локализаций и скинов должны находиться внутри каталога content, locale и skin подкаталога chrome соответственно.
Сохраните файл. Теперь, когда вы запустите Firefox с вашим расширением (как это сделать, будет описано ниже), пакет chrome будет зарегистрирован.
Регистрация слоя
Теперь необходимо связать ваш слой с окном браузера. Для этого добавьте следующие строки в файл chrome.manifest :
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
Эти две строки указывают Firefox’у связать sample.xul и browser.xul во время загрузки browser.xul .
Тестирование
Во-первых, мы должны сообщить Firefox о нашем расширении. На стадии разработки для Firefox версии 2 и выше, вы можете указать откуда брать новое расширение, и браузер будет его загружать после каждого перезапуска.
- Перейдите в домашний каталог, а после в каталог, содержащий профиль Firefox, с которым вы собираетесь работать (например, Firefox/Profiles/
.default/ ).
/extensions/my_extension/ ). Пользователи Windows должны помнить о направлении слешей, обязательно добавьте закрывающий слеш и удалите все замыкающие пробелы.
Теперь все готово к тестированию.
Запустите Firefox. Firefox по текстовой ссылке сам найдет каталог с вашим расширением и установит его. После запуска браузера вы увидите надпись «Hello, World!» в правой части строки состояния.
Вы можете сделать некоторые изменения в .xul-файле, перезапустить Firefox, и сразу же увидите результат.
Создание пакета
Теперь, когда расширение работает, вы можете создать пакет для последующего распространения и установки.
Запакуйте архиватором zip содержимое каталога с вашим расширением (не сам каталог расширения) и измените расширение архива с .zip на .xpi.
Если вы являетесь счастливым обладателем ‘Extension Builder’-а, то он может сам сделать за вас всю грязную работу (Tools -> Extension Developer -> Extension Builder). Просто перейдите в каталог с вашим расширением и нажмите кнопку Build Extension. Это расширение имеет очень много инструментов облегчающих разработку.
Теперь загрузите получившийся .xpi-файл на ваш сервер и удостоверьтесь, что его тип установлен в application/x-xpinstall . После этого можно скачать и установить расширение.
