Андрей Смирнов
Время чтения: ~18 мин.
Просмотров: 1

Пишем своё расширение для браузера Mozilla Firefox

1362212233_firefoxextensions.jpgПрограммингFirefox расширения02.03.2013(UPD 17.03.2019)

Внимание! Содержимое данной статьи устарело. Сейчас дополнения создаются с помощью 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 должен быть закрыт):

Для Windows:

Start -> Run "%ProgramFiles%Mozilla Firefoxfirefox.exe" -no-remote -P dev или firefox -P

Windows 64 bit:

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 — Делаем зародыш приложения.

Приступаем к созданию. Если Вам лень создавать эту структуру, можете скачать этот архив (этот) и распаковать, если же не лень, то создаем папку и следующую структуру (файлы создаем пустые, их содержимое будет расписано ниже):

Начнем с самого интересного файла — 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.comem:id>   <em:name>Test Extensionem:name>   <em:version>0.0.0.1em:version>   <em:description>Test Description For Test Extensionem:description>   <em:creator>NewDeveloperem:creator>   <em:type>2em:type>   <em:unpack>trueem:unpack>   <em:targetApplication>   <Description>     <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}em:id>     <em:minVersion>3.6em:minVersion>     <em:maxVersion>20.*em:maxVersion>   Description>   em:targetApplication> Description> RDF>

Как и большинство других 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 было распаковано — так легче редактировать.

Далее разберем :

Больше параметров Вы увидите здесь: https://developer.mozilla.org/en-US/docs/Install_Manifests.

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.

Строка 2:

Регистрация оверлея. Файл overlay.xul добавляется в интерфейс браузера browser.xul.

Больше информации и разных приколюх можно найти здесь: https://developer.mozilla.org/en-US/docs/Chrome_Registration.

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 с id=’status-bar’), добавляет туда панель с id=»coddism-panel», которая имеет стандартный для учебных программ заголовок «Hello, world». Все эти изменения происходят в созданном тут же слое overlay с id=»coddismo-overlay», параметр xmlns=»http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul» необходим для использования xul элементов. Для использования html-элементов внутри слоя придется добавить параметр xmlns:html=»http://www.w3.org/1999/xhtml».

1.0 — Установка

Существует два способа установки:

1. В папке с Вашим профилем (dev_folder) найти папку extensions (если её нет, то создать), внутри неё создать файл, название которого должно совпадать с id дополнения (в нашем случае myfirstextension@coddism.com), и внутрь его записать полный путь до папки с дополнением (должно состоять только из латиницы и желательно не содержать знаков подчеркивания), не забыв в конце написать слэш.

Если всё сделать правильно, то при запуске Firefox спросит разрешение установить дополнение, после установки и перезагрузки браузера дополнение заработает.

  1. Перетащить файл в окно firefox

  2. Открыть его (Ctrl+O или Файл -> Открыть)

  3. Через меню в управлении дополнениями001.1.jpg

  4. Либо просто открыть этот файл через любой файловый менеджер при условии, если для открытия 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, измененную мною версию дополнения можно скачать по этой ссылке — в ней проблем с совместимостью нет.

1368097460_39440.png

Функционал этого дополнения можно реализовать двумя другими:

  1. Developer Assistant (Reload All Chrome + немного других интересностей)
  2. Restart Button (Restart Firefox)

firefox-extension.png Mozilla Firefox, как и прочие современные браузеры, поддерживает возможность наращивания функционала с помощью расширений. Множество полезных и не очень расширений доступно на официальном и прочих сайтах, причем многие их ставят, не задумываясь о возможных закладках в них. В качестве примера можно вспомнить не более чем годичной давности случай с расширением, которое добавляло возможность кастомизации личной странички в ВКонтакте, но при этом активно себя рекламировало, рассылая сообщения по друзьям, используя браузер установившего.

Поэтому, а заодно в связи с появившейся свободной минуткой я решил набросать пример простого расширения для Firefox, которое будет перехватывать POST-запросы и отправлять их содержимое на сторонний сайт. Основы процесса подробно описаны, например, здесь и здесь, поэтому часть кода будет приведена без комментариев. Так как плагин обладает небольшими функциональными возможностями, то из всех типичных для расширения файлов (о которых вы могли прочесть по ссылкам выше) будут использоваться лишь несколько — это chrome.manifest, install.rdf, browser.xul и файл, который содержит непосредственно код расширения. В итоге у вас должна получиться следующая структура:

Начнем с файла chrome.manifest:

Ничего интересного он не содержит, мы как бы указываем путь относительно директории с расширением (плагином), где хранится основной исполняемый файл для него. Флаг contentaccessible задает возможность использования некоторых HTML-элементов вроде img и script из недоверенных источников, подробнее можно прочитать тут. Строка с overlay используется для подгрузки JS-кода расширения в контексте браузера, хотя по большому счету оверлеи необходимы для изменения пользовательского интерфейса (добавления кнопочек, меню и подобной лабуды). XUL файл представляет из себя обычный XML-файл, подчиняющийся определенным правилам. Подробнее можно почитать на сайте MDN. В нашем случае browser.xul прост до невозможности:

Теперь рассмотрим файл install.rdf, который тоже является XML-файлом, описывающим устанавливаемое расширение, информацию об авторе, диапазон совместимых версий браузера, версию плагина и тому подобное:

Тут использован довольно скудный набор возможных атрибутов (полный), но нам много и не надо. Параметр id в секции Description является обыкновенным GUID, его можно сгенерировать как самому, практически от балды, так и с помощью всяких утилит и сайтов. И, наконец, рассмотрим код самого плагина:

Сделать из набора файлов и директорий расширение можно очень просто, достаточно заархивировать содержимое в ZIP и переименовать из .zip в .xpi. Или вот такой незамысловатой командой, находясь в директории с файлами расширения (при условии наличия консольного zip’a):

В чем же цимес подобного расширения? А в том, что оно обладает практически неограниченным доступом к компьютеру пользователя, и если в моем примере ведется примитивный перехват POST-запросов, то теоретически расширение может включать в себя все что угодно, даже нативный код. В то же время антивирусные системы практически не контролируют операции с директорией %APPDATA%, где Firefox хранит пользовательские настройки и расширения, что позволяет в тихую добавить его в браузер (например, отредактировав файл extensions.sqlite) и получить хороший такой, неконтролируемый доступ в сеть.

sqlite-300x115.png

Топорно? Зато эффективно. Тем более такую закладку можно добавить в действительно полезное расширение или в какое-нибудь существующее, а далее попытаться распространять его через официальный сайт. Простор для творчества очень широк, как и целевая аудитория.

В общем изучайте, исследуйте, и на вас снизойдет дзен, а ещё вы научитесь танцевать как dx.

Все файлы одним архивом: скачать

1. LastPass

LastPass запоминает и хранит все пароли пользователя в зашифрованном облачном сейфе, а также автоматически вводит их при входе в учётные записи. Пользователю нужно помнить только один пароль — для доступа к хранилищу. Менеджер LastPass доступен на всех основных платформах и синхронизирует пароли между разными браузерами и устройствами.

LastPass Password Managerот LastPass Разработчик: Разработчик Цена: Бесплатно

2. Dark Reader

С помощью этого расширения вы сможете переводить браузер в ночной режим нажатием одной кнопки. По умолчанию Dark Reader заменяет светлый фон открытых сайтов тёмным, что снижает нагрузку на зрение при работе в темноте. При желании можно настроить изменения вручную: отрегулировать яркость, контрастность и прочие параметры. Dark Reader также позволяет включать ночной режим только для выбранных сайтов.

Dark Readerот Alexander Shutau Разработчик: Разработчик Цена: Бесплатно

3. uBlock Origin

Один из самых популярных блокировщиков рекламы. Это расширение автоматически скрывает все навязчивые баннеры, которые отвлекают от просмотра веб-страниц. Кроме того, uBlock Origin блокирует скрипты различных сервисов, отслеживающие ваши действия в Сети. По заверениям разработчиков, их продукт отличается от конкурентов минимальной нагрузкой на процессор и память компьютера.

uBlock Originот Raymond Hill Разработчик: Разработчик Цена: Бесплатно

4. Awesome Screenshot Plus

Очень простой и удобный инструмент для создания скриншотов. С его помощью можно быстро cделать снимок выбранного фрагмента, видимой области или всей открытой в браузере страницы. Создав новый скриншот, вы сразу же сможете добавить на него текст, нанести пометки или обрезать изображение до нужного размера.

Awesome Screenshot Plus — Capture, Annotate & Moreот Diigo Inc. Разработчик: Разработчик Цена: Бесплатно

5. Momentum

Momentum заменяет содержимое новой вкладки минималистичным экраном со списком дел, прогнозом погоды и вдохновляющими цитатами. Вы можете добавить к этим элементам блок с самыми необходимыми ссылками. На фоне периодически будут сменяться отобранные разработчиком красивые заставки. Такой экран помогает фокусироваться на текущих задачах и мотивирует их выполнять.

Momentumот Momentum Dashboard Разработчик: Разработчик Цена: Бесплатно

6. Browsec VPN

Если вам надоели блокировки интернет-ресурсов, Browsec поможет их обойти. Управлять расширением легко: нажимаете на кнопку «Включить», выбираете VPN-сервер и получаете бесплатный доступ к нужным сайтам. Что очень удобно, Browsec умеет автоматически включать VPN только для выбранных ресурсов.

Кроме того, расширение обходит многих конкурентов в плане скорости соединения. Если же вам она всё равно покажется недостаточной, можете повысить её за деньги — от 3,33 доллара в месяц.

Browsec VPNот Browsec LLC Разработчик: Разработчик Цена: Бесплатно

7. ImTranslator

С помощью этого расширения вы сможете быстро переводить текст на веб-страницах. Достаточно выделить нужный фрагмент и кликнуть по всплывающей иконке. После этого прямо на текущей вкладке откроется окно с переводом выделенного текста. ImTranslator использует технологии перевода Google и Bing, а также свою собственную. Вы можете быстро переключаться между ними в окне расширения.

Переводчик Google, ImTranslator, Словарьот Smart Link Corporation Разработчик: Разработчик Цена: Бесплатно

8. Video DownloadHelper

Video DownloadHelper позволяет быстро скачивать видео с YouTube, «ВКонтакте», Vimeo, Facebook и многих других площадок. Для полноценной работы расширение попросит вас загрузить и установить дополнительную утилиту. Но она бесплатная и занимает всего 1,5 МБ. Зато после этого вы сможете сохранять на компьютер понравившиеся ролики в пару кликов.

Video DownloadHelperот mig Разработчик: Разработчик Цена: Бесплатно

9. Tree Style Tab

Если вы работаете с большим количеством вкладок, то знаете, как это бывает неудобно: названия сайтов перестают помещаться на экране, и приходится кликать наугад в поисках нужной вкладки. В таком случае Tree Style Tab может серьёзно облегчить вашу работу. Это расширение отображает древовидную структуру вкладок на вертикальной панели. Такой вид более удобный и наглядный.

Tree Style Tab (Древовидный стиль вкладок)от Piro (piro_or) Разработчик: Разработчик Цена: Бесплатно

10. VK Music

VK Music скачивает музыку из «ВКонтакте», «Одноклассников» и «Яндекс.Музыки». После установки расширения рядом с песнями на этих сайтах будет отображаться значок загрузки. Достаточно нажать по нему — и VK Music скачает аудиофайл на компьютер.

VK Music — скачать музыку ВКот Danys Christinson Разработчик: Разработчик Цена: Бесплатно

Читайте также

Используемые источники:

  • https://coddism.com/programming/napisanie_rasshirenija_pod_firefox
  • https://kaimi.io/2012/06/simple-firefox-extension/
  • https://lifehacker.ru/rasshireniya-dlya-firefox/

Рейтинг автора
5
Подборку подготовил
Максим Уваров
Наш эксперт
Написано статей
171
Ссылка на основную публикацию
Похожие публикации