chrome.action

Description
Use actions to put icons in the main Google Chrome toolbar, to the right of the address bar. Actions can be set to take action on all pages (default_state: enabled) or only the current page (default_state: disabled). If an action is default disabled, the action appears grayed out when inactive. In addition to its icon, an action can also have a tooltip, a badge, and a popup.

This documentation is in active development. We're planning to expand the introduction section to provide more context and guidance on how to use this API. This work is tracked in issue #193.

Summary

Types
TabDetails
Methods
disable
chrome.action.disable(tabId: number, callback: function)
enable
chrome.action.enable(tabId: number, callback: function)
getBadgeBackgroundColor
chrome.action.getBadgeBackgroundColor(details: TabDetails, callback: function)
getBadgeText
chrome.action.getBadgeText(details: TabDetails, callback: function)
getPopup
chrome.action.getPopup(details: TabDetails, callback: function)
getTitle
chrome.action.getTitle(details: TabDetails, callback: function)
setBadgeBackgroundColor
chrome.action.setBadgeBackgroundColor(details: object, callback: function)
setBadgeText
chrome.action.setBadgeText(details: object, callback: function)
setIcon
chrome.action.setIcon(details: object, callback: function)
setPopup
chrome.action.setPopup(details: object, callback: function)
setTitle
chrome.action.setTitle(details: object, callback: function)
Events
onClicked

Types

TabDetails

Properties

tabId
number optional
The ID of the tab to query state for. If no tab is specified, the non-tab-specific state is returned.

Methods

disable

chrome.action.disable(tabId: number, callback: function)

Disables the action for a tab.

Parameters

tabId
number
The id of the tab for which you want to modify the action.
callback
function
The callback parameter should be a function that looks like this:
() => {...}

enable

chrome.action.enable(tabId: number, callback: function)

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

Parameters

tabId
number
The id of the tab for which you want to modify the action.
callback
function
The callback parameter should be a function that looks like this:
() => {...}

getBadgeBackgroundColor

chrome.action.getBadgeBackgroundColor(details: TabDetails, callback: function)

Gets the background color of the action.

Parameters

details
TabDetails
callback
function
The callback parameter should be a function that looks like this:
(result: browserAction.ColorArray) => {...}
- result
  browserAction.ColorArray

getBadgeText

chrome.action.getBadgeText(details: TabDetails, callback: function)

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

details
TabDetails
callback
function
The callback parameter should be a function that looks like this:
(result: string) => {...}
- result
  string

getPopup

chrome.action.getPopup(details: TabDetails, callback: function)

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

Parameters

details
TabDetails
callback
function
The callback parameter should be a function that looks like this:
(result: string) => {...}
- result
  string

getTitle

chrome.action.getTitle(details: TabDetails, callback: function)

Gets the title of the action.

Parameters

details
TabDetails
callback
function
The callback parameter should be a function that looks like this:
(result: string) => {...}
- result
  string

setBadgeBackgroundColor

chrome.action.setBadgeBackgroundColor(details: object, callback: function)

Sets the background color for the badge.

Parameters

details
object
- color
  string | browserAction.ColorArray
  An array of four integers in the range [0,255] that make up the RGBA color of the badge. For example, opaque red is [255, 0, 0, 255]. Can also be a string with a CSS value, with opaque red being #FF0000 or #F00.
- tabId
  number optional
  Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.
callback
function
The callback parameter should be a function that looks like this:
() => {...}

setBadgeText

chrome.action.setBadgeText(details: object, callback: function)

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

Parameters

details
object
- tabId
  number optional
  Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.
- text
  string
  Any number of characters can be passed, but only about four can fit in the space.
callback
function
The callback parameter should be a function that looks like this:
() => {...}

setIcon

chrome.action.setIcon(details: object, callback: function)

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

details
object
- imageData
  browserAction.ImageDataType | object optional
  Either an ImageData object or a dictionary {size -> ImageData} representing icon to be set. If the icon is specified as a dictionary, the actual image to be used is chosen depending on screen's pixel density. If the number of image pixels that fit into one screen space unit equals scale, then image with size scale * n will be selected, where n is the size of the icon in the UI. At least one image must be specified. Note that 'details.imageData = foo' is equivalent to 'details.imageData = {'16': foo}'
- path
  string | object optional
  Either a relative image path or a dictionary {size -> relative image path} pointing to icon to be set. If the icon is specified as a dictionary, the actual image to be used is chosen depending on screen's pixel density. If the number of image pixels that fit into one screen space unit equals scale, then image with size scale * n will be selected, where n is the size of the icon in the UI. At least one image must be specified. Note that 'details.path = foo' is equivalent to 'details.path = {'16': foo}'
- tabId
  number optional
  Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.
callback
function
The callback parameter should be a function that looks like this:
() => {...}

setPopup

chrome.action.setPopup(details: object, callback: function)

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

Parameters

details
object
- popup
  string
  The html file to show in a popup. If set to the empty string (''), no popup is shown.
- tabId
  number optional
  Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.
callback
function
The callback parameter should be a function that looks like this:
() => {...}

setTitle

chrome.action.setTitle(details: object, callback: function)

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

Parameters

details
object
- tabId
  number optional
  Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.
- title
  string
  The string the action should display when moused over.
callback
function
The callback parameter should be a function that looks like this:
() => {...}

Events

onClicked

chrome.action.onClicked.addListener(listener: function)

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

Event

listener
function
The listener parameter should be a function that looks like this:
(tab: tabs.Tab) => {...}
- tab
  tabs.Tab