chrome.action (original) (raw)

Description

Use the chrome.action API to control the extension's icon in the Google Chrome toolbar.

The action icons are displayed in the browser toolbar next to the omnibox. After installation, these appear in the extensions menu (the puzzle piece icon). Users can pin your extension icon to the toolbar.

Availability

Manifest

The following keys must be declared in the manifest to use this API.

"action"

To use the chrome.action API, specify a "manifest_version" of 3 and include the "action" key in your manifest file.

{
  "name": "Action Extension",
  ...
  "action": {
    "default_icon": {              // optional
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"    // optional
    },
    "default_title": "Click Me",   // optional, shown in tooltip
    "default_popup": "popup.html"  // optional
  },
  ...
}

The "action" key (along with its children) is optional. When it isn't included, your extension is still shown in the toolbar to provide access to the extension's menu. For this reason, we recommend that you always include at least the "action" and "default_icon" keys.

Concepts and usage

Parts of the UI

Icon

The icon is the main image on the toolbar for your extension, and is set by the "default_icon" key in your manifest's "action" key. Icons must be 16 device-independent pixels (DIPs) wide and tall.

The "default_icon" key is a dictionary of sizes to image paths. Chrome uses these icons to choose which image scale to use. If an exact match is not found, Chrome selects the closest available and scales it to fit the image, which might affect image quality.

Because devices with less-common scale factors like 1.5x or 1.2x are becoming more common, we encourage you to provide multiple sizes for your icons. This also futureproofs your extension against potential icon display size changes. However, if only providing a single size, the "default_icon" key can also be set to a string with the path to a single icon instead of a dictionary.

You can also call action.setIcon() to set your extension's icon programmatically by specifying a different image path or providing a dynamically-generated icon using the HTML canvas element, or, if setting from an extension service worker, the offscreen canvas API.

const canvas = new OffscreenCanvas(16, 16);
const context = canvas.getContext('2d');
context.clearRect(0, 0, 16, 16);
context.fillStyle = '#00FF00';  // Green
context.fillRect(0, 0, 16, 16);
const imageData = context.getImageData(0, 0, 16, 16);
chrome.action.setIcon({imageData: imageData}, () => { /* ... */ });

For packed extensions (installed from a .crx file), images can be in most formats that the Blink rendering engine can display, including PNG, JPEG, BMP, ICO, and others. SVG isn't supported. Unpacked extensions must use PNG images.

Tooltip (title)

The tooltip, or title, appears when the user holds their mouse pointer over the extension's icon in the toolbar. It's also included in the accessible text spoken by screen readers when the button gets focus.

The default tooltip is set using the "default_title" field of the "action" key in manifest.json. You can also set it programmatically by calling action.setTitle().

Badge

Actions can optionally display a "badge" — a bit of text layered over the icon. This lets you update the action to display a small amount of information about the state of the extension, such as a counter. The badge has a text component and a background color. Because space is limited, we recommend that badge text use four or fewer characters.

To create a badge, set it programmatically by calling action.setBadgeBackgroundColor() andaction.setBadgeText(). There isn't a default badge setting in the manifest. Badge color values can be either an array of four integers between 0 and 255 that make up the RGBA color of the badge or a string with a CSS color value.

chrome.action.setBadgeBackgroundColor(
  {color: [0, 255, 0, 0]},  // Green
  () => { /* ... */ },
);

chrome.action.setBadgeBackgroundColor(
  {color: '#00FF00'},  // Also green
  () => { /* ... */ },
);

chrome.action.setBadgeBackgroundColor(
  {color: 'green'},  // Also, also green
  () => { /* ... */ },
);

An action's popup is shown when the user clicks on the extension's action button in the toolbar. The popup can contain any HTML contents you like, and will be automatically sized to fit its contents. The popup's size must be between 25x25 and 800x600 pixels.

The popup is initially set by the "default_popup" property in the "action" key in themanifest.json file. If present, this property should point to a relative path within the extension directory. It can also be updated dynamically to point to a different relative path using theaction.setPopup() method.

Use cases

Per-tab state

Extension actions can have different states for each tab. To set a value for an individual tab, use the tabId property in the action API's setting methods. For example, to set the badge text for a specific tab, do something like the following:

function getTabId() { /* ... */}
function getTabBadge() { /* ... */}

chrome.action.setBadgeText(
  {
    text: getTabBadge(tabId),
    tabId: getTabId(),
  },
  () => { ... }
);

If the tabId property is left out, the setting is treated as a global setting. Tab-specific settings take priority over global settings.

Enabled state

By default, toolbar actions are enabled (clickable) on every tab. You can change this default by setting the default_state property in the action key of the manifest. Ifdefault_state is set to "disabled", the action is disabled by default and must be enabled programmatically to be clickable. If default_state is set to "enabled" (the default), the action is enabled and clickable by default.

You can control the state programmatically using the action.enable() and action.disable()methods. This only affects whether the popup (if any) or action.onClicked event is sent to your extension; it doesn't affect the action's presence in the toolbar.

Examples

The following examples show some common ways that actions are used in extensions. To try this API, install the Action API example from the chrome-extension-samplesrepository.

