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 解析為絕對路徑,而 Firefox 則會將此 URL 解析為相對於當前擴充套件頁面(除非它被表示為絕對 URL,例如 "/icons/panel.png")。

pagePath

string。指定一個 HTML 檔案,該檔案定義了面板的內容。它以 URL 的形式提供,指向已包含在擴充套件程式中的 HTML 檔案。該 URL 可能會被解析為絕對 URL 或相對於當前擴充套件頁面。有關更多資訊,請參閱瀏覽器相容性資料。HTML 檔案可以像普通網頁一樣包含 CSS 和 JavaScript 檔案。在面板中執行的 JavaScript 可以使用開發者工具 API。請參閱 擴充套件開發者工具

返回值

一個 Promise,它將被一個 ExtensionPanel 物件(代表新面板) fulfilled。

示例

建立一個新面板,併為其 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。