devtools.panels.ExtensionPanel

{{AddonSidebar}} 

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

{{Compat}} 

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

{{WebExtExamples}} 

[!NOTE] This API is based on Chromium’s chrome.devtools.panels API.