browserAction
Adds a button to the browser's toolbar.
A browser action is a button in the browser's toolbar.
You can associate a popup with the button. The popup is specified using HTML, CSS and JavaScript, just like a normal web page. JavaScript running in the popup gets access to all the same WebExtension APIs as your background scripts, but its global context is the popup, not the current page displayed in the browser. To affect web pages you need to communicate with them via messages.
If you specify a popup, it will be shown — and the content will be loaded — when the user clicks the icon. If you do not specify a popup, then when the user clicks the icon an event is dispatched to your extension.
You can define most of a browser action's properties declaratively using the browser_action key in the manifest.json.
With the browserAction API, you can:
- use
browserAction.onClicked to listen for clicks on the icon.
- get and set the icon's properties — icon, title, popup, and so on. You can get and set these globally across all tabs, or for a specific tab by passing the tab ID as an additional argument.
Events
-
browserAction.onClicked
-
Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
ColorArray |
Yes |
14 |
45 |
? |
Yes |
14 |
? |
? |
79 |
? |
15 |
? |
ImageDataType |
Yes |
14 |
45 |
? |
Yes |
14 |
? |
? |
79 |
? |
15 |
? |
disable |
Yes |
14 |
45 |
? |
Yes |
14 |
? |
? |
79 |
? |
15 |
? |
enable |
Yes |
14 |
45 |
? |
Yes |
14 |
? |
? |
79 |
? |
15 |
? |
getBadgeBackgroundColor |
Yes |
14 |
45 |
? |
Yes |
14Always returns a red ColorArray.
|
? |
? |
79 |
? |
15Always returns a red ColorArray.
|
? |
getBadgeText |
Yes |
14 |
45 |
? |
Yes |
14 |
? |
? |
79 |
? |
15 |
? |
getBadgeTextColor |
No |
No |
63 |
? |
No |
No |
? |
? |
79 |
? |
No |
? |
getPopup |
Yes |
79 |
45 |
? |
Yes |
14 |
? |
? |
57 |
? |
15 |
? |
getTitle |
Yes |
15 |
45 |
? |
Yes |
14 |
? |
? |
55 |
? |
15The API exists, but the title not visible in the UI.
|
? |
isEnabled |
No |
No |
59 |
? |
No |
No |
? |
? |
79 |
? |
No |
? |
onClicked |
Yes |
14 |
45 |
? |
Yes |
14 |
? |
? |
55 |
? |
15 |
? |
openPopup |
67 |
79 |
57["Since Firefox 108, user interaction is no longer required to call this API when the extensions.openPopupWithoutUserGesture.enabled preference is set (bug 1799344).", "Support for the windowId parameter was added in Firefox 108."]
|
? |
54 |
16 |
? |
? |
79 |
? |
16 |
? |
setBadgeBackgroundColor |
Yes |
14 |
45
45–58Tab-specific badge background color is not cleared when a new page is loaded.
|
? |
Yes |
14The API exists, but has no effect.
|
? |
? |
79 |
? |
15The API exists, but has no effect.
|
? |
setBadgeText |
Yes |
14 |
45
45–58Tab-specific badge text is not cleared when a new page is loaded.
|
? |
Yes |
14 |
? |
? |
79 |
? |
15 |
? |
setBadgeTextColor |
No |
No |
63 |
? |
No |
No |
? |
? |
79 |
? |
No |
? |
setIcon |
YesBefore Chrome 23, path couldn't specify multiple icon files, but had to be a string specifying a single icon path.
|
14["This call is not persisted.", "The imageData parameter is not accepted.", "The path parameter is required."]
|
45
45–58Tab-specific icons are not cleared when a new page is loaded.
|
? |
15 |
14 |
? |
? |
79 |
? |
15 |
? |
setPopup |
Yes |
14 |
45
45–58Tab-specific popups are not cleared when a new page is loaded.
|
? |
Yes |
14 |
? |
? |
57
57–58Tab-specific popups are not cleared when a new page is loaded.
|
? |
15 |
? |
setTitle |
Yes |
15 |
45
45–58Tab-specific titles are not cleared when a new page is loaded.
|
? |
Yes |
14 |
? |
? |
55
55–58Tab-specific titles are not cleared when a new page is loaded.
|
? |
15The API exists, but the title not visible in the UI.
|
? |