我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

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:

文件標籤與貢獻者

 此頁面的貢獻者: hellosct1, andrewtruongmoz, rebloor
 最近更新: hellosct1,