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

Внутреннее устройство расширения

Расширение состоит из набора файлов, упакованных для распространения и установки. В этой статье мы быстро рассмотрим файлы, которые могут присутствовать в расширении.

manifest.json

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

Этот манифест также может содержать указатели на несколько других типов файлов:

• Background pages: Реализует долгоиграющую логику.
• Иконки для расширения и любых кнопок, которые оно может определить.
• Sidebars, popups, and options pages: HTML-документы, которые предоставляют содержимое для различных компонентов пользовательского интерфейса.
• Content scripts: JavaScript сценарии вашего расширения, которые будут исполняться на веб-страницах.
• Web-accessible resources: Делает контент вашего расширения видимым для веб-страниц и скриптов.

Для получения подробной информации см. справочную страницу manifest.json

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

Фоновые скрипты

Расширения часто должны поддерживать долгосрочное состояние или выполнять долгосрочные операции независимо от срока жизни любой конкретной веб-страницы или окна браузера. Для этого нужны фоновые сценарии.

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

Спецификации фоновых скриптов

Вы можете включить фоновый скрипт, используя background ключ в «manifest.json»:

// manifest.json "background":  "scripts": ["background-script.js"] > 

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

Вместо указания несколько фоновых сценариев вы можете указать фоновую страницу, которая так же преимущества поддержки ES6 модулей:

manifest.json:

// manifest.json "background":  "page": "background-page.html" > 

background-page.html:

doctype html> html lang="en"> head> meta charset="utf-8" /> script type="module" src="background-script.js"> script> head> html> 

Окружение фоновых скриптов

DOM APIs

Фоновые скрипты запускаются в пространстве специальной страницы, называемой фоновой. Это даёт им доступ к глобальному window объекту, а так же ко всем его DOM APIs.

WebExtension API

Фоновые скрипты могут использовать любые API расширений, если расширение имеет необходимые разрешения.

Многоцелевой доступ

Фоновые скрипты могут осуществлять XHR запросы к любому домену, если расширение имеет host разрешения.

Web-содержимое

Фоновые скрипты не получают прямого доступа к веб-страницам. Однако они могут загружать скрипты содержимого на веб-страницы и взаимодействовать с этими скриптами с помощью API передачи сообщений.

Политика безопасности содержимого

Фоновые скрипты ограничены в выполнении потенциально опасных операций, таких как eval() , через политику безопасности содержимого. Подробнее см. Content Security Policy.

Боковые панели (sidebar), всплывающие окна (popup), страницы настроек

Ваше расширение может иметь разнообразные компоненты интерфейса, определённые в HTML документах:

• Боковая панель (sidebar) — это панель, отображаемая в окне браузера с левой стороны, рядом с веб-страницей
• Всплывающие окна (popup (en-US)) — диалоговое окно, отображаемое по клику на кнопке на панели инструментов или в адресной строке
• Страница настроек (en-US) открывается, когда пользователь обращается к настройкам расширения на странице менеджера расширений.

Для каждого из этих компонентов вы создаёте HTML файл и помещаете специальную информацию в manifest.json. HTML файл может в себя включать CSS и JavaScript файлы, как и любая web-страница.

Всё это типы веб-страниц расширения, и, в отличие от нормальных веб-страниц, ваш JavaScript может использовать все привелегии WebExtension API, как и ваши фоновые скрипты. Они даже могут получить доступ к переменным в фоновой странице, используя runtime.getBackgroundPage() (en-US) .

Веб-страницы расширения

Вы также можете включить HTML документы в ваше расширение, даже если они не будут включены в какой-либо существующий компонент пользовательского интерфейса. В отличие от документов, которые вы можете предоставить для боковых панелей, всплывающих окон или страниц настроек, эти документы не содержатся в manifest.json. Однако, они также имеют такой же доступ к WebExtension API, как и фоновые скрипты.

Встраиваемые скрипты

Используйте встраиваемые скрипты для доступа и изменения веб-страниц. Встраиваемые скрипты загружаются в веб-страницу и исполняются в контексте данной конкретной страницы.

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

Встраиваемые скрипты имеют доступ и могут манипулировать DOM, как и обычные скрипты, загруженные веб-страницей.

В отличие от обычных скриптов, они могут:

• Осуществлять XHR запросы.
• Использовать часть API расширений.
• Обмениваться сообщениями с их фоновыми скриптами и таким образом иметь доступ ко всему WebExtension API.

Встраиваемые скрипты не могут напрямую взаимодействовать с обычными скриптами на странице, но они могут обмениваться сообщениями с помощью стандартного window.postMessage() API.

Обычно, когда мы говорим о встраиваемых скриптах, мы отсылаемся к JavaScript, но вы так же можете внедрить CSS в веб-страницы, используя этот же механизм.

Веб-доступные ресурсы

Веб-доступные ресурсы — это ресурсы вроде изображений, HTML, CSS и JavaScript, которые вы включаете в расширение и хотите сделать доступными для встраиваемых скриптов и оригинальных скриптов веб-страницы. Такие ресурсы могут быть доступны скриптам через специальную URI схему.

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

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.

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

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

Создание расширения 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.

- chromium-lorpic --- 128-icon.png --- 32-icon.png --- 64-icon.png --- app.js --- manifest.json --- style.css 

< "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" ] >] > 

(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(); >>)(); 

a img.lorpic