Spec-Zone.ru › Web Extensions

действие

Тип Object
Обязательно Нет
Версия манифеста 3 или выше
Пример
"action": {
  "browser_style": true,
  "default_icon": {
    "16": "button/geo-16.png",
    "32": "button/geo-32.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/geo.html",
  "theme_icons": [{
    "light": "icons/geo-16-light.png",
    "dark": "icons/geo-16.png",
    "size": 16
  }, {
    "light": "icons/geo-32-light.png",
    "dark": "icons/geo-32.png",
    "size": 32
  }]
}

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

Этот ключ заменяет browser_action в надстройках манифеста версии 3.

Если вы предоставили всплывающее окно, оно открывается при нажатии пользователем на кнопку, а ваш JavaScript, выполняющийся во всплывающем окне, обрабатывает взаимодействие пользователя с ним. Если вы не предоставили всплывающее окно, при нажатии пользователем на кнопку событие клика отправляется в фоновые скрипты вашей надстройки.

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

Синтаксис

Ключ action — это объект, который может иметь любые из этих свойств, все необязательные:

Имя Тип Описание
browser_style Boolean

Необязательное, по умолчанию false.

Используйте это, чтобы включить в всплывающее окно таблицу стилей, которая сделает его внешний вид согласованным с пользовательским интерфейсом браузера и с другими надстройками, использующими свойство browser_style. Хотя этот ключ по умолчанию false, рекомендуется включать его и устанавливать значение true для согласованности внешнего вида всплывающих окон с остальной частью пользовательского интерфейса браузера.

В Firefox таблицу стилей можно увидеть по адресу chrome://browser/content/extension.css или chrome://browser/content/extension-mac.css на macOS. При установке размеров обратите внимание, что этот лист стилей в настоящее время устанавливает box-sizing: border-box (см. box-sizing).

Стили браузера описывает классы, которые вы можете применять к элементам во всплывающем окне, чтобы получить определённые стили.

Надстройка-пример latest-download использует browser_style во всплывающем окне.

Примечание: Установка browser_style в true предотвращает выбор текста в всплывающем окне или боковой панели надстройки. Это стандартное поведение. Вы не можете выделять части пользовательского интерфейса браузера. Однако, можно обойти это ограничение, чтобы пользователи могли выделять текст двумя способами:

  1. Установите browser_style на false
  2. Используйте стили CSS в теле HTML вашей боковой панели или всплывающего окна, чтобы разрешить выбор текста, добавив правило -moz-user-select со значением all или text.
default_area String

Определяет часть браузера, в которой кнопка будет первоначально размещена. Это строка, которая может принимать одно из четырёх значений:

  • "navbar": кнопка размещается в основной панели инструментов браузера рядом с адресной строкой.
  • "menupanel": кнопка размещается в всплывающей панели.
  • "tabstrip": кнопка размещается в панели инструментов, содержащей вкладки браузера.
  • "personaltoolbar": кнопка размещается в панели закладок.

Это свойство поддерживается только в Firefox.

Это свойство необязательное и по умолчанию равно "menupanel".

Firefox запоминает настройку default_area для надстройки, даже если она была удалена и затем повторно установлена. Чтобы заставить браузер принять новое значение для default_area, необходимо изменить идентификатор надстройки.

Надстройка не может изменить расположение кнопки после её установки, но пользователь может переместить кнопку с помощью встроенного механизма настройки пользовательского интерфейса браузера.

default_icon Object или String

Используйте это для указания одного или нескольких значков для действия. Значок отображается в панели инструментов браузера по умолчанию.

Значки задаются как URL-адреса, относительные к файлу manifest.json.

Вы можете указать один значок, передав сюда строку:

"default_icon": "path/to/geo.svg"

Чтобы указать несколько значков разных размеров, передайте сюда объект. Имя каждой свойства — высота значка в пикселях, которое должно быть преобразуемо в целое число. Значение — URL-адрес. Например:

    "default_icon": {
      "16": "path/to/geo-16.png",
      "32": "path/to/geo-32.png"
    }

Нельзя указывать несколько значков одинакового размера.

См. Выбор размеров значков для получения дополнительных сведений.

default_popup String

Путь к файлу HTML, содержащему описание всплывающего окна.

Файл HTML может содержать CSS и JavaScript-файлы с использованием элементов <link> и <script>, как и обычная веб-страница. Однако <script> должен иметь атрибут src для загрузки файла. Не используйте <script> со встроенным кодом, так как у вас возникнет запутанная ошибка политики нарушения содержимого.

В отличие от обычной веб-страницы, JavaScript, выполняющийся во всплывающем окне, может получать доступ ко всем API веб-расширений (при условии, что надстройка имеет соответствующие разрешения).

Это локазуемое свойство.

default_title String

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

Это локазуемое свойство.

theme_icons Array

Это свойство позволяет указать разные значки для тем в зависимости от того, обнаруживает ли Firefox, что тема использует тёмный или светлый текст.

Если это свойство присутствует, это массив, содержащий по крайней мере один объект ThemeIcons. Объект ThemeIcons содержит три обязательных свойства:

"dark"
URL, указывающий на значок. Этот значок отображается, когда активна тема с тёмным текстом (такие как тема Firefox Light и тема по умолчанию, если не указан default_icon).
"light"
URL, указывающий на значок. Этот значок отображается, когда активна тема со светлым текстом (например, тема Firefox Dark).
"size"
Размер двух значков в пикселях.

Значки задаются как URL-адреса, относительные к файлу manifest.json.

Вы должны предоставить 16x16 и 32x32 (для дисплеев с повышенной плотностью пикселей) значки ThemeIcons.

Выбор размеров значков

Значок действия может потребоваться отображать в разных размерах в разных контекстах:

  • Значок отображается в панели инструментов браузера. Более старые версии Firefox поддерживали возможность размещения значка в панели меню браузера (панели, открывающейся при нажатии пользователем на значок "гамбургер"). В этих версиях Firefox значок в панели меню был больше, чем значок в панели инструментов.
  • На дисплее с высокой плотностью пикселей, например, на экране Retina, значки должны быть вдвое больше.

Если браузер не может найти значок нужного размера в данной ситуации, он выберет наиболее подходящий вариант и масштабирует его. Масштабирование может сделать значок размытым, поэтому важно тщательно выбирать размеры значков.

Существует два основных подхода к этому. Вы можете предоставить один значок в формате SVG, и он будет правильно масштабироваться:

"default_icon": "path/to/geo.svg"

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

В Firefox:

  • Высота и ширина значков в панели инструментов по умолчанию составляют 16 * window.devicePixelRatio.
  • Высота и ширина значков в панели меню по умолчанию составляют 32 * window.devicePixelRatio.

Поэтому вы можете указать значки, которые точно соответствуют требованиям как на обычных, так и на Retina-дисплеях, предоставив три файла значков и указав их следующим образом:

"default_icon": {
  "16": "path/to/geo-16.png",
  "32": "path/to/geo-32.png",
  "64": "path/to/geo-64.png"
}

Если Firefox не может найти точное соответствие по размеру, то он выберет самый маленький значок, который больше, чем идеальный размер. Если все значки меньше идеального размера, он выберет самый большой из предоставленных значков.

Пример

"action": {
  "default_icon": {
    "16": "button/geo-16.png",
    "32": "button/geo-32.png"
  }
}

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

 browser.Action.onClicked.addListener(handleClick);
"action": {
  "default_icon": {
    "16": "button/geo-16.png",
    "32": "button/geo-32.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/geo.html"
}

Действие со значком, заголовком и всплывающим окном. Всплывающее окно показывается, когда пользователь нажимает на кнопку.

Совместимость с браузерами

Рабочий стол Мобильное устройство
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet
action 88 88 109 ? 74 15.4 ? ? 109 ? 15.4 ?
browser_style 88 88 109 ? 74 Нет ? ? Нет ? Нет ?
default_area 88 88 109 ? 74 Нет ? ? Нет ? Нет ?
default_icon
88Иконки SVG не поддерживаются.
88["Иконки SVG не поддерживаются.", "'default_icon' должен быть объектом, с явными размерами."]
109 ?
74Иконки SVG не поддерживаются.
15.4Иконки SVG не поддерживаются. Оттененные изображения будут обрабатываться как шаблоны иконки с использованием системного цвета акцента и системного внешнего вида.
? ? Нет ?
15.4Иконки SVG не поддерживаются. Оттененные изображения будут обрабатываться как шаблоны иконки с использованием системного цвета акцента и системного внешнего вида.
?
default_popup 88 88 109 ? 74 15.4 ? ? 109 ? 15.4 ?
default_title 88 88 109 ? 74 15.4 ? ?
109Действия браузера представлены как пункты меню, а заголовок — как метка пункта меню.
? 15.4 ?
theme_icons 88 88 109 ? 74 Нет ? ? Нет ? Нет ?

© 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/manifest.json/action

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API