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。