MDN wants to talk to developers like you:

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 add-ons manifest.json and provide the location of the page's HTML file in the add-on:

"devtools_page": "devtools-page.html"

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

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

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

  "My Panel",           // title
  "icon.png",           // icon
  "panel.html"          // content
).then((newPanel) => {

The add-on 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.

Document Tags and Contributors

 Contributors to this page: rebloor
 Last updated by: rebloor,