browserAction.setIcon()

Sets the icon for the browser 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.

Syntax

browser.browserAction.setIcon(
  details,         // object
  function() {...} // optional function
)

Parameters

details
object.
imageDataOptional
browserAction.ImageDataType or object. 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 * 19 will be selected. Initially only scales 1 and 2 will be supported. At least one image must be specified. Note that 'details.imageData = foo' is equivalent to 'details.imageData = {'19': foo}'
pathOptional
string or object. 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 * 19 will be selected. Initially only scales 1 and 2 will be supported. At least one image must be specified. Note that 'details.path = foo' is equivalent to 'details.imageData = {'19': foo}'
tabIdOptional
integer. Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.
callbackOptional
function.

Browser compatibility

EdgeFirefoxChromeOpera
Basic support?45.0Yes33
Firefox
Basic supportNo

Examples

The code below uses a browser action to toggle a listener for webRequest.onHeadersReceived, and uses setIcon() to indicate whether listening is on or off:

function logResponseHeaders(requestDetails) {
  console.log(requestDetails);
}

function startListening() {
  chrome.webRequest.onHeadersReceived.addListener(
    logResponseHeaders,
    {urls: ["<all_urls>"]},
    ["responseHeaders"]
  );
  chrome.browserAction.setIcon({path: "icons/listening-on.svg"});
}

function stopListening() {
  chrome.webRequest.onHeadersReceived.removeListener(logResponseHeaders);
  chrome.browserAction.setIcon({path: "icons/listening-off.svg"});
}

function toggleListener() {
  if (chrome.webRequest.onHeadersReceived.hasListener(logResponseHeaders)) {
    stopListening();
  } else {
    startListening();
  }
}

chrome.browserAction.onClicked.addListener(toggleListener);

Example add-ons

Acknowledgements

This API is based on Chromium's chrome.browserAction API. This documentation is derived from browser_action.json in the Chromium code.

Document Tags and Contributors

 Contributors to this page: wbamberg
 Last updated by: wbamberg,