devtools.panels.create()

向开发者工具添加一个新的面板。

此函数接受：标题、图标文件的 URL 和 HTML 文件的 URL。它在开发者工具中创建一个新的面板，其内容由 HTML 文件指定。它返回一个Promise，该 Promise 解析为一个ExtensionPanel对象，表示新面板。

语法

js
let creating = browser.devtools.panels.create(
  title,       // string
  iconPath,    // string
  pagePath     // string
)

参数

title

string。面板的标题。这将显示在开发者工具窗口顶部的选项卡行中，并且是用户识别您的面板的主要方式。

iconPath

string。指定将在标题旁边显示的图标。它以捆绑到扩展程序中的图像文件的 URL 形式提供。基于 Chromium 的浏览器和 Safari 将此 URL 解析为绝对 URL，而 Firefox 将此 URL 解析为相对于当前扩展程序页面（除非表示为绝对 URL，例如“/icons/panel.png”）。

pagePath

string。指定定义面板内容的 HTML 文件。它以捆绑到扩展程序中的 HTML 文件的 URL 形式提供。该 URL 可以解析为绝对 URL 或相对于当前扩展程序页面。有关更多信息，请参阅浏览器兼容性数据。HTML 文件可以包含 CSS 和 JavaScript 文件，就像普通的网页一样。在面板中运行的 JavaScript 可以使用开发者工具 API。请参阅扩展开发者工具。

返回值

一个Promise，它将使用表示新面板的ExtensionPanel对象来完成。

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

示例

创建一个新的面板，并向其 onShown 和 onHidden 事件添加侦听器

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

注意：此 API 基于 Chromium 的chrome.devtools.panels API。