开发者工具面板

注意：此功能自 Firefox 54 起可用。

当扩展提供对开发人员有用的工具时，可以为它们在浏览器的开发者工具中添加一个 UI 作为新的面板。

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

指定开发者工具面板

开发者工具面板是使用devtools.panels API 添加的，该 API 又需要从一个特殊的开发者工具页面运行。

通过在扩展的manifest.json 中包含devtools_page 键并提供扩展中页面的 HTML 文件位置来添加开发者工具页面。

json

"devtools_page": "devtools-page.html"

从开发者工具页面调用一个脚本，该脚本将添加开发者工具面板。

html

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

在脚本中，通过指定面板的标题、图标和提供面板内容的 HTML 文件来创建开发者工具面板。

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

扩展现在可以使用devtools.inspectedWindow.eval() 或通过传递消息通过后台脚本注入内容脚本在被检查的窗口中运行代码。你可以在扩展开发者工具中找到有关如何执行此操作的更多详细信息。

开发者面板设计

有关如何设计开发者面板的网页以匹配 Firefox 样式的详细信息，请参阅Acorn 设计系统文档。

图标

有关如何创建与开发者工具面板一起使用的图标的详细信息，请参阅图标在Acorn 设计系统文档。

示例

GitHub 上的webextensions-examples 存储库包含devtools-panels 示例，该示例实现了开发者工具面板。