Sets the icon for the browser action. The icon can be specified either as the path to an image file, the pixel data from a <canvas>
element, or a dictionary of either one of those. Either the path or the imageData property must be specified.
Syntax
chrome.browserAction.setIcon( details, // object function() {...} // optional function )
This API is also available as browser.browserAction.setIcon()
in a version that returns a promise.
Parameters
details
object
.-
imageData
Optional
orbrowserAction.ImageDataType
. Either anobject
ImageData
object or a dictionary {size -> ImageData} representing the icon to be set. If the icon is specified as a dictionary, the actual image to be used is chosen depending on the screen's pixel density. If the number of image pixels that fit into one screen space unit equalsscale
, then an image with sizescale
* 19 will be selected. Initially only scales 1 and 2 will be supported. At least one image must be specified. Note thatdetails.imageData = foo
is equivalent todetails.imageData = {'19': foo}
.path
Optional
orstring
. Either a relative image path or a dictionary {size -> relative image path} pointing to the icon to be set. If the icon is specified as a dictionary, the actual image to be used is chosen depending on the screen's pixel density. If the number of image pixels that fit into one screen space unit equalsobject
scale
, then an image with sizescale
* 19 will be selected. Initially only scales 1 and 2 will be supported. At least one image must be specified. Note thatdetails.path = foo
is equivalent todetails.imageData = {'19': foo}
.tabId
Optionalinteger
. Limits the change to when a particular tab is selected. Automatically resets when the tab is closed.
callback
Optionalfunction
.
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Chrome | Edge | Firefox | Firefox for Android | Opera | |
---|---|---|---|---|---|
Basic support | Yes | Yes | 45.0 | No | 33 |
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);
The code below sets the icon using an ImageData
object:
function getImageData() { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100); return ctx.getImageData(50, 50, 100, 100); } chrome.browserAction.onClicked.addListener(() => { chrome.browserAction.setIcon({imageData: getImageData()}); });
The following snippet updates the icon when the user clicks it, but only for the active tab:
chrome.browserAction.onClicked.addListener((tab) => { chrome.browserAction.setIcon({ tabId: tab.id, path: "icons/updated-48.png" }); });
Example add-ons
This API is based on Chromium's chrome.browserAction
API. This documentation is derived from browser_action.json
in the Chromium code.
Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
// Copyright 2015 The Chromium Authors. All rights reserved. // // Redistribution and use in source and binary forms, with or without // modification, are permitted provided that the following conditions are // met: // // * Redistributions of source code must retain the above copyright // notice, this list of conditions and the following disclaimer. // * Redistributions in binary form must reproduce the above // copyright notice, this list of conditions and the following disclaimer // in the documentation and/or other materials provided with the // distribution. // * Neither the name of Google Inc. nor the names of its // contributors may be used to endorse or promote products derived from // this software without specific prior written permission. // // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT // OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.