Как сделать расширение для браузера firefox

Обновлено: 18.05.2024

Признайте, что вы всегда хотели знать, как разработать расширение для Firefox, но у вас никогда не было времени на обучение Здесь я проведу вас до конца, и в конце статьи мы создадим полнофункциональное расширение для Firefox!

Наша цель

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

Что вам нужно — настройка среды разработки

Сначала давайте начнем с настройки среды разработки. Вам нужен Firefox (да) и в основном любой редактор кода, который вы предпочитаете. Затем, есть несколько рекомендуемых вещей для подготовки Firefox:

Создайте другой профиль разработки

Первым шагом является создание другого профиля в Firefox, так как вы сделаете некоторые настройки и изменения, которые вы, вероятно, не хотите использовать в своем обычном профиле. В моем случае я создал новый профиль разработки под названием «dev». Шаги, чтобы сделать это:

Диспетчер профилей в Windows

Откройте меню «Пуск» и выберите «Выполнить» (в Vista его может и не быть — просто нажмите Windows key + R в этом случае). В диалоговом окне запуска напишите firefox -P и нажмите enter / нажмите OK. Выберите Create Profile в диалоговом окне и следуйте инструкциям.

Менеджер профилей на Mac

Откройте терминал (находится в папке / Applications / Utilities) и введите /Applications/Firefox.app/Contents/MacOS/firefox -profilemanager . Выберите Create Profile в диалоговом окне и следуйте инструкциям.

Менеджер профилей в Linux

Настройки конфигурации для Firefox

Откройте Firefox с помощью диспетчера профилей (процесс, описанный выше, или установите профиль разработки по умолчанию во время разработки расширений). Затем введите about:config в адресной строке. Он предупредит вас об изменении настроек, но это нормально, так как вы будете делать только незначительные изменения для разработки. Вы можете отфильтровать существующие настройки, и если какие-либо из приведенных ниже настроек не существуют, вы можете просто создать их.

Дополнительные настройки

Это не обязательно, но они могут помочь вам. Лично я этим не пользуюсь.

javascript.options.strict = true
extensions.logging.enabled = true

Укажите ваш каталог расширений Firefox на ваше расширение

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

Найдите каталог своего профиля

В каталоге профилей вы найдете все настройки для ваших профилей Firefox, включая информацию о расширениях.

Найти каталог профиля в Windows

В Windows 2000 и XP откройте проводник и перейдите C:\Documents and Settings\[your user name]\Application Data\Mozilla\Firefox\Profiles в Vista и перейдите в C:\Users\[your user name]\AppData\Roaming .

Найти каталог профиля на Mac

Откройте Терминал и введите CD

/Library/Application\ Support/Firefox/profiles/ . Там вы найдете свои профили Firefox, и они будут названы буквами и цифрами, за которыми следует точка (.), А затем имя вашего профиля, например 12a3bc4d.dev .

Найти каталог профиля в Linux

Откройте терминал и введите CD

/.mozilla/ . В этом месте вы найдете все свои профили Firefox, и они будут названы буквами и цифрами, за которыми будет точка (.), А затем имя вашего профиля, например 12a3bc4d.dev .

Указывая на расширение

В папке вашего профиля разработки вы найдете папку с именем extensions . В нем у вас будет код для всех установленных расширений. Вместо того чтобы размещать там свой код, вы можете создать файл указателя. Сделайте это, создав файл с уникальным именем для вас (это должно быть то же самое, что вы выбрали для своего em:id значения в вашем install.rdf файле — подробнее об этом ниже).

Создание структуры папок и файлов

Чтобы создать хорошую основу для разработки расширений, необходимо создать структуру кода расширения. Начните с создания этой иерархии:

я nstall.rdf

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

В Description узле

em:id
Здесь вы можете добавить свой уникальный идентификатор разработчика по своему выбору. Обратите внимание, что это должен быть файл указателя, который вы создали выше.
em:name
Название вашего расширения.
em:version
Текущая версия вашего расширения.
em:type
Тип объявляет, что это расширение, в отличие, например, от темы.
em:creator
Ну вы!
em:description
Описывает вашу функциональность расширения. Будет отображаться в окне «Инструменты»> «Дополнения».
em:homepageURL URL веб — сайта вашего расширения.
em:optionsURL URL , где вы будете иметь свой файл для редактирования опций / предпочтений.

