devtools panels
Note:This feature is available since 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.
Specifying a developer tools panel
A developer tools panel is added using thedevtools.panels API, which in turn needs to be run from a special devtools page.
Add the devtools page by including thedevtools_page key in extension'smanifest.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 usingdevtools.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 inExtending the developer tools.
Developer panel design
For details on how to design your developer panel's web page to match the style of Firefox, see theAcorn Design System documentation.
Icons
For details on how to create icons to use with your developer tools panel, seeIconography in theAcorn Design System documentation.
Examples
Thewebextensions-examples repository on GitHub includes thedevtools-panels example which implements a devtools panel.