Прежде всего практически вся информация из этой статьи озвучена на ниже приведённом видео, поэтому если Вам проще изучать информацию по видео, Вы можете посмотреть его в ниже приведённом окне или перейти на данное видео на видеохостинге YouTube по ссылке приведённой ниже видео.
Ссылка на видео: Разработка расширения для браузера Firefox.
В этой статье расскажу как разрабатываются и устанавливаются плагины для браузера Firefox. Плагин будет состоять из 5-ти файлов: 1)manifest.json; 2)testplugin.js - JavaScript код который выполняется при открытии вкладок, а так же для всех открытых вкладок при запуске плагина; 3)index.html - окно с этой страницей отображается при клике; 4)test-img-32.png - иконка размером 32 на 32 пикселя; 5)test-img-48.png - иконка размером 48 на 48 пикселей.
Ниже приведено содержание указанных файлов. Вы можете в том числе для изучения материала этой статьи скопировать каждый из них, и разместить с аналогичными именами у себя на ПК в папке для сборки или можно скачать готовый файл с расширением и для начала попробовать добавить его в Firefox. Убедившись что расширение корректно устанавливается, можно изменить расширение устанавливаемого файла расширения на .zip, то есть переименовать файл из testplugin.xpi в testplugin.zip, таким образом переименованный файл будет представлять из себя ZIP-архив. Распаковав содержимое этого ZIP-архива Вы получите исходные файлы содержание которых как раз и описывается ниже, таким образом Вы сможете посмотреть что находится в этих файлах и возможно что то исправите или дополните.
Скачать готовое для установки в браузер Firefox расширение, содержание которого описано ниже можно по ссылке: testplugin.xpi.
Содержание файлов расширения
Файлы иконок test-img-32.png и test-img-48.png
Следующие две картинки, первая размером 32 на 32 пикселя: 
и вторая размером 48 на 48 пикселей: 
будут использоваться в качестве иконок для разрабатываемого плагина. По каждой из них можно кликнуть и скачать, после этого разместите данные картинки в папке icons которую разместите в папке разрабатываемого плагина.
Файл manifest.json
Файл manifest.json содержит описание плагина, в рассматриваемом случаи в нём находится следующая информация:
- manifest_version - версия манифеста;
- name - имя расширения;
- description - описание расширения(как и имя описание выводится на странице управления дополнениями);
- version - версия расширения;
- icons - в этом свойстве перечисляются адреса файлов иконок с учётом вложенности в папки относительно файла manifest.json, адреса файлов указываются как значения свойств, имена этих свойств соответствуют размеру иконки с пикселях;
- homepage_url - URL адрес страницы расширения;
- id(в свойстве gecko которое в свою очередь относится к свойству applications) - идентификатор расширения, указание значка "@"(собака) в нём является обязатеьным(наличие же точек не обязательно);
- browser_action - в этом свойстве указывается страница которая в частности должна быть открыта при клике на расширение на панели инструментов;
- content_scripts - содержит свойства matches и js, в последнем свойстве указан файл скрипта который выполнится при активации плагина для вкладок адреса загруженных страниц в которых удовлетворяют регулярному выражению указанному в свойстве matches, а так же для новых загружаемых страниц(учитывая переходы по ссылкам и отправки формы в браузере) так же в случаи если их адреса удовлетворяют регулярному выражению.
Ниже приведён код файла manifest.json
Файл testplugin.js
Ниже приведено содержание файла testplugin.js содержащего JavaScript. В нём всего одна строка которая выводит alert с сообщением "testJSAlert" в момент загрузки страницы или активации плагина. Как уже указывалось выше сообщение будет выведено только на тех вкладках, адреса которых удовлетворяют регулярному выражению из свойства mathces(относится к свойству content_scripts). Вывод должен осуществляться в момент загрузки страниц(включая отправку форм и переходы по ссылкам, кроме выполнения перечисленного по ajax) или при активации плагина.
Файл index.html
Ниже приведено содержание файла index.html, который представляет из себя web-страницу. В рассматриваемом расширении для браузера реализовано отображение этой страницы при клике на расширение в панели инструментов(скринсшот с демонстрацией этого действия приведён ближе к концу статьи) или если расширение не выведено на панель инструментов, то для отображения страницы index.html сначала можно кликнуть на элемент "Расширения" а затем в открывшемся списке непосредственно на установленное расширение(скринсшот с списком расширений после клика на элемент "Расширения" панели инструментов так же приведён ближе к концу статьи).
Сборка расширения в единый файл
Перед процессом сборки единого файла расширения предполагается, что все необходимые файлы размещены в папке для сборки, а точнее 3 файла в основной папке плагина и 2 в папке icons. В Windows папка для сборки плагина после копирования в неё файлов может выглядеть так или примерно так, как это показано на следующем скринсшоте.
После того как все папки и файлы плагина размещены в папке для сборки - можно приступить к сборке. Процесс сборки представляет из себя упаковку файлов плагина в zip-архив. Обратите внимание архивируются именно файлы и папки самого плагина, а не папка плагина их содержащая, таким образом папку для сборки расширения совершенно не обязательно называть testplugins, как она называется на скринсшоте выше. Для архивации необходимо выделить файлы и папки затем в операционной системе Windows нажать по ним правой кнопкой, в выпадающем списке меню выбрать "Отправить"(в Windows 11 перед этим возможно потребуется выбрать в выпадающем меню "Показать дополнительные параметры") в следующем выпадающем меню выбрать "Сжатая ZIP-папка". На следующем скринсшоте показаны действия которые можно выполнить для получения указанного ZIP-архива.
После упаковки расширения в zip полученный файл можно переименовать изменив его расшинение на .xpi(кстати само имя файла возможно следует так же изменить, поскольку после создания ZIP-архив может называться так же как и элемент файловой системы по которому осуществлялся клик правой кнопкой мыши перед выполнением архивации), именно такое расширение у плагинов Firefox, при этом формально файл по прежнему из себя представляет ZIP-архив. По факту переименовывать файл совершенно не обязательно, поскольку файл с расширением .zip так же можно загрузить как расширение в Firefox, что можно например использовать при отладке плагина. Далее же в статье описываются действия выполняемые с переименованным файлом, то есть с присвоенным расширением .xpi, таким образом финальное название файла разрабатываемого расширения для Firefox - testplugin.xpi(ссылка на скачивание получившегося файла приводилась в начале статьи).
Загрузка временного расширения в браузер Firefox
Если Вам уже доводилось иметь дело с расширениями Firefox у Вас мог возникнуть вопрос: для чего выполнять установку временного расширения с страницы отладки, при том что возможность загрузки файла расширения есть на странице "Управление дополнениями". Дело в том что рассматриваемое разарабатываемое расширение пока что не имеет специальной подписи, без которой Firefox заблокирует возможность установки расширения с страницы "Управлении дополнениями". Далее в этой статье этот вопрос ещё будет рассмотрен, сейчас же будет рассмотрена установка временного расширения.
Далее производится загрузка получившегося плагина в Firefox. Для этого в адресной строке браузера можно ввести about:debugging после нажатия клавиши Enter должна открыться вкладка под названием "Отладка - Настройка", она показана на следующем скринсшоте.
На вкладке "Отладка - Настройка" можно кликнуть по "Этот Firefox" после чего должна открыться вкладка "Отладка - Runtime", на которой для загрузки плагина в Firefox можно нажать кнопку "Загрузить временное дополнение...". После нажатия последней указанной кнопки должно появиться диалоговое окно операционной системы в котором предлагается выбрать загружаемое расширение для браузера Firefox, Вы можете найти необходимое расширение с помощью указанного окна и загрузить его двойным кликом или выбрав нужный файл из списка, а затем нажав кнопку "Открыть" диалогового окна. Процедура загрузки расширения Firefox на странице "Отладка - Runtime" показана на следующем скринсшоте.
После успешной загрузки расширение появился на той же вкладке - "Отладка Runtime", в этом случаи можно увидеть иконку расширения, его название и прочую информацию о расширении такую как описание, Id и некоторую другую информацию. В случаи возникновения ошибки, может появиться соответствующее сообщение.
О установленном расширении
После загрузки расширения оно должно сразу же активироваться(именно так было в моём случаи), при этом на вкладке "Отладка - Runtime" информация о активности расширения не отображается, чтобы управлять активностью расширения и смотреть текущую информацию о активности, можно перейти на вкладку "Управление дополнениями", для перехода на неё можно например использовать меню, для этого выбрать в меню "Инструменты" затем в выпадающем меню выбрать "Дополнения и темы", кроме того можно перейти на вкладку "Управление дополнениями" нажав одновременно сочетание клавиш "Ctrl"+"Shift"+"A", последний вариант возможно будет уместен если у Вас не активирована панель меню. На следующем скринсшоте показана вкладка "Отладка - Runtime" после успешной установки временного расширения, так же показано каким образом можно перейти на страницу "Управление дополнениями" используя панель меню Firefox.
На вкладке "Управление дополнениями" можно видеть установленное расширение, а именно его иконку, название и описание, а так же есть возможность управлять его активностью, рядом с активностью есть кнопка "..."(три точки), если нажать на неё появляется меню из трёх пунктов: 1)удалить; 2)пожаловаться; 3)управление. При нажатии на пункт меню "Управление" происходит то же самое что и при клике на плагин - открывается информация о плагине и его настройки. На следующем скринсшоте показана вкладка "Управление дополнениями" на которой видно установленное расширение, переключатель управления его активностью, а так же выпадающее меню по нажатию кнопки "..."(три точки) в котором есть возможность удаления плагина.
Как выше уже было указано, можно кликнуть по расширению на вкладке браузера Firefox "Управление дополнениями" для просмотра и редактирования настроек расширения и получения некоторой дополнительной информации о нём. На следующем скринсшоте показана информация о установленном расширении с вкладки "Подробности".
Так же можно кликнуть по вкладке "Разрешения" и посмотреть какая информация представлена на ней. На следующем скринсшоте показана информация о установленном расширении на вкладке "Разрешения".
Не смотря на то, что после добавления временного расширения оно сразу же активно(как было в моём случаи) оно может не появиться на панели инструментов, при этом Вы можете добавить его на панель инструментов самостоятельно. Для этого на панели инструментов можно кликнуть по элементу "Расширения", затем в списке расширений навести курсор мыши на установленное расширение и кликнуть по нему правой кнопкой мыши(или кликнуть на значок "шестерёнки" справа от расширения), после чего в выпадающем меню выбрать пункт "Закрепить на панели инструментов", на следующем скринсшоте в частности продемонстрировано местонахождение данного пункта меню.
После совершения действий указанных выше расширение должно появиться на "Панели инструментов" в Firefox". Теперь если кликнуть по расширению на панели инструментов(или аналогично если кликнуть сначала по элементу "Расширения" панели инструментов после чего в открывшемся после клика списке кликнуть по расширению) должно отобразиться содержание страницы index.html которая была помещена в архив с расширением. Так же при наведении на расширение курсором мыши появляется надпись "Test plugin default title"(она же так же появляется при наведение на расширение в списке после клика на элемент "Расширения" панели инструментов) то есть отображается содержание свойства "default_title" которое было указано в свойстве манифеста "browser_action". Размещение расширения на панели инструментов, всплывающая подсказка при наведение на него мышью и открывающаяся страница index.html при клике на расширение показаны на следующем скринсшоте.
После активации расширения на вкладках с открытыми страницами сайтов соответствующих регулярному выражению указанному в свойстве js(которое в свою очередь находится в свойстве content_scripts) файла manifest.json появляется alert который выводит текстовое сообщение "testJSAlert", то-есть сообщение которое указано в alert JavaScript-файла testplugin.js подключаемого в файле manifest.json в свойстве js(которое в свою очередь так же как и свойство js находится в свойстве content_scripts). Аналогичное сообщение будет появляться для новых открываемых сайтов или например при переходе по ссылке или отправке формы(как для случая перехода по ссылке, так и случая отправки формы есть исключения, например при использовании ajax сообщение из alert может не появиться) на уже открытых вкладках сайтов(разумеется если адреса этих сайтов так же соответствуют регулярному выражению). Данное сообщение не появится например для открытой вкладки "Управление дополнениями". Пример отображения alert указанного в JavaScript файле testplugin.js показан на следующем скринсшоте.
Удаление временных расширений при перезагрузке браузера Firefox
В браузере Firefox разработчики возможно заботясь о безопасности пользователей сделали так, что временные расширения будут удалены при повторной загрузке браузера. Вполне возможно что на этапе разработки расширения Вас устроит вариант с его временной установкой в Firefox, если же Вам по какой то причине требуется установка расширения на постоянной основе - этот вопрос рассмотрен ниже.
Ошибка при попытке установить в Firefox не подписанное расширение.
Выше уже упоминалось что функционал по установке расширения в Firefox из файла есть на странице "Управление дополнениями". На эту страницу, как уже указывалось, можно перейти нажав сочетание клавиш "Ctrl"+"Shift"+"A" или же выбрав в "Панели меню" пункт "Инструменты", а затем в выпадающем меню "Дополнения и темы". Для установки расширения с указанной страницы кликните по значку "шестерёнки" далее в выпадающем меню выберите "Установить дополнение из файла". Как установить расширение из файла на странице "Управление дополнениями" показано на следующем скринсшоте.
После нажатия на указанный выше пункт меню "Установить дополнения из файла" должен появиться диалоговое окно для выбора файла расширения в файловой системе, выбрать необходимный файл расширения можно два раза кликнув по нему или же после выбора нужного файла можно нажать кнопку "Открыть". При попытке установить в Firefox таким образом не подписанное расширение Вы можете увидеть ошибку показанную на следующем скринсшоте.
Установка не подписанного расширения в браузер Firefox Nightly на постоянной основе(без удаления при перезагрузке браузера)
Как выше уже было написано, если Вам тем не менее требуется установить не подписанное расширение в браузер, так чтобы оно не удалялось при перезагрузке браузера - такой вариант есть, хотя и потребуется использовать иную версию браузера, а именно Firefox Nightly.
Если у Вас ещё не установлен Firefox Nightly Вы можете скачать его с официального сайта Mozilla, для поиска соответствующей ссылки можно воспользоваться поисковыми системами, указав в них например поисковую фразу "Firefox Nightly". На следующем скринсшоте приведена часть страница с сайта Mozilla с ссылкой на загрузку Firefox Nightly.
Если просто попробовать загрузить расширение в Firefox Nightly с вкладки "Управление дополнениями" то появится аналогичная ошибка как и в случаи с обычным Firefox(по крайней мере в моём случаи ошибка появилась). Тем не менее для того чтобы Firefox Nightly разрешил установку не подписанных приложений из файла загружаемого с ПК он имеет соответствующую опцию, кстати аналогичная опция есть и в обычной версии Firefox, при этом при её переключении в последнем это не приводит к нужным изменениям и не подписанные расширения с страницы "Управление дополнениями" всё равно в обычную версию Firefox установить не удастся, при попытке установки появляется та же ошибка, что описана выше. Для переключения опции можно перейти на вкладку "Расширенные настройки" для этого можно ввести в адресной строке about:config после чего нажать Enter. После этого с строке поиска можно ввести название требующегося свойства, а именно: xpinstall.signatures.required, можно вводить не всё название целиком а например какую либо часть искомого свойства, в этом случаи firefox покажет свойства содержащие в себе искомую фразу, не обязательно вводить в поиск начало названия свойства. После того как опция найдена можно переключить её значение в false двойным кликом мыши. После переключения указанной опцииы в Firefox Nightly можно будет устанавливать не подписанные расширения с страницы "Управление дополнениями", которые не будут удаляться после перезагрузки браузера. На следующем скринсшоте показана опция xpinstall.signatures.required установленная в значение false, при этом значении в Firefox Nightly можно устанавливать не подписанные расширения с страницы "Управление дополнениями"(исходное значение опции - true).
После переключения свойства xpinstall.signatures.required в false в Firefox Nightly можно загружать не подписанные расширения из файлов и это не должно приводить к ошибке. Местонахождение такой возможности на странице "Управление дополнениями" аналогично обычному Firefox, поэтому отдельного скринсшота для браузера Firefox Nightly не будет. После выбора файла загружаемого расширения в моём случаи появилось сообщение о установке расширения с возможностью подтвердить или отменить её, данное сообщение показано на следующем скринсшоте.
После подтверждения установки расширения, то есть после нажатия кнопки "Добавить" в моём случаи появилось сообщение о успешной установке, оно показано на следующем скринсшоте.
В завершении
По следующей ссылке: testplugin.xpi доступна подписанная версия расширения, она может быть установлена в обычный браузер Firefox с страницы "Управление дополнениями" или напрямую по ссылке. Вы можете изменить расширение файла на ZIP и далее посмотреть как устроено подписанное расширение. Процесс подписания расширений возможно будет рассмотрен в отдельной статье.