В Description/em:targetApplication узле

em:id
Это значение является фактическим идентификатором Firefox. Измените это, если вы хотите разрабатывать для Thunderbird или что-то еще.
em:minVersion
Минимальная версия Firefox, необходимая для запуска расширения.
Допустимые версии приложения .
em:maxVersion
Максимальная версия Firefox, необходимая для запуска расширения.
Допустимые версии приложения .

Подробнее о дополнительных параметрах читайте в разделе «Установочные манифесты» .

c hrome.manifest

Хром Firefox — это все вокруг окна контента. т. е. панель инструментов веб-браузера, меню, строка состояния и т. д. Следующий файл для нашего расширения, который, вероятно, будет неудобно редактировать, — это chrome.mainfest файл. Это, однако, связано с install.rdf ключом к тому, как ваше расширение будет добавлено в Firefox и как оно будет работать. Наш chrome.manifest файл выглядит так:

Итак, что же это за варианты? Давайте пройдемся по ним:

content linktargetfinder chrome/content/
Путь к тому, где будут найдены ваши файлы содержимого расширения.
content linktargetfinder chrome/content/ contentaccessible=yes
То же, что и выше, но когда
contentaccessible=yes он добавлен, он позволяет Firefox 3 и более поздним версиям получать доступ к файлам расширения и отображать их в веб-браузере (как на веб-странице). Нашел эту отличную помощь через
веб-страницы, доступ к chrome: // запрещен .
overlay chrome://browser/content/browser.xul chrome://linktargetfinder/content/browser.xul
Путь к файлу, который вы будете использовать для переопределения элементов веб-браузера и добавления элементов на панель инструментов, в меню и строку состояния.
locale linktargetfinder en-US locale/en-US/
Используется для локализации контента.
skin linktargetfinder classic/1.0 skin/
Кожа ссылка.
style chrome://global/content/customizeToolbar.xul chrome://linktargetfinder/skin/skin.css
Наложения стилей для хромированных страниц.

Более подробную информацию можно найти в Chrome Manifest .

папка c hrome

Хорошо, как только обязательные части убраны, теперь вещи начинают становиться интересными. Это также когда мы начинаем смотреть на XUL, что означает XML User Interface Language. Он разработан Mozilla для создания интерфейсов в Firefox, Thunderbird и т. Д.

В данной статье представлена пошаговая инструкция по разработке простейшего расширения для FireFox.
Это частичный перевод оригинальной статьи.

Вступление

Это руководство — пошаговая инструкция по созданию простейшего расширения. Мы попробуем добавить в строку состояния еще одну небольшую панельку с фразой «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 . В итоге должна получиться структура каталогов следующего вида:

<ext path>\
install.rdf
chrome.manifest
chrome\
content\

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

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

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

Расширениям, созданным для работы с Firefox 2.0.0.x, нужно указать в качестве максимальной версию «2.0.0.*». Для расширений, созданных для работы с Firefox 1.5.0.x — «1.5.0.*».

Список обязательных и опциональных параметров сценария установки можно посмотреть тут.

Расширение браузера с использованием XUL

Пользовательский интерфейс Firefox написан с использованием XUL и JavaScript. XUL — это подвид XML, позволяющий создавать элементы пользовательского интерфейса, такие как кнопки, меню, панели управления, деревья и т.п. Все действия пользователя обрабатываются с помощью JavaScript.

Чтобы «расширить» браузер, мы изменяем отдельные части интерфейса пользователя Firefox, добавляя или модифицируя виджеты (элементы управления). Мы добавляем виджеты путем добавления новых XUL DOM-элементов в окно браузера и управляем их поведением с помощью скриптов и обработки событий.

Интерфейс браузера определен в файле browser.xul ( $FIREFOX_INSTALL_DIR/chrome/browser.jar содержит content/browser/browser.xul ) В browser.xul мы можем найти описание строки состояния, которое выглядит приблизительно так:

< statusbar id ="status-bar" >
. < statusbarpanel > .
</ statusbar >

