Добавление кнопки на панель инструментов

We are planning to deprecate the use by Firefox add-ons of the techniques described in this document.

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 instead.

Add-ons developed using these techniques might not work with multiprocess Firefox (e10s), which is already the default in Firefox Nightly and Firefox Developer Edition, and will soon be the default in Beta and Release versions of Firefox. We have documentation on making your add-ons multiprocess-compatible, but it will be more future-proof for you to migrate to WebExtensions.

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,