Создание качественного сайта — важный шаг на пути к успеху Вашей компании
+7(968)000-10-11 (в Москве)

Как создать собственное дополнение для Mozilla Firefox

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

У нас мало времени, и я хочу открыть 79 сайтов в Mozilla Firefox нажатием одной кнопки.

Для этого мне понадобится запустить на компьютере один файлик my-addon.xpi, устанавливающий Add-on – дополнение для Firefox. При этом на панели инструментов появится кнопочка, открывающая любое количество сайтов, url которых зашиты в программу, либо выполняющая любые другие действия в зависимости от твоей фантазии, потребностей, владения Node.js и прочими полезными платформами, программами, командами.

(Дополнение в июле 2017 г.: добавлять неподписанные addons теперь можно только в специальных версиях Firefox типа Developer Edition, поэтому проще мне установить дополнение с открытием сотни вкладок на своем ноуте.)

А вот пошаговое руководство, как создать такую кнопку

  1. Сначала надо разрешить Firefox запускать установку подозрительных и ненадежных файлов. Для этого вводим в адресной строке about:config, обещаем быть осторожными, находим параметр xpinstall.signatures.required и устанавливаем в false.
  2. Далее владеющие английским языком могут почитать 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
  3. Далее нам понадобятся несколько файлов и команда jpm для упаковки установочного файла xpi. JPM является частью пакета npm, который в свою очередь входит в Node.js. Проверить работу jpm можно, запустив командную строку от имени администратора и введя jpm.

    Командная строка. Тест jpm

    Если какие-то проблемы, можно запустить локальную установку jpm. Подробнее тут https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm
  4. ИконкиТеперь пишем код, готовим иконки. Тут https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29 описан весь алгоритм, готовые файлы можно скачать на нашем сайте: http://capweb.ru/my-addon.zip и распаковать, например, в папку H://my-addon Иконки формата png размером 16, 32, 48 px вставляем в папку data. Именно так будет выглядеть кнопка.
  5. Основные функции прописаны в файле 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("http://capweb.ru");
    tabs.open("http://cvetlavka.ru");
    tabs.open("http://veragold.ru");
    tabs.open("http://glassproekt.com");
    tabs.open("http://avon-123.ru");
    }

    Сюда можно вставить любую программу.
  6. Когда все готово, в командной строке командой cd переходим в папку my-addon, в моем случае H:\my-addon
    H:
    cd H:/my-addon
  7. И запускаем команду
    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

Позиции сайта veragold.ru на декабрь 2014 г.
reative
nalytics
romotion

Статьи от CapWeb

Будьте лучшим брендом: от маркетинговой стратегии до дизайна логотипа

"Layout, Boomerang, Hyperlapse получили новый унифицированный вид. Мы провели градиент через каждую иконку и изобразили их на той же сетке, чтобы... Подробнее >>

Изготовление визиток в Нижнем Новгороде Почему мы успешно занимаемся продвижением сайтов

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

Преимущества посадочной страницы Landing Page

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

Оставьте Вашу контактную информацию, и мы свяжемся с Вами!

Получайте горячие новости интернет-маркетинга и вечную скидку 5%!