<statusbar > — это «связующая точка» XUL-слоя.

XUL-слои

XUL-слои — это способ добавления виджетов в XUL-документ. XUL-слой — это .xul-файл, который определяет XUL-фрагменты, описывающие связующие точки в «основном» документе. Эти фрагменты могут указывать на виджеты, которые будут добавлены, удалены или изменены.

Пример документа XUL-слоя

<? xml version ="1.0" ? >
< overlay id ="sample"
xmlns ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
< statusbar id ="status-bar" >
< statusbarpanel id ="my-panel" label ="Hello, World" />
</ statusbar >
</ overlay >

Тег <statusbar> с id, равным « status-bar » указывает на виджет браузера в который мы хотим добавить наш элемент.

Тег <statusbarpanel> — это новый виджет, который мы хотим добавить.

Сохраните этот код в файле sample.xul каталога chrome/content .

Chrome URIs

XUL-файлы – это часть т.н. «Chrome Packages» — пакетов элементов пользовательского интерфейса, загружаемых через URI вида chrome:// . Вместо того, чтобы загружать интерфейс, используя URI вида file:// (тем более, расположение Firefox может быть различным в зависимости от платформы и систем), разработчики Mozilla пришли к решению создать новый вид URI, используя который все установленные приложения будут иметь доступ к содержимому XUL.

URI для окна браузера – это chrome://browser/content/browser.xul . Попробуйте ввести этот URL в адресной строке Firefox.

Chrome URI состоит из нескольких частей:

1-я — протокол ( chrome ), которая сообщает сетевой библиотеке Firefox, что это Chrome URI.
2-я — название пакета (в данном примере, browser ), который указывает на набор компонентов пользовательского интерфейса. Для вашего приложения эта часть должна быть уникальной, во избежание конфликтов с другими расширениями.
3-я — тип запрашиваемых данных. Бывает трех типов: content (XUL, JavaScript, XBL связи и другие составляющие пользовательского интерфейса приложения), locale (DTD, файлы .properties, в которых могут быть и другие файлы, содержащие строки локализации пользовательского интерфейса) и skin (CSS и изображения темы).
Последняя часть – путь к загружаемому файлу.

Когда вы загружаете что-либо, оперируя Chrome URI, Firefox использует реестр Chrome (Chrome Registry) для преобразования этого URI в реальный путь к файлу на диске (или в JAR архивах).

Создание Chrome Manifest

Для получения большей информации о Chrome Manifest и всех его свойствах можно обратиться к справочному руководству.

Откройте файл chrome.manifest, который был создан в корневом каталоге вашего расширения. Добавьте следующий код:

тип пакета chrome
название пакета chrome (должно быть написано в нижнем регистре, потому что Firefox/Thunderbird в версии 2 и более ранних не поддерживают названия со смешанным регистром — баг 132183)
размещение файлов пакетов chrome

Обратите внимание, что файлы контента, локализаций и скинов должны находиться внутри каталога content, locale и skin подкаталога chrome соответственно.

Теперь необходимо связать ваш слой с окном браузера. Для этого добавьте следующие строки в файл chrome.manifest :

overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

Эти две строки указывают Firefox’у связать sample.xul и browser.xul во время загрузки browser.xul .

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

Во-первых, мы должны сообщить Firefox о нашем расширении. На стадии разработки для Firefox версии 2 и выше, вы можете указать откуда брать новое расширение, и браузер будет его загружать после каждого перезапуска.