It's common for an extension to display a popup when the user clicks the extension's action. To implement this in your own extension, declare the popup in your manifest.json and specify the content that Chrome should display in the popup.

// manifest.json
{
  "name": "Action popup demo",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Click to view a popup",
    "default_popup": "popup.html"
  }
}

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    html {
      min-height: 5em;
      min-width: 10em;
      background: salmon;
    }
  </style>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Inject a content script on click

A common pattern for extensions is to expose their primary feature using the extension's action. The following example demonstrates this pattern. When the user clicks the action, the extension injects a content script into the current page. The content script then displays an alert to verify that everything worked as expected.

// manifest.json
{
  "name": "Action script injection demo",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Click to show an alert"
  },
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  }
}

// background.js
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['content.js']
  });
});

// content.js
alert('Hello, world!');

Emulate actions with declarativeContent

This example shows how an extension's background logic can (a) disable an action by default and (b) use declarativeContent to enable the action on specific sites.

// service-worker.js

// Wrap in an onInstalled callback to avoid unnecessary work
// every time the service worker is run
chrome.runtime.onInstalled.addListener(() => {
  // Page actions are disabled by default and enabled on select tabs
  chrome.action.disable();

  // Clear all rules to ensure only our expected rules are set
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    // Declare a rule to enable the action on example.com pages
    let exampleRule = {
      conditions: [
        new chrome.declarativeContent.PageStateMatcher({
          pageUrl: {hostSuffix: '.example.com'},
        })
      ],
      actions: [new chrome.declarativeContent.ShowAction()],
    };

    // Finally, apply our new array of rules
    let rules = [exampleRule];
    chrome.declarativeContent.onPageChanged.addRules(rules);
  });
});

Types

Properties

TabDetails

Properties

UserSettings

The collection of user-specified settings relating to an extension's action.

Properties

UserSettingsChange

Properties

Methods

disable()

chrome.action.disable(
  tabId?: number,
): Promise

Disables the action for a tab.

Parameters

Returns

enable()

chrome.action.enable(
  tabId?: number,
): Promise

Enables the action for a tab. By default, actions are enabled.

Parameters

Returns

getBadgeBackgroundColor()

chrome.action.getBadgeBackgroundColor(
  details: TabDetails,
): Promise<extensionTypes.ColorArray>

Gets the background color of the action.

Parameters

Returns

getBadgeText()

chrome.action.getBadgeText(
  details: TabDetails,
): Promise

Gets the badge text of the action. If no tab is specified, the non-tab-specific badge text is returned. If displayActionCountAsBadgeText is enabled, a placeholder text will be returned unless the declarativeNetRequestFeedback permission is present or tab-specific badge text was provided.

Parameters

Returns

getBadgeTextColor()

chrome.action.getBadgeTextColor(
  details: TabDetails,
): Promise<extensionTypes.ColorArray>

Gets the text color of the action.

Parameters

Returns

chrome.action.getPopup(
  details: TabDetails,
): Promise

Gets the html document set as the popup for this action.

Parameters

Returns

getTitle()

chrome.action.getTitle(
  details: TabDetails,
): Promise

Gets the title of the action.

Parameters

Returns

getUserSettings()

chrome.action.getUserSettings(): Promise<UserSettings>

Returns the user-specified settings relating to an extension's action.

Returns

isEnabled()

chrome.action.isEnabled(
  tabId?: number,
): Promise

Indicates whether the extension action is enabled for a tab (or globally if no tabId is provided). Actions enabled using only declarativeContent always return false.

Parameters

Returns

chrome.action.openPopup(
  options?: OpenPopupOptions,
): Promise

Opens the extension's popup. Between Chrome 118 and Chrome 126, this is only available to policy installed extensions.

Parameters

Returns

setBadgeBackgroundColor()

chrome.action.setBadgeBackgroundColor(
  details: object,
): Promise

Sets the background color for the badge.

Parameters

Returns

setBadgeText()

chrome.action.setBadgeText(
  details: object,
): Promise

Sets the badge text for the action. The badge is displayed on top of the icon.

Parameters

Returns

setBadgeTextColor()

chrome.action.setBadgeTextColor(
  details: object,
): Promise

Sets the text color for the badge.

Parameters

Returns

setIcon()

chrome.action.setIcon(
  details: object,
): Promise

Sets the icon for the action. The icon can be specified either as the path to an image file or as the pixel data from a canvas element, or as dictionary of either one of those. Either the path or the imageData property must be specified.

Parameters

Returns

chrome.action.setPopup(
  details: object,
): Promise

Sets the HTML document to be opened as a popup when the user clicks on the action's icon.

Parameters

Returns

setTitle()

chrome.action.setTitle(
  details: object,
): Promise

Sets the title of the action. This shows up in the tooltip.

Parameters

Returns

Events

onClicked

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

Fired when an action icon is clicked. This event will not fire if the action has a popup.

Parameters

onUserSettingsChanged

chrome.action.onUserSettingsChanged.addListener(
  callback: function,
)

Fired when user-specified settings relating to an extension's action change.

Parameters