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 canvas . Использование статических изображений проще для простых приложений, но вы можете создавать более динамичные пользовательские интерфейсы, такие как плавная анимация, используя элемент canvas.

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

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

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

Подсказка

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

Значок

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

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

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

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

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

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

Советы

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

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

Примеры

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

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
)

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
)

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
)

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
)

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