Перейдите в домашний каталог, а после в каталог, содержащий профиль Firefox, с которым вы собираетесь работать (например, Firefox/Profiles/<profile_id>.default/ ).
Перейдите в каталог extensions/ , если его не существует, то создайте.
Создайте текстовый файл и поместите в него полный путь к каталогу с вашим расширением (например, C:\extensions\my_extension\ или

Запустите Firefox. Firefox по текстовой ссылке сам найдет каталог с вашим расширением и установит его. После запуска браузера вы увидите надпись «Hello, World!» в правой части строки состояния.

Вы можете сделать некоторые изменения в .xul-файле, перезапустить Firefox, и сразу же увидите результат.

Создание пакета

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

Запакуйте архиватором zip содержимое каталога с вашим расширением (не сам каталог расширения) и измените расширение архива с .zip на .xpi.

Если вы являетесь счастливым обладателем 'Extension Builder'-а, то он может сам сделать за вас всю грязную работу (Tools -> Extension Developer -> Extension Builder). Просто перейдите в каталог с вашим расширением и нажмите кнопку Build Extension. Это расширение имеет очень много инструментов облегчающих разработку.

Теперь загрузите получившийся .xpi-файл на ваш сервер и удостоверьтесь, что его тип установлен в application/x-xpinstall . После этого можно скачать и установить расширение.

Вступление

Подготовка окружения

Расширения упаковываются и распространяются в виде zip-файлов или пакетов с расширением XPI.

Вот пример типичной внутренней структуры XPI-файла:

/extensions/my_extension/ ). Внутри этого каталога создайте каталог chrome , в котором создайте каталог content .

<ext path>\
install.rdf
chrome.manifest
chrome\
content\

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

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

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

Список обязательных и опциональных параметров сценария установки можно посмотреть тут.

Расширение браузера с использованием XUL

< statusbar id ="status-bar" >
. < statusbarpanel > .
</ statusbar >

<statusbar > — это «связующая точка» XUL-слоя.

XUL-слои

Пример документа XUL-слоя

<? xml version ="1.0" ? >
< overlay id ="sample"
xmlns ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
< statusbar id ="status-bar" >
< statusbarpanel id ="my-panel" label ="Hello, World" />
</ statusbar >
</ overlay >

Тег <statusbar> с id, равным « status-bar » указывает на виджет браузера в который мы хотим добавить наш элемент.

Тег <statusbarpanel> — это новый виджет, который мы хотим добавить.

Сохраните этот код в файле sample.xul каталога chrome/content .

Chrome URIs

URI для окна браузера – это chrome://browser/content/browser.xul . Попробуйте ввести этот URL в адресной строке Firefox.

Chrome URI состоит из нескольких частей:

1-я — протокол ( chrome ), которая сообщает сетевой библиотеке Firefox, что это Chrome URI.
2-я — название пакета (в данном примере, browser ), который указывает на набор компонентов пользовательского интерфейса. Для вашего приложения эта часть должна быть уникальной, во избежание конфликтов с другими расширениями.
3-я — тип запрашиваемых данных. Бывает трех типов: content (XUL, JavaScript, XBL связи и другие составляющие пользовательского интерфейса приложения), locale (DTD, файлы .properties, в которых могут быть и другие файлы, содержащие строки локализации пользовательского интерфейса) и skin (CSS и изображения темы).
Последняя часть – путь к загружаемому файлу.

Создание Chrome Manifest

Откройте файл chrome.manifest, который был создан в корневом каталоге вашего расширения. Добавьте следующий код:

тип пакета chrome
название пакета chrome (должно быть написано в нижнем регистре, потому что Firefox/Thunderbird в версии 2 и более ранних не поддерживают названия со смешанным регистром — баг 132183)
размещение файлов пакетов chrome

Теперь необходимо связать ваш слой с окном браузера. Для этого добавьте следующие строки в файл chrome.manifest :

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

