Add-ons

devtools panels

This feature will become available in Firefox 54.

When an extension provides tools that are of use to developers, it's possible to add a UI for them to the browser's developer tools as a new panel.

Simple example showing the addition of "My panel" to the Developer Tools tabs.

Specifying a developer tools panel

A developer tools panel is added using the devtools.panels API, which in turn needs to be run from a special devtools page.

Add the devtools page by including the devtools_page key in extension's manifest.json and provide the location of the page's HTML file in the extension:

"devtools_page": "devtools-page.html"

From the devtools page, call a script that will add the devtools panel:

<body>
  <script src="devtools.js"></script>
</body>

In the script, create the devtools panel by specifying the panel's title, icon, and HTML file that provides the panel's content:

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

The extension can now run code in the inspected window using devtools.inspectedWindow.eval() or by injecting a content script via the background script by passing a message. You can find more details on how to do this in Extending the developer tools.

Examples

The webextensions-examples repo on GitHub, contains several examples of extensions that use devtools panels:

Document Tags and Contributors

Tags: 
 Contributors to this page: hellosct1, andrewtruongmoz, rebloor
 Last updated by: hellosct1,