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

js
let 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. Chromium-based browsers and Safari resolve this URL as absolute, while Firefox resolves this URL as relative to the current extension page (unless expressed as an absolute URL, e.g. "/icons/panel.png").

pagePath

string. Specifies an HTML file that defines the content of the panel. It's provided as a URL to an HTML file bundled with your extension. The URL may be resolved as an absolute URL or relative to the current extension page. See the browser compatibility data for more information. The HTML file can include CSS and JavaScript files, just like a normal web page. The JavaScript running in the panel can 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Firefox for Android
Safari on iOS
create
iconPath
pagePath
title

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Examples

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

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

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