chrome.browserAction

Описание

Доступность

На следующем рисунке разноцветный квадрат справа от адресной строки — это значок действия браузера. Под значком находится всплывающее окно.

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

Манифест

Зарегистрируйте действие браузера в манифесте расширения следующим образом:

{   "name": "My extension",   ...   "browser_action": {     "default_icon": {                // optional       "16": "images/icon16.png",     // optional       "24": "images/icon24.png",     // optional       "32": "images/icon32.png"      // optional     },     "default_title": "Google Mail",  // optional, shown in tooltip     "default_popup": "popup.html"    // optional   },   ... } 

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

Поскольку устройства с менее распространёнными коэффициентами масштабирования, такими как 1,5x или 1,2x, становятся всё более распространёнными, рекомендуется предоставлять значки разных размеров. Это также гарантирует, что если размер отображаемого значка изменится, вам не придётся тратить дополнительные усилия на создание других значков!

Старый синтаксис регистрации значка по умолчанию все еще поддерживается:

{   "name": "My extension",   ...   "browser_action": {     ...     "default_icon": "images/icon32.png"  // optional     // equivalent to "default_icon": { "32": "images/icon32.png" }   },   ... } 

Части пользовательского интерфейса

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

Икона

Значки действий браузера Chrome имеют ширину и высоту 16 пикселей (независимых от устройства). Размер более крупных значков изменяется в зависимости от размера экрана, но для достижения наилучших результатов используйте квадратный значок размером 16 пикселей.

Установить значок можно двумя способами: используя статическое изображение или элемент HTML5 «холст» . Использование статических изображений проще для простых приложений, но с помощью элемента «холст» можно создавать более динамичные пользовательские интерфейсы, например, с плавной анимацией.

Статические изображения могут быть в любом формате, поддерживаемом WebKit, включая BMP, GIF, ICO, JPEG или PNG. Для распакованных расширений изображения должны быть в формате PNG.

Чтобы установить значок, используйте поле default_icon браузера_action в манифесте или вызовите метод browserAction.setIcon .

Для корректного отображения значка, если плотность пикселей экрана (соотношение size_in_pixel / size_in_dip ) отличается от 1, значок можно определить как набор изображений разного размера. Изображение для отображения будет выбрано из набора, наиболее соответствующего размеру пикселя 16dip. Набор значков может содержать любые спецификации размера значка, и Chrome выберет наиболее подходящий.

Подсказка

Чтобы настроить подсказку, используйте поле default_title объекта browser_action в манифесте или вызовите метод browserAction.setTitle . Вы можете указать строки, зависящие от локали, для поля default_title ; подробности см. в разделе «Интернационализация» .

Значок

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

Поскольку место на значке ограничено, он должен содержать не более 4 символов.

Задайте текст и цвет значка с помощью browserAction.setBadgeText и browserAction.setBadgeBackgroundColor соответственно.

Неожиданно возникнуть

Если действие браузера включает всплывающее окно, оно появляется при щелчке по значку расширения. Всплывающее окно может содержать любой HTML-контент по вашему выбору, и его размер автоматически подстраивается под его содержимое. Размер всплывающего окна не может быть меньше 25x25 и больше 800x600.

Чтобы добавить всплывающее окно к действию браузера, создайте HTML-файл с его содержимым. Укажите HTML-файл в поле default_popup параметра browser_action в манифесте или вызовите метод browserAction.setPopup .

Советы

Для достижения наилучшего визуального эффекта следуйте следующим рекомендациям:

• Используйте действия браузера для функций, которые имеют смысл на большинстве страниц.
• Не используйте действия браузера для функций, которые имеют смысл только для нескольких страниц. Вместо этого используйте действия на странице .
• Используйте крупные, яркие значки, максимально использующие пространство размером 16x16 пикселей. Значки действий в браузере должны выглядеть немного крупнее и насыщеннее, чем значки действий на странице.
• Не пытайтесь копировать монохромный значок меню Google Chrome. Это плохо сочетается с темами, да и расширения должны немного выделяться.
• Используйте альфа-прозрачность, чтобы смягчить края значка. Поскольку многие используют темы, ваш значок должен хорошо смотреться на фоне самых разных цветов.
• Не стоит постоянно анимировать значок. Это просто раздражает.

Примеры

Простые примеры использования действий браузера можно найти в каталоге examples/api/browserAction . Другие примеры и помощь в просмотре исходного кода см. в разделе «Примеры» .

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
): Promise<extensionTypes.ColorArray>

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.onClicked.addListener(
  callback: function,
)