Ваш первый WebExtension
В этой статье мы пройдём весь путь создания WebExtension для Firefox, от начала и до конца. Это дополнение будет просто добавлять красную рамку ко всем страницам, загруженным с «mozilla.org» или любого из его поддоменов.
Для начала вам нужен Firefox 45 или более поздней версии.
Написание WebExtension
Создайте новую директорию (папку) и перейдите в неё:
mkdir borderify cd borderify
manifest.json
Теперь создайте новый файл, назовите его «manifest.json» в папке «borderify». Вставьте туда следующий код:
"manifest_version": 2, "name": "Borderify", "version": "1.0", "description": "Adds a solid red border to all webpages matching mozilla.org.", "icons": "48": "icons/border-48.png" >, "applications": "gecko": "id": "borderify@mozilla.org", "strict_min_version": "45.0" > >, "content_scripts": [ "matches": ["*://*.mozilla.org/*"], "js": ["borderify.js"] > ] >
- Первые три ключа: manifest_version , name и version , являются обязательными и содержат основные метаданные о дополнении.
- description не обязателен, но рекомендуется: это описание отображается в Менеджере Дополнений.
- icons не обязателен, но рекомендуется: позволяет указать значок для дополнения, который будет виден в Менеджере Дополнений.
- applications является обязательным для Firefox, и определяет ID дополнения. Он так же может использоваться для указания минимальной и максимальной версии Firefox, поддерживаемой расширением.
Самый интересный ключ здесь — это content_scripts , который говорит Firefox загружать скрипт на Web страницах, чей URL совпадает с заданным шаблоном. В нашем случае, мы просим Firefox загрузить скрипт с названием «borderify.js» на всех HTTP или HTTPS страницах, полученных с «mozilla.org» или любого из его поддоменов.
- Узнать больше content scripts.
- Узнать больше о match patterns.
Предупреждение: В некоторых случаях вам нужно указать ID для вашего дополнения. Если вам нужно указать ID дополнения включите ключ applications в manifest.json и установите его свойство gecko.id :
"applications": "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 и она будет корректно масштабироваться.
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 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» и выполните следующую команду:
zip -r ../borderify.xpi *
Начиная с Firefox 43 все дополнения должны быть подписаны прежде чем они будут установлены в браузер. Вы можете снять это ограничение только в Firefox Developer Edition или Firefox Nightly при помощи следующих шагов:
- перейдите на страницу about:config в Firefox
- при помощи строки поиска найдите xpinstall.signatures.required
- дважды кликнув на этом свойстве или при помощи локального меню (через клик правой кнопкой мыши), выберите «Toggle», чтобы установить значение false .
- Узнать больше об упаковке и инсталляции
- Узнать больше о подписи и распространении (en-US)
Что дальше?
Теперь, когда вы имеете представление о разработке дополнений для Firefox, вы можете:
- Прочитать больше об анатомии WebExtensions
- Создать более сложное WebExtensions
- Прочитать больше об API JavaScript, доступном для WebExtensions
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 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как создать расширение для Mozilla Firefox
В качестве пролога стоит уточнить, что мы называем расширением браузера, и упомянуть, какими базовыми познаниями необходимо обладать для создания данного типа дополнений.
Расширение — это программа, встраиваемая в обозреватель с целью увеличения его возможностей и достигающая этой цели посредством функционала самого браузера, заранее реализованного разработчиками. Для написания этой программы используется интерпретируемый язык программирования javascript, широко используемый в сфере веб-разработки. Поэтому, если вы не владеете этим языком или даже основами процедурного и объектно-ориентированного программирования, к созданию расширений приступать еще рано. Но не стоит расстраиваться, допустим, если вам необходимо создание crm системы с нуля, вы всегда можете обратиться за помощью к профессионалам. Иначе, приступим к делу.
С чего начать создавать расширение?
Для начала загрузите и установите всё необходимое программное обеспечение, а именно:
Python версии 2.5, 2.6 или 2.7 и Firefox Add-on SDK.
Python можно взять с официального сайта языка ( https://www.python.org/downloads/). Конкретно нам он не понадобится, однако его требует SDK. Она же, в свою очередь, будет использоваться именно для разработки и создания расширений.
Add-on SDK берем прямо с сайта Mozilla Firefox ( https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation). Там смотрим в разделе «Prerequisites» ссылку с именем «zip file». Все нужное обеспечение абсолютно бесплатно.
Установка Python требует, по сути, монотонного нажатия кнопки «Далее». С Add-on SDK все чуточку сложнее. Во-первых, поместите распакованный пакет разработки в удобное для вас место. Во-вторых, откройте интерпретатор командной строки (cmd) и перейдите в каталог. bin директории SDK командой CD. Далее, введите в консоль команду activate, а после стены мерцающего текста —cfx. Вы увидите изменившееся приглашение интерпретатора, выглядящее приблизительно так: (C:\addon-sdk) C:\addon-sdk\bin>. Теперь среда разработки полностью готова.
Создайте папку для вашего первого проекта и перейдите в нее из консоли. Как вы, наверное, догадались, это будет программа «Hello World!». Введите команду cfx init. Она, согласно своему шаблону, сформирует нужные для расширения каталоги: data, lib и test. Также будет создан файл package.json, содержащий ID, имя и заглавие расширения, версию релиза и другую информацию, связанную с его установкой и созданием. Теперь оставим ненадолго консоль и откроем для редактирования файл main.js, располагающийся в каталоге lib, предпочтительным текстовым редактором.
Популярные текстовые редакторы: Sublime Text и Notepad++.
Это главный файл программы, содержащий скрипт расширения, также называемый add-on script, который и будет интерпретироваться.
Всё нами задуманное исполняется следующим кодом:
var mainbutton = require(«sdk/ui/button/action»).ActionButton
label : «Click me!»,
Введите его в main.js и сохраните файл. Здесь создается кнопка — объект ActionButton — с идентификатором mainbutton, высвечивающейся при наведении надписью Click me!, иконкой icon16.png и обработчиком нажатия кнопки. Единственная строка функции обработчика внедряет скрипт, также называемый content script, в активную на данный момент вкладку браузера. Инструкция require запрашивает у SDK необходимые для выгрузки данные.
Для завершения создания расширения поместите любую иконку размера 16×16 пикселей в каталог data и вернитесь к консоли. Введите команду cfx run , чтобы проверить работоспособность программы и убедиться в отсутствии ошибок. После ввода появится окно Firefox. Кнопочка с вашей иконкой будет расположена (по умолчанию) в правом верхнем углу браузера. Когда вы убедитесь, что все работает безошибочно, закройте окно браузера и снова перейдите к консоли для завершающей стадии создания расширения. Введите команду cfx xpi, которая сформирует файл формата .xpi. Перетащите его на вкладку дополнений обозревателя и разрешите установку. Можете себя поздравить, вы только что создали свое первое расширение для браузера Firefox!
Теперь, когда вы имеете фундаментальные познания в разработке расширений, остается лишь штудировать материалы Mozilla Foundation, совершенствовать свое мастерство и пополнять коллекцию дополнений любимого браузера. Удачи!
LORPic: Пишем плагин для браузеров Mozilla Firefox и Chrome/Chromium
Сегодня мы с вами постараемся написать маленький, но очень полезный плагин расширяющий возможности любителей юмористически-сатирической и даже немного технической площадки линуксоидов — форума linux.org.ru.
Плагин будет представлять из себя расширение для браузеров Mozilla Firefox и Chrome/Chromium, позволяющее отображать изображения непосредственно на страницах ресурса.
Дико извиняюсь за нехватку времени и неполноценный материал (пишу на «скорую руку», завтра может не быть времени) расширение в данном виде скорее «детское», поэтому будет без «фишечек» (хотелось добавить зум и прочее по клику, пока так — по клику открытие изображения на новой вкладке).
Без лирики… Поехали…
КАРТИНКИ ДЛЯ ТЕСТА
УСТАНОВКА
git clone https://git.lnx4.ru/lnx4/lorpic
В браузере перейти в настройки, далее — расширения, включить режим разработчика (для chromium, в firefox выбрать: «установить дополнение из файла») и загрузить каталог с расширением (для firefox — выбрать файл manifest.json).
Расширение работает на всех страницах форума (за исключением трекера и т. п., о чем подробнее расскажу дальше). Требуется прямая ссылка на файл изображения. Ссылка не должна отдавать html код, а должна содержать изображение с расширением jpg , jpeg или png в URL.
Подобную загрузку можно осуществить используя бесплатный сервис https://0x0.st .
Пример использования: curl -F’file=@yourfile.png’ https://0x0.st
Ответом запроса станет результирующая ссылка на изображение.
КАК ПИСАТЬ РАСШИРЕНИЯ ДЛЯ БРАУЗЕРОВ?
На это примере разберем, что именно представляет из себя плагин (расширение, WebExtensions) для браузеров. В данном случае, код практически кросс-платформенный, подходит как для Mozilla Firefox, так и для Chrome/Chromium.
Структура каталога следующая:
- chromium-lorpic --- 128-icon.png --- 32-icon.png --- 64-icon.png --- app.js --- manifest.json --- style.css Отличие заключается только в номере версии файла манифеста manifest.json : для firefox следует указывать версию 2, а для Chrome/Chromium — 3. Можно указать везде версию 2, но тогда Chromium будет жаловаться на deprecated (поддержка версии 2 заканчивается 2023 году).
Основную ценность для нас представляют файлы manifest.json , app.js и style.css . Разберем их по порядку.
manifest.json
В файле манифеста расположены основные настройки
< "manifest_version": 3, "name": "LORPic", "version": "1.0", "description": "Плагин отображения картинок для LOR", "icons": < "32": "32-icon.png", "64": "64-icon.png", "128": "128-icon.png" >, "content_scripts": [ < "matches": [ "*://*.linux.org.ru/gallery/*/*", "*://*.linux.org.ru/articles/*/*", "*://*.linux.org.ru/news/*/*", "*://*.linux.org.ru/forum/*/*" ], "js": [ "app.js" ], "css": [ "style.css" ] >] > Раздел matches содержит регулярные выражения, тех страниц, на которых будет работать плагин. Символ звездочки означает любое выражение или его отсутствие. Таким образом, плагин будет работать на всех поддоменах и основном домене в указанных нами разделах сайта.
app.js
(function() < // Code Here const formats = ['jpeg', 'jpg', 'png']; let links = document.querySelectorAll('a[href]:not([itemprop])'); links.forEach(function(link)< let url = link.getAttribute('href'); let ext = _getUrlExt(url); if(formats.includes(ext))< let content = link.textContent; if(content != 'Просмотр')< let image = document.createElement("img"); image.setAttribute('class', 'lorpic'); image.setAttribute('src', url); //link.replaceWith(image); link.innerHTML = ""; link.appendChild(image); link.setAttribute('target', '_blank'); >> >); function _getUrlExt(url) < return url.split('.').pop(); >>)(); Здесь все просто и банально. В константной переменной formats указываем массив, по которому будем сверять расширения изображения, получаемых из ссылок на страницах сайта.
В цикле проходимся по всем ссылкам доступным на странице, и если ссылка содержит префикс (для получения используется функция _getUrlExt) из массива — тогда обрабатываем. Создаем элемент изображения и вставляем его как дочерний элемент ссылки, попутно удаляя содержимое. Так же присваиваем необходимые атрибуты. Чтобы не обрабатывались ссылки на изображения находящиеся внизу текста в разделе «Галерея» — используем условие content != ‘Просмотр’
style.css
a img.lorpic
Не менее просто. Каскадные стили. В предыдущем коде мы присвоили ссылкам с изображениями атрибут class=»lorpic» , теперь делаем изображения блочным элементом, т.к. ссылки могут быть в середине текста, а картинка должна отображаться с переносами.
Свойством max-width задаем максимальную ширину изображения относительно родительского элемента страницы. 33% на мой взгляд оптимальный вариант. По клику — картинка открывается в полном разрешении в соседней вкладке, за что отвечает атрибут target=»_blank» добавленный скриптом на предыдущем шаге.
UPD1. Предлагаю указать ресурс https://0x0.st в правилах разметки форума.
UPD2. У меня нет аккаунтов разработчика под Mozilla Firefox, Chrome/Chromium, но если зайдет, не только в образовательных целях, и найдется человек готовый опубликовать расширение, — буду только рад. Со своей стороны могу пообещать доработать до нормального состояния.
Пишем своё расширение для браузера 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, пока находится на проверке. Исходники, в них много чего полезного.
Если кому-нибудь не понравится, что использую «их» картинки, бренд или т.п. — пишите.