Как создать собственное дополнение для Mozilla Firefox
Допустим, ты хочешь купить у меня франшизу 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
