sidebarAction.setPanel()
Sets the sidebar's panel: that is, the HTML document that defines the content of this sidebar.
Types of panel
Sidebars always have a "manifest panel", which is the panel defined in the sidebar_action
manifest key.
If you set a new panel using setPanel()
, and include the tabId
option, then the panel is set only for the given tab. This panel is referred to as the "tab-specific panel".
If you set a new panel using setPanel()
, and include the windowId
option, then the panel is set only for the given window. This panel is referred to as the "window-specific panel", and will appear in all tabs of that window that do not have a tab-specific panel set.
If you set a new panel using setPanel()
, and omit both the tabId
and windowId
options, then this sets the "global panel". The global panel will then appear in all tabs that do not have a tab-specific panel set and whose window does not have a window-specific panel.
Syntax
js
browser.sidebarAction.setPanel(
details // object
)
Parameters
details
-
object
. An object with the following properties:panel
-
string
ornull
. The panel to load into the sidebar, specified as a URL pointing to an HTML document, ornull
, or an empty string.This can point to a file packaged within the extension (for example, created using
runtime.getURL
), or a remote document (e.g.https://example.org/
). It must be a valid URL.If
panel
isnull
or""
, then a previously set panel will be removed, so that:- If
tabId
is specified, and the tab has a tab-specific panel set, then the tab will inherit the panel from the window it belongs to. - If
windowId
is specified, and the window has a window-specific panel set, then the window will inherit the global panel. - Otherwise, the global panel will be reset to the manifest panel.
- If
tabId
Optional-
integer
. Sets the panel only for the given tab. windowId
Optional-
integer
. Sets the panel only for the given window.
- If
windowId
andtabId
are both specified, the function fails and the panel is not set. - If
windowId
andtabId
are both omitted, the global panel is set.
Examples
This code toggles the sidebar document when the user clicks a browser action:
js
let thisPanel = browser.runtime.getURL("/this.html");
let thatPanel = browser.runtime.getURL("/that.html");
function toggle(panel) {
if (panel === thisPanel) {
browser.sidebarAction.setPanel({panel: thatPanel});
} else {
browser.sidebarAction.setPanel({panel: thisPanel});
}
}
browser.browserAction.onClicked.addListener(() => {
browser.sidebarAction.getPanel({}).then(toggle);
});
Browser compatibility
BCD tables only load in the browser
Note: This API is based on Opera's chrome.sidebarAction
API.