Перейдите в домашний каталог, а после в каталог, содержащий профиль Firefox, с которым вы собираетесь работать (например, Firefox/Profiles/<profile_id>.default/ ).
Перейдите в каталог extensions/ , если его не существует, то создайте.
Создайте текстовый файл и поместите в него полный путь к каталогу с вашим расширением (например, C:\extensions\my_extension\ или

Вы можете сделать некоторые изменения в .xul-файле, перезапустить Firefox, и сразу же увидите результат.

Создание пакета

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

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

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

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

👉 Что такое расширение

Расширение для Chrome — это небольшая программа, которая выполняется внутри браузера и помогает расширить возможности сайтов. Сила расширения в том, что оно может выполняться прямо из меню браузера и не зависит от политик безопасности.

Примеры того, что может сделать расширение:

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

В этой статье

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

Манифест

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

как называется расширение;
к чему расширение может получить доступ;
какие скрипты будут работать в фоне;
как должна выглядеть иконка расширения;
что показать или что выполнить, когда пользователь нажмёт на иконку расширения.

Манифест задаёт общие правила для всего расширения, поэтому манифест — единственный обязательный компонент. Можно обойтись без иконок и скриптов, но манифест обязательно должен быть.Каждый манифест хранится в файле manifest.json — создадим пустой файл с таким именем и напишем внутри такое:

«name»: «Запускаем снежинки на любом сайте»,
«description»: «Проект журнала Код»,
«version»: «1.0»,
«manifest_version»: 3
>

Первые две строчки — это название и подробное описание расширения. Третья отвечает за номер версии расширения, а последняя говорит браузеру, какая версия манифеста используется в описании. На момент выхода статьи в феврале 2021 года используется третья версия.

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

Мы попадаем на страницу, которая нам покажет все установленные расширения:

Чтобы добавить своё расширение, в правом верхнем углу включаем режим разработчика, а затем нажимаем «Загрузить распакованное расширение»:

Теперь выбираем папку, в которой лежит наш манифест:

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

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

Чтобы было проще работать и тестировать расширение, закрепим его на панели браузера:

Иконки

У расширения есть две иконки, которыми мы можем управлять:

Картинка в карточке расширения на странице настроек.
Иконка на панели браузера.

Чтобы не рисовать всё с нуля, скачаем папку с иконками из того же руководства Google и положим её в ту же папку, что и манифест:

Теперь добавим иконки в манифест. За картинку в карточке отвечает блок icon, а за иконку на панели — блок action. Разные размеры картинки нужны для того, чтобы на разных мониторах с любой плотностью пикселей иконки выглядели хорошо:

Сохраняем манифест, обновляем расширение на странице настроек и смотрим результат:

Настраиваем разрешения

Разрешения — это то, что браузер позволяет делать расширению со страницами и с их содержимым. Для запуска снежинок нам нужно сделать две вещи:

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

Чтобы получить доступ к активной вкладке и к запуску скриптов, добавим в манифест такую строку:

"permissions": ["activeTab", "scripting"],

Показываем меню

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

Чтобы сделать всплывающее меню, добавим в манифест в раздел action такую строку:

Она означает, что при нажатии на иконку мы увидим рядом с ней мини-страничку, на которой что-то будет.Создадим в той же папке расширения файл popup.html и добавим в него такой код:

Чтобы браузер не ругался, что у нас нет файла popup.js , создадим пустой файл с таким названием и положим его в ту же папку:

Сохраняем манифест, обновляем его на странице настроек и видим, что у нашего расширения появилось меню с кнопкой:

Запускаем снежинки

Вся магия будет происходить в файле popup.js — откроем его и добавим такой код:

Последнее, что нам осталось сделать, — положить в функцию snowFall() полный код скрипта из проекта со снежинками и сохранить файл.

Проверка

В прошлый раз мы не смогли запустить скрипт на любой странице Яндекса — мешала политика безопасности. Теперь всё работает:

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

Как сделать расширение для браузера firefox

Наша цель

Что вам нужно — настройка среды разработки

Создайте другой профиль разработки

Диспетчер профилей в Windows

Менеджер профилей на Mac

Менеджер профилей в Linux

Настройки конфигурации для Firefox

Рекомендуемые настройки

Дополнительные настройки

Укажите ваш каталог расширений Firefox на ваше расширение

Найдите каталог своего профиля

Найти каталог профиля в Windows

Найти каталог профиля на Mac

Найти каталог профиля в Linux

Указывая на расширение

Создание структуры папок и файлов

я nstall.rdf

В Description узле

В Description/em:targetApplication узле

c hrome.manifest

папка c hrome

Вступление

Подготовка окружения

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

Расширение браузера с использованием XUL

XUL-слои

Пример документа XUL-слоя

Chrome URIs

Создание Chrome Manifest

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

Создание пакета

Вступление

Подготовка окружения

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

Расширение браузера с использованием XUL

XUL-слои

Пример документа XUL-слоя

Chrome URIs

Создание Chrome Manifest

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

Создание пакета

👉 Что такое расширение

В этой статье

Манифест

Иконки

Настраиваем разрешения

Показываем меню

Запускаем снежинки

Проверка