Как сделать расширение для firefox
Написание расширения под Firefox
Внимание! Содержимое данной статьи устарело. Сейчас дополнения создаются с помощью WebExtensions.
Вы решили присоединиться к удивительному миру расширений Mozilla? Добро пожаловать. Для пропуска Вам понадобятся элементарные навыки программирования, так как Вам придется разговаривать на языках XML, JavaScript и CSS. Проходите. Браузеры давно уже перестали быть простым средством для просмотра веб-страниц, наличие дополнений значительно расширило их функционал и сделало каждого из них целой экосистемой. Благодаря различным реализованным в дополнениях функциям пользователь может построить браузер своей мечты. Пожалуй, почти каждый пользователь Firefox ставил так недостающий дефолтной сборке Speed Dial или ограждающий от всякой навязчивой рекламы adBlock, и уж точно большинство веб-разработчиков пользуются расширением Firebug, который уже сам по себе является целым комбайном. А как Вам дополнение, позволяющее сканировать доступные WiFi-сети или полноценный FTP-клиент внутри браузера? Ни один их существующих ныне браузеров не может предложить такой функционал «из коробки».
Самыми известными и используемыми из дополнений Firefox являются расширения (или аддоны, англ. Add-on) и темы. В этой статье мы разбираем расширения. Mozilla предоставила разработчикам расширений широкий простор для действий — весь браузер, получить доступ можно практически к любому элементу браузера, именно поэтому все расширения в магазине addons.mozilla.org проходят строгую модерацию — задействованы не только валидаторы, но и живые люди, которые при необходимости связываются с Вами по email, поэтому, если Вы захотите поделиться расширением, Вам понадобится хотя бы минимальное знание английского языка.
Само расширение представляет из себя zip-архив с расширением xpi. У него своя структура, свои стандарты и обычаи, с которыми Вы со временем ознакомитесь.
Если Вы используете Огнелис как браузер по умолчанию, то Вам, наверняка, не захочется захламлять его незаконченными тестовыми расширениями, хоть и своими. Если для Вас это не критично, то пропустите шаг 0.0.
Создание нового профиля — это просто. Чтобы вызвать окно работы профилями нужно выполнить (Firefox должен быть закрыт):
Ubuntu и многие другие Linux-дистрибутивы:
Остальные Linux/Unix дистрибутивы:
MacOS 10.5 и старше:
Создание нового профиля никаких сложностей не сулит, так что подробно останавливаться на нем не буду. Напомню лишь, что при работе с реальным проектом (относится к любому проекту) обязательно делайте бэкапы. Папку, указанную при создании профиля, условно назовем эту папку dev_folder а профиль dev_profile. После первой загрузки этого профиля папка заполнится файлами со всеми дефолтными настройками.
Шаг 0.1 — Делаем зародыш приложения.
Приступаем к созданию. Если Вам лень создавать эту структуру, можете скачать этот архив (этот) и распаковать, если же не лень, то создаем папку и следующую структуру (файлы создаем пустые, их содержимое будет расписано ниже):
/content/overlay.xul
/chrome.manifest
/install.rdf
0.1.1 — Install.rdf, или коротко о главном
Install.rdf – это обязательный файл, он является манифестом установки дополнения, написан в формате XML и даёт всю информацию о дополнении.
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: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:id =
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-пакет, названный myfirstextension из папки content.
Регистрация оверлея. Файл overlay.xul добавляется в интерфейс браузера browser.xul.
0.1.3 — что такое XUL
XUL – это такой язык разметки на основе XML, разрабатываемый MozillaFoundation, некая альтернатива HTML. Весь интерфейс Firefox написан на этом языке. Чтобы посмотреть, что он представляет из себя, надо ввести в адресную строку chrome://browser/content/browser.xul и посмотреть его исходный код (Ctrl+U).
Разберем наш простейший overlay.xul
1.0 — Установка
Существует два способа установки:
1. В папке с Вашим профилем (dev_folder) найти папку extensions (если её нет, то создать), внутри неё создать файл, название которого должно совпадать с id дополнения (в нашем случае myfirstextension@coddism.com), и внутрь его записать полный путь до папки с дополнением (должно состоять только из латиницы и желательно не содержать знаков подчеркивания), не забыв в конце написать слэш.
Если всё сделать правильно, то при запуске Firefox спросит разрешение установить дополнение, после установки и перезагрузки браузера дополнение заработает.
2. Установка из файла.
Этот способ мне нравится гораздо больше. Всё что нужно — упаковать всю папку в zip-архив (install.rdf и chrome.manifest должны находиться в корневой папке архива), сменить его расширение на xpi, установить, перезагрузить браузер. Установить можно тоже разными способами, но суть их одна:
Перетащить файл в окно firefox
Через меню в управлении дополнениями
Либо просто открыть этот файл через любой файловый менеджер при условии, если для открытия xpi файлов Firefox назначен приложением по умолчанию
В этом случае в папке extensions внутри dev_folder создастся папка или файл (в зависимости от параметра em:unpack внутри install.rdf) с названием, совпадаюшим с id дополнения.
1.1 — Правка.
Если Вы устанавливали дополнение способом 1 (с прописыванием пути) или install.rdf имеет параметр true, то процесс написания дополнения будет выглядеть следующим образом — правка файлов внутри папки, перезагрузка Firefox, тестирование, при необходимости повторить.
В ином случае придется после каждого изменения повторять пункт 2 из главы 1.0.
На этом вводная статья заканчивается, написание рабочего расширения будет разобрано в следующей статье (этой).
Дополнение Addon Developer Helper может избавить вас от необходимости перезагружать браузер после каждого изменения в коде.
Функционал этого дополнения можно реализовать двумя другими:
Ваш первый WebExtension
В этой статье мы пройдём весь путь создания WebExtension для Firefox, от начала и до конца. Это дополнение будет просто добавлять красную рамку ко всем страницам, загруженным с «mozilla.org» или любого из его поддоменов.
Для начала вам нужен Firefox 45 или более поздней версии.
Написание WebExtension
Создайте новую директорию (папку) и перейдите в неё:
manifest.json
Теперь создайте новый файл, назовите его «manifest.json» в папке «borderify». Вставьте туда следующий код:
В некоторых случаях вам нужно указать ID для вашего дополнения. Если вам нужно указать ID дополнения включите ключ applications в manifest.json и установите его свойство gecko.id :
icons/border-48.png
Дополнение должно иметь иконку (значок). Эта иконка будет показана в списке дополнений в Менеджере Дополнений. Наш файл manifest.json сообщает, что иконка будет находиться в файле «icons/border-48.png».
Вы можете использовать собственную иконку. Её размер должен быть 48×48 пикселей. Вы можете также использовать иконку размером 96×96 пикселей для отображения на мониторах высокого разрешения. В этом случае вам необходимо указать её в качестве свойства «96» объекта » icons» в файле manifest.json:
Также вы можете создать иконку в формате SVG и она будет корректно масштабироваться.
borderify.js
Наконец, создайте в директории «borderify» файл с именем «borderify.js» и поместите туда следующий код:
Этот скрипт будет встраиваться в страницу, которая совпадает с шаблоном, указанном в ключе content_scripts файла manifest.json. Этот скрипт имеет прямой доступ ко всему документу, как если бы он был загружен самой страницей.
Пробуем
Сначала внимательно проверьте, что вы правильно разместили файлы и дали им правильные имена:
Установка
Начиная с версии Firefox 45 вы можете временно установить WebExtension с локального диска.
Откройте страницу «about:debugging», кликните «Load Temporary Add-on» и выберите файл manifest.json:
Теперь ваше дополнение установлено и останется в браузере до его перезапуска.
Для проверки, зайдите на страницу «about:addons» чтобы открыть Менеджер Дополнений. Вы должны увидеть своё дополнение с именем и иконкой:
Также, вы можете запускать WebExtension из командной строки, используя web-ext.
Тестирование
Теперь зайдите на любую страницу домена «mozilla.org» и вы должны будете увидеть красную границу вокруг страницы:
Поэкспериментируйте немного. Поменяйте цвет границы или сделайте ещё что-нибудь с содержимым на странице. После того, как изменённый скрипт будет сохранён, а страница перезагружена, вы сразу увидите изменения:
Обратите внимание, что после изменения файла manifest.json, вы должны вручную перезагрузить своё дополнение. В настоящий момент это значит, что вам нужно перезагрузить Firefox, а затем снова загрузить своё дополнение на странице «about:debugging». Мы работаем над улучшением этого процесса.
Упаковка и публикация
Чтобы другие люди могли использовать ваше дополнение, вам необходимо запаковать его. Дополнения Firefox в запакованном виде являются XPI файлами, которые представляют собой обычные ZIP архивы с расширением «xpi».
При упаковке необходимо учитывать следующее: в ZIP архиве должны быть только файлы, а не содержащая их директория (директория «borderify» не должна попасть в архив). Для того, чтобы создать правильный XPI файл из вашего дополнения, в командной строке перейдите в директорию «borderify» и выполните следующую команду:
Начиная с Firefox 43 все дополнения должны быть подписаны прежде чем они будут установлены в браузер. Вы можете снять это ограничение только в Firefox Developer Edition или Firefox Nightly при помощи следующих шагов:
Что дальше?
Теперь, когда вы имеете представление о разработке дополнений для Firefox, вы можете:
Пишем своё расширение для браузера Mozilla Firefox
Итак, после обновления Firefox до 19 версии, полностью отвалилось горячо любимое расширение Яндекс.Бар. Не забуду напомнить, что Яндекс.Бар был заменен Яндекс.Элементами, которые понравились чуть больше, чем никому, поэтому и получили свои заслуженные 2 бала из 5ти.
Почему не понравились? Заменили адресную строку, стало неудобно просматривать почту, заменили закладки и убрали корректор адресной строки (под предлогом установки Punto Switcher, который может и хорош для обычного работника, но никак не для программиста. Поэтому и был удален почти сразу же, как установлен. Да и если можно было бы настроить, то всё равно желание пропало).
Немного погодя было решено создать свое подобное расширение, которое будет включать в себя такие плюшки, как просмотр почты и корректор адресной строки. Чтож, раз не ты, так кто другой?
Первым делом решено было не создавать свой велосипед и воскресить Яндекс.Бар, который не хотел работать в 19 версии браузера. В интернете подсказали, что расширение — это обычный zip архив. Открыли, посмотрели, ужаснулись и закрыли. Воскресить не удалось, даже при всем желании.
Тогда заходим в центр разработчика: builder.addons.mozilla.org. Я предпочел орудовать в веб-редакторе, хоть местами он иногда не очень гладко работал. Посмотрев на другие расширения, позаимствовав код и немного поняв весь смысл сея устройства, началось сначала всё со стенобитной машины и закончилось надфилем.
Билдер включает в себя 3 раздела: это раздел со скриптами (Lib), раздел с загружаемым контентом (картинки, стили и скрипты) и раздел с готовыми библиотеками (Libraries)
Кстати, вот документация: addons.mozilla.org/en-US/developers/docs/sdk/latest, добротно написанная.
Старт расширения начинается с загрузки файла main.js.
Вызывается функция: exports.main.
Пример файла main.js:
Что же за магия происходит в этом коде?
Первым делом подключается модуль tabs.
В данном случае он служит для того, чтобы можно было добавлять свой JavaScript код в страницу браузера.
Т.е. что у нас: при событии документа onready происходит добавление любого JavaScript кода в тело документа. В данном примере добавляется обработчик ссылок, у которых адрес начинается с mailto.
Ладно, давайте что-нибудь посложнее сделаем. Добавим-ка свою кнопку в верхний бар!
Опять же, не будем строить велосипеды, а с чистой совестью возьмем уже готовую библиотеку Toolbar Button Complete.
Методом тыка типа:
было обнаружено, что методы в точности совпадают с теми, что мы обычно используем при работе с элементами сайта. Но замечу, что по стандарту браузер не знает, что такое ни document, ни window в расширениях (да и еще есть отличия).
Замечу, что разработка билдера не стоит на месте и если раньше способ получения активного окна был таким:
то сейчас всё намного легче (пример я выше привел).
Чтож, немного рассказав о особенностях, вернусь к добавлению счетчика для кнопки.
Умные люди подсказали, что по стандарту стиль поля label у кнопки равен display: none;, поэтому как-то нужно было внедрить свой css код в бар. Решение, как оказалось, не сложное (советую завернуть в файл, который будет инклюдится по мере надобности):
И в функцию exprorts.main добавляем что-то вроде (хотя добавлять можете куда угодно):
не забыв создать в контенте файл stylesheet.css.
У меня файл содержит примерно следующее:
Почему мы скрываем иконку и добавляем фон? Всё потому, что если этого не сделать, то блоки всегда отображаются как display: block, какие бы значения я не выставлял (кстати, может кто знает по этой теме?) Поэтому и приходится так хитрить.
Также столкнулся с вопросом загрузки контента с других сайтов и парсинг xml.
С первым быстро разобрался, далеко ходить не надо: Request
А вот со вторым пришлось повозиться.
Вот так создание расширений для Firefox ничем не отличается от создания плагинов для jQuery 🙂
Кстати, конечное творение на сей день: CustomYandexBar, пока находится на проверке. Исходники, в них много чего полезного.
Если кому-нибудь не понравится, что использую «их» картинки, бренд или т.п. — пишите.
Создание расширения 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:\extensions\my_extension\ или
\
install.rdf
chrome.manifest
chrome\
content\
Дополнительная информация о настройке окружения находится по этой ссылке.
Сценарий установки
Откройте файл install.rdf и добавьте в него следующий текст:
— это «связующая точка» XUL-слоя.
XUL-слои
Пример документа XUL-слоя
Тег с id, равным « status-bar » указывает на виджет браузера в который мы хотим добавить наш элемент.
Тег — это новый виджет, который мы хотим добавить.
Chrome URIs
Chrome URI состоит из нескольких частей:
Когда вы загружаете что-либо, оперируя Chrome URI, Firefox использует реестр Chrome (Chrome Registry) для преобразования этого URI в реальный путь к файлу на диске (или в JAR архивах).
Создание Chrome Manifest
Для получения большей информации о Chrome Manifest и всех его свойствах можно обратиться к справочному руководству.
Откройте файл chrome.manifest, который был создан в корневом каталоге вашего расширения. Добавьте следующий код:
content sample chrome/content/
(Не забудьте о закрывающем слеше, «/»! Без него пакет не будет зарегистрирован.)
Обратите внимание, что файлы контента, локализаций и скинов должны находиться внутри каталога content, locale и skin подкаталога chrome соответственно.
Сохраните файл. Теперь, когда вы запустите Firefox с вашим расширением (как это сделать, будет описано ниже), пакет chrome будет зарегистрирован.
Регистрация слоя
Теперь необходимо связать ваш слой с окном браузера. Для этого добавьте следующие строки в файл chrome.manifest :
Тестирование
Во-первых, мы должны сообщить Firefox о нашем расширении. На стадии разработки для Firefox версии 2 и выше, вы можете указать откуда брать новое расширение, и браузер будет его загружать после каждого перезапуска.
Запустите Firefox. Firefox по текстовой ссылке сам найдет каталог с вашим расширением и установит его. После запуска браузера вы увидите надпись «Hello, World!» в правой части строки состояния.
Создание пакета
Теперь, когда расширение работает, вы можете создать пакет для последующего распространения и установки.
Как разработать расширение для Firefox
Признайте, что вы всегда хотели знать, как разработать расширение для Firefox, но у вас никогда не было времени на обучение 
Здесь я проведу вас до конца, и в конце статьи мы создадим полнофункциональное расширение для Firefox!
Наша цель
Мы создадим расширение Firefox, чтобы найти все ссылки на текущей веб-странице, выделить те, которые имеют target атрибут, и предупредить вас, сколько ссылок оно нашло. Хорошая часть заключается в том, что после того, как вы это сделаете, у вас есть понимание разработки расширений Firefox, а также проект для любого расширения, которое вы захотите разработать в будущем.
Что вам нужно — настройка среды разработки
Сначала давайте начнем с настройки среды разработки. Вам нужен Firefox (да) и в основном любой редактор кода, который вы предпочитаете. Затем, есть несколько рекомендуемых вещей для подготовки Firefox:
Создайте другой профиль разработки
Первым шагом является создание другого профиля в Firefox, так как вы сделаете некоторые настройки и изменения, которые вы, вероятно, не хотите использовать в своем обычном профиле. В моем случае я создал новый профиль разработки под названием «dev». Шаги, чтобы сделать это:
Диспетчер профилей в Windows
Менеджер профилей на Mac
Менеджер профилей в Linux
Настройки конфигурации для Firefox
Откройте Firefox с помощью диспетчера профилей (процесс, описанный выше, или установите профиль разработки по умолчанию во время разработки расширений). Затем введите about:config в адресной строке. Он предупредит вас об изменении настроек, но это нормально, так как вы будете делать только незначительные изменения для разработки. Вы можете отфильтровать существующие настройки, и если какие-либо из приведенных ниже настроек не существуют, вы можете просто создать их.
Рекомендуемые настройки
Это хорошо для включения ошибок расширения в Консоли ошибок Firefox (Инструменты> Консоль ошибок), отключения кэширования XUL и т. Д.
Дополнительные настройки
Это не обязательно, но они могут помочь вам. Лично я этим не пользуюсь.
Укажите ваш каталог расширений Firefox на ваше расширение
Вместо постоянной подготовки и переустановки вашего расширения, есть простой способ добавить указатель из каталога расширений Firefox в местоположение вашего кода. Для этого вы должны сначала найти каталог своего профиля:
Найдите каталог своего профиля
В каталоге профилей вы найдете все настройки для ваших профилей Firefox, включая информацию о расширениях.
Найти каталог профиля в Windows
Найти каталог профиля на Mac
Откройте Терминал и введите CD
Найти каталог профиля в Linux
Откройте терминал и введите CD
Указывая на расширение
В нашем примере создайте файл с именем linktargetfinder@robertnyman.com без какого-либо расширения, и в нем просто укажите его, где вы будете иметь свой код, например C:\extensions\ (Windows) или
Создание структуры папок и файлов
Чтобы создать хорошую основу для разработки расширений, необходимо создать структуру кода расширения. Начните с создания этой иерархии:
[Img_assist | NID = 7650 | название = | убывание = | ссылка = нет | Align = нет | ширина = 156 | Высота = 166]
я nstall.rdf
В Description узле
В Description/em:targetApplication узле
c hrome.manifest
Хром Firefox — это все вокруг окна контента. т. е. панель инструментов веб-браузера, меню, строка состояния и т. д. Следующий файл для нашего расширения, который, вероятно, будет неудобно редактировать, — это chrome.mainfest файл. Это, однако, связано с install.rdf ключом к тому, как ваше расширение будет добавлено в Firefox и как оно будет работать. Наш chrome.manifest файл выглядит так:
Итак, что же это за варианты? Давайте пройдемся по ним:
папка c hrome
Хорошо, как только обязательные части убраны, теперь вещи начинают становиться интересными. Это также когда мы начинаем смотреть на XUL, что означает XML User Interface Language. Он разработан Mozilla для создания интерфейсов в Firefox, Thunderbird и т. Д.
Сначала в chrome/content папке создайте три файла: