Как написать расширение для firefox

Ваше первое расширение

Примечание: Если вы уже знакомы с основными понятиями о браузерных расширениях, то можете пропустить этот раздел и узнать как собираются файлы расширений. Также вы можете использовать справочную документацию чтобы начать создавать свои расширения. Посетите Мастер-класс по расширениям Firefox чтобы узнать больше о тестировании и публикации расширений для Firefox

В этой статье мы пройдём весь путь создания расширения для Firefox от начала и до конца. Это расширение будет просто добавлять красную рамку ко всем страницам, загруженным с mozilla.org или любого из его поддоменов.

Написание расширения

Создайте новую папку с именем borderify и перейдите в неё. Вы можете сделать это с помощью Проводника вашего компьютера или терминала командной строки (en-US) . Умение работать с терминалом командной строки очень полезно, поскольку оно помогает вести более продвинутую разработку расширений. Используя терминал, создать папку можно следующим образом:

mkdir borderify cd borderify 

manifest.json

Используя удобный текстовый редактор, создайте в папке borderify новый файл с именем manifest.json и таким содержимым:

 "manifest_version": 2, "name": "Borderify", "version": "1.0", "description": "Adds a red border to all webpages matching mozilla.org.", "icons":  "48": "icons/border-48.png" >, "content_scripts": [  "matches": ["*://*.mozilla.org/*"], "js": ["borderify.js"] > ] > 

• Первые три ключа: manifest_version , name и version , являются обязательными и содержат основные метаданные о расширении.
• description не обязателен, но рекомендуется добавлять его: это описание отображается в Управлении дополнениями.
• icons не обязателен, но рекомендуется добавлять его: он позволяет указать значок дополнения, который будет виден в Управлении дополнениями.

Самый интересный ключ здесь — это content_scripts (en-US) , он даёт указание Firefox загружать указанный скрипт на веб-страницах, у которых URL совпадает с заданным шаблоном. В нашем случае, мы просим Firefox загрузить скрипт с названием borderify.js на всех HTTP или HTTPS страницах, полученных с mozilla.org или любого из его поддоменов.

Предупреждение: В некоторых случаях вам нужно указать ID для вашего дополнения. Если это необходимо, то добавьте ключ browser_specific_settings (en-US) в файл manifest.json и установите свойство gecko.id :

"browser_specific_settings":  "gecko":  "id": "borderify@example.com" > > 

icons/border-48.png

Если у расширения есть значок, то он будет отображаться в списке расширений Управления дополнениями. Наш файл manifest.json сообщает, что значок находится в файле icons/border-48.png .

Создайте папку icons внутри borderify и поместите в неё файл значка с именем border-48.png . Вы можете использовать значок из нашего примера, который взят из набора Google Material Design и используется по лицензии Creative Commons Attribution-ShareAlike.

Вы можете использовать собственный значок. Его размер должен быть 48×48 пикселей или 96×96 пикселей для отображения на мониторах с высоким разрешением. В этом случае необходимо указать его в качестве свойства 96 объекта icons в файле manifest.json :

"icons":  "48": "icons/border-48.png", "96": "icons/border-96.png" > 

Также можно использовать файл в формате SVG, и он будет правильно масштабироваться. Но нужно иметь в виду, что если вы используете SVG и ваш значок содержит текст, то возможно стоит воспользоваться инструментом «преобразовать в контур» в редакторе SVG, чтобы текст масштабировался корректно.

borderify.js

Наконец, создайте в папке borderify файл с именем borderify.js с таким содержимым:

.body.style.border = "5px solid red"; 

Этот скрипт будет встраиваться в страницы, адрес которых совпадает с шаблоном, указанном в ключе content_scripts файла manifest.json . Этот скрипт имеет прямой доступ ко всему документу, как если бы он был загружен самой страницей.

Пробуем

Сначала внимательно проверьте, что вы правильно разместили файлы и дали им правильные имена:

borderify/ icons/ border-48.png borderify.js manifest.json

Установка

В Firefox: откройте страницу about:debugging, кликните Этот Firefox , далее нажмите на кнопку Загрузить временное дополнение. и выберите любой файл из папки с нашим примером.

Расширение будет установлено и остается установленным до перезапуска Firefox.

Также можно запустить расширение с помощью командной строки используя утилиту web-ext.

Тестирование

Примечание: По умолчанию расширения не работают в режиме приватного просмотра. Если вы хотите протестировать расширение в режиме приватного просмотра, то откройте about:addons , выберите расширение и установите переключатель Запуск в приватных окнах в положение Разрешить .

Теперь перейдите на любую страницу » https://www.mozilla.org/ru/ » и вы должны будете увидеть красную границу вокруг страницы.

Примечание: Не проверяйте на addons.mozilla.org ! Встраиваемые скрипты на данный момент запрещены на этом поддомене.

Попробуйте немного поэкспериментировать. Измените цвет границы или сделайте что-нибудь ещё с содержимым страницы. Для этого внесите изменения в скрипт и перезагрузите файлы расширения, нажав кнопку Обновить в about:debugging . Сразу после этого изменения станут видны.

Упаковка и публикация

Чтобы другие люди могли использовать ваше дополнение, необходимо запаковать его и отправить в Mozilla для добавления подписи. Узнать больше об этом можно в разделе «Publish» Мастер-класса по расширениям Firefox.

Что дальше?

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

• создать более сложное расширение,
• узнать больше о внутреннем устройстве расширений,
• посмотреть примеры расширений,
• узнать, что необходимо для разработки, тестирования и публикации расширений (en-US).

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 11 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Пишем своё расширение для браузера 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:

const tabs = require("tabs"); exports.main = function (options) < tabs.on("ready", function(tab)< tab.attach(< contentScript: "document.addEventListener('click', function(e) < \ var target = e.target; \ if(target.tagName == 'A') < \ var mail_to = target.href.match(/^mailto:(.*)/i); \ if(mail_to != null) < \ e.preventDefault(); \ var form = document.createElement('form'); \ form.setAttribute('action','http://mail.yandex.ru/neo2/#compose/mailto=' + mail_to[1]); \ form.setAttribute('target','_blank'); \ document.getElementsByTagName('body')[0].appendChild(form); \ form.submit(); \ form.parentNode.removeChild(form); \ >\ > \ >, false);" >); >); > 

Что же за магия происходит в этом коде?

Первым делом подключается модуль tabs.
В данном случае он служит для того, чтобы можно было добавлять свой JavaScript код в страницу браузера.
Т.е. что у нас: при событии документа onready происходит добавление любого JavaScript кода в тело документа. В данном примере добавляется обработчик ссылок, у которых адрес начинается с mailto.

Ладно, давайте что-нибудь посложнее сделаем. Добавим-ка свою кнопку в верхний бар!
Опять же, не будем строить велосипеды, а с чистой совестью возьмем уже готовую библиотеку Toolbar Button Complete.

• универсальный, но более легкий (с помощью стилей)
• не слишком универсальный, но не такой простой, как первый (с помощью canvas)

Методом тыка типа:

for(var val in document.getElementById('yandex-menu'))

было обнаружено, что методы в точности совпадают с теми, что мы обычно используем при работе с элементами сайта. Но замечу, что по стандарту браузер не знает, что такое ни document, ни window в расширениях (да и еще есть отличия).

var wuntils = require('sdk/window/utils'); var window = wuntils.getMostRecentBrowserWindow(); var document = window.document; 

Замечу, что разработка билдера не стоит на месте и если раньше способ получения активного окна был таким:

var winUtils = require("window-utils"); for (window in winUtils.windowIterator()) < if ("chrome://browser/content/browser.xul" != window.location) return; console.log("An open window! " + window.location); >

то сейчас всё намного легче (пример я выше привел).

Чтож, немного рассказав о особенностях, вернусь к добавлению счетчика для кнопки.
Умные люди подсказали, что по стандарту стиль поля label у кнопки равен display: none;, поэтому как-то нужно было внедрить свой css код в бар. Решение, как оказалось, не сложное (советую завернуть в файл, который будет инклюдится по мере надобности):

const < Cc, Ci >= require('chrome'); const < when: unload >= require('sdk/system/unload'); var ios = Cc['@mozilla.org/network/io-service;1'].getService(Ci.nsIIOService); /* Helper that registers style sheets and remembers to unregister on unload */ exports.addXULStylesheet = function addXULStylesheet(url) < var uri = newURI(url); var sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService); sss.loadAndRegisterSheet(uri, sss.USER_SHEET); unload(function () < if (sss.sheetRegistered(uri, sss.USER_SHEET)) < sss.unregisterSheet(uri, sss.USER_SHEET); >>); return sss; >; function newURI(uriStr, base) < try < var baseURI = base ? ios.newURI(base, null, null) : null; return ios.newURI(uriStr, null, baseURI); >catch (e) < if (e.result === chrome.Cr.NS_ERROR_MALFORMED_URI) < throw new Error("malformed URI: " + uriStr); >else if (e.result === chrome.Cr.NS_ERROR_FAILURE || e.result === chrome.Cr.NS_ERROR_ILLEGAL_VALUE) < throw new Error("invalid URI: " + uriStr); >> return null; > 

И в функцию exprorts.main добавляем что-то вроде (хотя добавлять можете куда угодно):

stylesheet.addXULStylesheet(data.url("stylesheet.css")); 

не забыв создать в контенте файл stylesheet.css.

У меня файл содержит примерно следующее:

#yandex-mail < min-width: 16px; >#yandex-mail .toolbarbutton-text < float: right !important; display: inline-block !important; font-size: 13px; padding-left:20px; background: url(data:image/png;base64,iVB. OCYII=) no-repeat left center; >#yandex-mail .toolbarbutton-icon

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

Также столкнулся с вопросом загрузки контента с других сайтов и парсинг xml.
С первым быстро разобрался, далеко ходить не надо: Request
А вот со вторым пришлось повозиться.

• XMLHttpRequest — отпал, т.к. выдало ошибку кроссдоменного запроса (может я не так что-то делал?)
• DOMParser — но тут тоже пришлось повозиться

var = require("chrome"); var parser = Cc["@mozilla.org/xmlextras/domparser;1"].createInstance(Ci.nsIDOMParser); var dom = parser.parseFromString(xmlPrepare (text), "application/xml"); 

Вот так создание расширений для 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\ или ~/extensions/my_extension/ ). Внутри этого каталога создайте каталог chrome , в котором создайте каталог content .

В корневом каталоге расширения создайте два пустых текстовых файла с именами chrome.manifest и install.rdf . В итоге должна получиться структура каталогов следующего вида:

\
install.rdf
chrome.manifest
chrome\
content\

Дополнительная информация о настройке окружения находится по этой ссылке.

Сценарий установки

Откройте файл install.rdf и добавьте в него следующий текст:

• 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.

 "manifest_version": 2, "name": "modify-page", "version": "1.0", "content_scripts": [  "matches": ["https://developer.mozilla.org/*"], "js": ["page-eater.js"] > ] > 

.body.textContent = ""; var header = document.createElement("h1"); header.textContent = "Эта страница была съедена"; document.body.appendChild(header); 

 "manifest_version": 2, "name": "modify-page", "version": "1.0", "permissions": ["activeTab", "contextMenus"], "background":  "scripts": ["background.js"] > > 

.contextMenus.create( id: "eat-page", title: "Съесть эту страницу", >); browser.contextMenus.onClicked.addListener(function (info, tab)  if (info.menuItemId == "eat-page")  browser.tabs.executeScript( file: "page-eater.js", >); > >); 

modify-page/ background.js manifest.json page-eater.js

.contextMenus.create( id: "eat-page", title: "Съесть эту страницу", >); function messageTab(tabs)  browser.tabs.sendMessage(tabs[0].id,  replacement: "Message from the extension!", >); > browser.contextMenus.onClicked.addListener(function (info, tab)  if (info.menuItemId == "eat-page")  browser.tabs.executeScript( file: "page-eater.js", >); var querying = browser.tabs.query( active: true, currentWindow: true, >); querying.then(messageTab); > >); 

function eatPage(request, sender, sendResponse)  document.body.textContent = ""; var header = document.createElement("h1"); header.textContent = request.replacement; document.body.appendChild(header); > browser.runtime.onMessage.addListener(eatPage);