devtools.panels.ExtensionPanel

An ExtensionPanel represents a panel added to the devtools. It's the resolution of the Promise returned by browser.devtools.panels.create().

Type

Values of this type are objects. The define two events, onShown and onHidden.

  • onShown is emitted when the panel is shown in the devtools (for example, because the user clicked on the panel's tab in the devtools window).
  • onHidden is emitted when the panel is hidden (for example, because the user switched to a different tab in the devtools window).

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxOperaFirefox for Android
onHiddenChrome Full support YesEdge No support NoFirefox Full support 54Opera Full support YesFirefox Android No support No
onSearchChrome Full support YesEdge No support NoFirefox No support NoOpera Full support YesFirefox Android No support No
onShownChrome Full support YesEdge No support NoFirefox Full support 54Opera Full support YesFirefox Android No support No

Legend

Full support  
Full support
No support  
No support

Examples

This code creates a new panel, then adds handlers for its onShown and onHidden events.

function handleShown(e) {
  console.log(e);
  console.log("panel is being shown");
}

function handleHidden(e) {
  console.log(e);
  console.log("panel is being hidden");
}

browser.devtools.panels.create(
  "My Panel",                 // title
  "icons/star.png",           // icon
  "devtools/panel/panel.html" // content
).then((newPanel) => {
  newPanel.onShown.addListener(handleShown);
  newPanel.onHidden.addListener(handleHidden);
});

Acknowledgements

This API is based on Chromium's chrome.devtools.panels API.

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

Document Tags and Contributors

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