MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

Add-ons using the techniques described in this document are considered a legacy technology in Firefox. Don't use these techniques to develop new add-ons. Use WebExtensions instead. If you maintain an add-on which uses the techniques described here, consider migrating it to use WebExtensions.

Starting from Firefox 53, no new legacy add-ons will be accepted on addons.mozilla.org (AMO) for desktop Firefox and Firefox for Android.

Starting from Firefox 57, only extensions developed using WebExtensions APIs will be supported on Desktop Firefox and Firefox for Android.

Even before Firefox 57, changes coming up in the Firefox platform will break many legacy extensions. These changes include multiprocess Firefox (e10s), sandboxing, and multiple content processes. Legacy extensions that are affected by these changes should migrate to use WebExtensions APIs if they can. See the "Compatibility Milestones" document for more information.

A wiki page containing resources, migration paths, office hours, and more, is available to help developers transition to the new technologies.

Для понимания этого руководства необходимо изучить статью basics of jpm (основы jpm).

Для добавления кнопки на панель инструментов (toolbar, тулбар) используются модули action button или toggle button.

Создайте новую папку, перейдите в неё и запустите jpm init, приняв всё по умолчанию.

Создайте папку "data"

mkdir data

и сохраните три файла иконок в этой папке:

icon-16.png
icon-32.png
icon-64.png

После, откройте файл "index.js", расположенный в корне каталога дополнения, и допишите этот код:

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

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://www.mozilla.org/");
}

Запустите дополнение через jpm run. Кнопка будет добавлена на тулбар (ищите сверху в окне браузера):

Вы не сможете установить место первоначального появления кнопки, но пользователь сможет её переместить, используя настройки браузера. Атрибут id является обязательным. Он используется, в частности, для запоминания позиции кнопки на панели, поэтому в следующих версиях своего дополнения вы его не сможете изменить.

Нажатие кнопки откроет в новой вкладке сайт https://www.mozilla.org/ .

Задание иконки

Свойство icon может содержать одну иконку или набор (различных размеров, как в примере выше). Если указать набор иконок разных размеров, то браузер будет автоматически выбирать размер в зависимости от разрешения экрана и расположения на экране. Более подробная информация о иконках.

Файл с иконкой должен быть внутри дополнения. Недопустимы ссылки на внешние фалы.

Вы можете изменить иконку в любое время через установку свойства icon кнопки. Также можно изменить иконку и другие свойства состояния глобально для окна брайзера или только для вкладки. Узнать об этом можно в статье.

Привязка панели

Если необходимо привязать к кнопке панель, то используйте toggle button API. Этот API такой же как action button API, кроме того, что добавлено булево свтйство checked, которое переключается, когда нажимается конпка.  Для связи в панелью нужнопередать кнопку в функцию show() панели. Для уточнения деталей, изучите документацию toggle button's documentation.

Вывод сложного контента

Для созлания более сложного пользовательского интерфейса, чем доступен через кнопку, используйте toolbar API. С этим API вы получите доступ к полным гризонтальным полосам тулбара. Можно добавлять кнопки на панель, и фреймы (frames), которые могут содержать HTML, CSS и JavaScript.

Материал для изучения

Метки документа и участники

 Внесли вклад в эту страницу: pk.prog
 Обновлялась последний раз: pk.prog,