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

BCD tables only load in the browser

Examples

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

js

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);
});

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