действие
| Тип | 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 | Необязательное, по умолчанию Используйте это, чтобы включить в всплывающее окно таблицу стилей, которая сделает его внешний вид согласованным с пользовательским интерфейсом браузера и с другими надстройками, использующими свойство В Firefox таблицу стилей можно увидеть по адресу chrome://browser/content/extension.css или chrome://browser/content/extension-mac.css на macOS. При установке размеров обратите внимание, что этот лист стилей в настоящее время устанавливает Стили браузера описывает классы, которые вы можете применять к элементам во всплывающем окне, чтобы получить определённые стили. Надстройка-пример latest-download использует Примечание: Установка
|
default_area | String | Определяет часть браузера, в которой кнопка будет первоначально размещена. Это строка, которая может принимать одно из четырёх значений:
Это свойство поддерживается только в Firefox. Это свойство необязательное и по умолчанию равно "menupanel". Firefox запоминает настройку Надстройка не может изменить расположение кнопки после её установки, но пользователь может переместить кнопку с помощью встроенного механизма настройки пользовательского интерфейса браузера. |
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-файлы с использованием элементов В отличие от обычной веб-страницы, JavaScript, выполняющийся во всплывающем окне, может получать доступ ко всем API веб-расширений (при условии, что надстройка имеет соответствующие разрешения). Это локазуемое свойство. |
default_title | String | Подсказка для кнопки, отображаемая, когда пользователь перемещает указатель мыши над ней. Если кнопка добавлена в панель меню браузера, она также отображается под значком приложения. Это локазуемое свойство. |
theme_icons | Array | Это свойство позволяет указать разные значки для тем в зависимости от того, обнаруживает ли Firefox, что тема использует тёмный или светлый текст. Если это свойство присутствует, это массив, содержащий по крайней мере один объект
Значки задаются как URL-адреса, относительные к файлу manifest.json. Вы должны предоставить 16x16 и 32x32 (для дисплеев с повышенной плотностью пикселей) значки |
Выбор размеров значков
Значок действия может потребоваться отображать в разных размерах в разных контекстах:
- Значок отображается в панели инструментов браузера. Более старые версии 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