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

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

Если для значка указан всплывающее окно, отображается всплывающее окно. Всплывающие окна — это временные диалоговые окна, определённые с помощью HTML, CSS и JavaScript.
Если всплывающее окно не указано, генерируется событие клика, на которое вы можете подписаться в своём коде и выполнить какое-либо другое действие в ответ.

В API WebExtension такие кнопки называются "действиями браузера" и настраиваются следующим образом:

Ключ manifest.json browser_action используется для определения кнопки.
JavaScript API browserAction используется для обработки кликов и изменения кнопки, а также выполнения действий через код.

Простая кнопка

В этом разделе мы создадим расширение, которое добавит кнопку на панель инструментов. При нажатии пользователем на кнопку мы откроем https://developer.mozilla.org в новой вкладке.

Сначала создайте новую директорию "button" и создайте в ней файл "manifest.json" со следующим содержимым:

{
  "description": "Demonstrating toolbar buttons",
  "manifest_version": 2,
  "name": "button-demo",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }
}

Это указывает, что у нас будет скрипт фонового процесса с именем "background.js", а также действие браузера (кнопка), иконки которой будут находиться в директории "icons".

Далее создайте директорию "icons" внутри директории "buttons" и сохраните в ней две иконки, показанные ниже:

"page-16.png":

"page-32.png":

Примечание: Эти значки взяты из набора значков bitsies!, созданного Recep Kütük.

У нас две иконки, так как мы можем использовать более крупную иконку на дисплеях высокой плотности. Браузер позаботится о выборе наиболее подходящей иконки для текущего дисплея.

Далее создайте "background.js" в корне расширения и присвойте ему следующее содержимое:

function openPage() {
  browser.tabs.create({
    url: "https://developer.mozilla.org",
  });
}

browser.browserAction.onClicked.addListener(openPage);

Это слушает событие клика действия браузера; при срабатывании события выполняется функция openPage(), которая открывает указанную страницу, используя API tabs.

На этом этапе расширение должно выглядеть так:

button/
    icons/
        page-16.png
        page-32.png
    background.js
    manifest.json

Теперь установите расширение и нажмите на кнопку:

The toolbar button added by the extension

Добавление всплывающего окна

Давайте попробуем добавить всплывающее окно к кнопке. Замените manifest.json на это:

{
  "description": "Demonstrating toolbar buttons",
  "manifest_version": 2,
  "name": "button-demo",
  "version": "1.0",

  "browser_action": {
    "browser_style": true,
    "default_popup": "popup/choose_page.html",
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }
}

Мы внесли три изменения по сравнению с оригиналом:

Мы больше не ссылаемся на "background.js", так как теперь будем обрабатывать логику расширения в скрипте всплывающего окна (вам разрешено использовать background.js и всплывающее окно, просто в этом случае оно нам не нужно).
Мы добавили "browser_style": true, что поможет стилизовать наше всплывающее окно так, чтобы оно выглядело как часть браузера.
Наконец, мы добавили "default_popup": "popup/choose_page.html", что сообщает браузеру, что это действие браузера теперь будет отображать всплывающее окно при нажатии, документ которого находится в "popup/choose_page.html".

Теперь нам нужно создать это всплывающее окно. Создайте директорию "popup", а затем создайте в ней файл "choose_page.html". Вставьте в него следующее содержимое:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="choose_page.css" />
  </head>
  <body>
    <div class="page-choice">developer.mozilla.org</div>
    <div class="page-choice">support.mozilla.org</div>
    <div class="page-choice">addons.mozilla.org</div>
    <script src="choose_page.js"></script>
  </body>
</html>

Вы можете видеть, что это обычная HTML-страница, содержащая три <div> элемента, каждый с названием сайта Mozilla внутри. Она также включает CSS-файл и JavaScript-файл, которые мы добавим далее.

Создайте файл "choose_page.css" внутри директории "popup" и вставьте в него следующее содержимое:

html,
body {
  width: 300px;
}

.page-choice {
  width: 100%;
  padding: 4px;
  font-size: 1.5em;
  text-align: center;
  cursor: pointer;
}

.page-choice:hover {
  background-color: #cff2f2;
}

Это всего лишь немного стилей для нашего всплывающего окна.

Затем создайте файл "choose_page.js" внутри директории "popup" и вставьте в него следующее содержимое:

document.addEventListener("click", (event) => {
  if (!event.target.classList.contains("page-choice")) {
    return;
  }

  const chosenPage = `https://${event.target.textContent}`;
  browser.tabs.create({
    url: chosenPage,
  });
});

В нашем JavaScript мы обрабатываем клики по выбору всплывающего окна. Сначала мы проверяем, попал ли клик на один из элементов выбора страниц; если нет, мы ничего не делаем. Если клик попал на элемент выбора страницы, мы формируем URL из него и открываем новую вкладку с соответствующей страницей. Обратите внимание, что мы можем использовать API WebExtension в скриптах всплывающих окон так же, как и в скриптах фонового процесса.

Конечная структура расширения должна выглядеть так:

button/
    icons/
        page-16.png
        page-32.png
    popup/
        choose_page.css
        choose_page.html
        choose_page.js
    manifest.json

Теперь перезагрузите расширение, снова нажмите на кнопку и попробуйте нажать на варианты во всплывающем окне:

The toolbar button added by the extension with a popup

Действия на странице

Действия на странице — это те же действия браузера, за исключением того, что они применимы только к определённым страницам, а не ко всему браузеру.

В то время как действия браузера всегда отображаются, действия на странице отображаются только на вкладках, к которым они относятся. Кнопки действий на странице отображаются в строке адреса, а не на панели инструментов браузера.

Дополнительная информация

browser_action ключ манифеста
browserAction API
Примеры действий браузера:
page_action ключ манифеста
pageAction API
Примеры действий на странице:
- chill-out

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar