Как создать собственное дополнение для Mozilla Firefox
Как создать Firefox Addon в 2023 г.
Задача: удалять определенные блоки страниц, менять стили или производить еще какие-либо действия с помощью языка Java Script.
В принципе, для этого достаточно нажать F12 и на вкладке Консоль запустить нужный сценарий, но гораздо интереснее, когда не нужно запускать сценарий каждый раз, а выполнение его происходит автоматически при открытии страниц, соответствующих определенному регулярному выражению, при включенном дополнении.
На странице https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons по-прежнему написано, как это сделать, но теперь остался только один рабочий способ: WebExtensions APIs. Для желающих поностальгировать оставил во второй части этой статьи инструкцию, как просто это можно было сделать раньше.
На странице https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons по-прежнему написана инструкция, но теперь остался только один рабочий способ: WebExtensions APIs. Для желающих поностальгировать оставил во второй части этой статьи step-by-step мануал, как просто это можно было сделать раньше.
Да и сейчас ничего сложного нет, только дополнение получается временное, оно действует до перезагрузки FireFox, для его использования придётся его "устанавливать" заново при загрузке браузера. Пишу пошаговую инструкцию. Поднимаемся чуть выше на https://github.com/mdn/webextensions-examples и скачиваем весь предложенный хлам по кнопке Code -> Downlosd ZIP.
Идём сюда https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension. Там должна быть ссылка на github.com типа такой: https://github.com/mdn/webextensions-examples/tree/main/borderify.
Распаковываем архив, идем в папку \webextensions-examples-main\borderify, там правим файл manifest.json. Не буду грузить вас примерами регулярок, приведу два примера. Если нужно, чтобы дополнение работало на любых страницах, пишем в строке 14
"matches": ["<all_urls>"],
Если нужно, чтобы Addon работало на определенном домене и его поддоменах, пишем:
"matches": ["*://*.capweb.ru/*"],
Также возможно указать несколько доменов через запятую:
"matches": ["*://*domain1.com/*", "*://*domain2.com/*"],
В той же папке правим файл borderify.js.
Приведу лишь некоторые примеры правки стилей.
document.getElementById("wrapper").style.backgroundColor = "#000"; // Делаем фон блока, выбранного по Id, чёрным document.getElementById("someid").style.minWidth = "100vw"; // Устанавливаем минимальную ширину блока var highlightedItems = document.querySelectorAll("div#Resizable > div.someclass"); highlightedItems[0].style.minHeight = "800px"; // Выбирам селекторы в массив и устанавливаем для первого минимальную высоту // Далее скрываем ненужные DOM-узлы: var el1 = document.getElementsByClassName("right-column"); el1[0].remove(); document.getElementById("SomeUnnecessaryId").remove();Кроме того, можно задавать и редактировать иконки в разных разрешениях и т. д., в этом несложно разобраться при желании.
Когда исходники отредактированы, остаётся лишь разрешить собственные дополнения в браузере, запустить Addon и разрешить его использование в приватных окнах.
Всё самое интересное находится в about:config, но нам там пока ничего не нужно.
Идём на about:debugging#/runtime/this-firefox (или сначала about:debugging#/setup, потом кнопка слева "Этот Firefox"), нажимаем кнопку справа "Загрузить временное дополнение…" и щелкаем на любой файл в папке \webextensions-examples-main\borderify. Результат — установленное расширение. (У меня предупреждения, потому что я использовал три допполнительных параметра вместо комментариев, чтобы не потерять примеры регулярных выражений.)
Последний шаг: заходим в настройки расширения и ставим флажок "Разрешить" для запуска в приватных окнах. Если у вас нет значка расширений в панели, можно его туда поставить или зайти через пункт "Дополнения и темы".
Теперь при открытии страниц, определенных в manifest.json, с ними будут каждый раз выполняться манипуляции, прописанные в js-файле. Практика показывает, что из-за того, что сама страница также имеет определенные js-сценарии, не всегда всё прописанное успевает выполниться, поэтому нужно пробовать и корректировать. Надеюсь, кому-то будет полезно, ставьте лайки.
Старый текст 2017 года (не актуально)
Допустим, ты хочешь купить у меня франшизу CapWeb. Я пришел, чтобы показать портфолио нашей студии и обсудить прочую ерунду вроде построения отдела продаж, отдела маркетинга, найма сотрудников, паушалки, роялти и т. д.
У нас мало времени, и я хочу открыть 79 сайтов в Mozilla Firefox нажатием одной кнопки.
Для этого мне понадобится запустить на компьютере один файлик my-addon.xpi, устанавливающий Add-on – дополнение для Firefox. При этом на панели инструментов появится кнопочка, открывающая любое количество сайтов, url которых зашиты в программу, либо выполняющая любые другие действия в зависимости от твоей фантазии, потребностей, владения Node.js и прочими полезными платформами, программами, командами.
(Дополнение в июле 2017 г.: добавлять неподписанные addons теперь можно только в специальных версиях Firefox типа Developer Edition, поэтому проще мне установить дополнение с открытием сотни вкладок на своем ноуте.)
А вот пошаговое руководство, как создать такую кнопку
- Сначала надо разрешить Firefox запускать установку подозрительных и ненадежных файлов. Для этого вводим в адресной строке about:config, обещаем быть осторожными, находим параметр xpinstall.signatures.required и устанавливаем в false.
- Далее владеющие английским языком могут почитать https://developer.mozilla.org/en-US/Add-ons и сделать все самостоятельно. Для экономии времени можно воспользоваться продолжением данной инструкции.Итак, официальная справка mozilla.org предлагает два варианта для создания дополнений: WebExtensions и Add-on SDK. Первый вариант считается стандартом с 2017 г., остальное якобы перестанет поддерживаться. Но дополнения WebExtensions либо временные, которые работают до закрытия браузера, либо требуют упаковки и публикации, что не очень подходит для тренировочных задач. Скачать готовые примеры можно на GitHub. Рассмотрим несколько подробнее компиляцию xpi-файла с помощью Add-on SDK. Следующий шаг – https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm#Installation Устанавливаем Node.js
- Далее нам понадобятся несколько файлов и команда jpm для упаковки установочного файла xpi. JPM является частью пакета npm, который в свою очередь входит в Node.js.
Проверить работу jpm можно, запустив командную строку от имени администратора и введя jpm.
Если какие-то проблемы, можно запустить локальную установку jpm. Подробнее тут https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm
Теперь пишем код, готовим иконки. Тут https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29 описан весь алгоритм, готовые файлы можно скачать на нашем сайте: https://capweb.ru/my-addon.zip и распаковать, например, в папку H://my-addon Иконки формата png размером 16, 32, 48 px вставляем в папку data. Именно так будет выглядеть кнопка.- Основные функции прописаны в файле index.js.
var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick }); function handleClick(state) { tabs.open("https://capweb.ru"); tabs.open("http://eva.capweb.ru"); tabs.open("http://veragold.ru"); tabs.open("http://scales-nn.ru"); tabs.open("http://3d-52.ru"); }
Сюда можно вставить любую программу. - Когда все готово, в командной строке командой cd переходим в папку my-addon, в моем случае H:\my-addon
H: cd H:/my-addon
- И запускаем команду
jpm xpi
Все, файл my-addon.xpi сформирован в папке my-addon. Теперь можно открыть браузер Mozilla Firefox, нажать Ctr+O, указать этот файл, и ура! Расширение установлено, кнопочка появилась в панели инструментов. Если нет – копаем справочные материалы, ссылки приведены выше. Кстати, иногда после переустановки приложения нужно зайти в Дополнения (Ctrl + Shift + A) и активировать его.
Успехов в освоении Node.js! Заказать любое дополнение всегда можно в компании CapWeb.
Следующая статья: Зарабатывайте с помощью сайта Avon! https://capweb.ru/zarabatyivajte-s-pomoshhyu-sajta.html
Предыдущая статья: Будьте лучшим брендом: от маркетинговой стратегии до дизайна логотипа https://capweb.ru/brend-ot-marketingovoj-strategii-do-dizajna-logotipa.html
