MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

devtools.panels.create()

Adds a new panel to the devtools.

This function takes: a title, a URL to an icon file, and a URL to an HTML file. It creates a new panel in the devtools, whose content is specified by the HTML file. It returns a Promise that resolves to an ExtensionPanel object representing the new panel.

Syntax

var creating = browser.devtools.panels.create(
  title,       // string
  iconPath,    // string
  pagePath     // string
)

Parameters

title
string. The panel's title. This will appear in the row of tabs along the top of the devtools window, and is the main way the user will be able to identify your panel.
iconPath
string. Specifies an icon which will be shown next to the title. It's provided as a URL to an image file that's been bundled with your extension. The URL should be relative to the manifest.json file itself.
pagePath
string. Specifies an HTML file that defines the actual content of the panel. It's provided as a URL to an HTML file that's been bundled with your extension. The URL should be relative to the manifest.json file itself. The HTML file may include CSS and JavaScript files, just like a normal web page. The JavaScript running in the panel will be able to use the devtools APIs. See Extending the developer tools.

Return value

A Promise that will be fulfilled with an ExtensionPanel object representing the new panel.

Browser compatibility

ChromeEdgeFirefoxFirefox for AndroidOpera
Basic supportYesNo54NoYes

Examples

Create a new panel, and add listeners to its onShown and onHidden events:

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

function handleHidden() {
  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 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: andrewtruongmoz, wbamberg
 Last updated by: andrewtruongmoz,