開發者工具面板
注意：此功能自 Firefox 54 起可用。
當擴充套件程式提供對開發者有用的工具時，可以將這些工具的使用者介面新增為瀏覽器開發者工具中的一個新面板。
指定開發者工具面板
開發者工具面板是使用 devtools.panels API 新增的，該 API 需要從一個特殊的 devtools 頁面執行。
透過在擴充套件程式的 manifest.json 中包含 devtools_page 鍵來新增 devtools 頁面，並在擴充套件程式中提供該頁面的 HTML 檔案位置。
json
"devtools_page": "devtools-page.html"
從 devtools 頁面呼叫一個指令碼來新增 devtools 面板。
html
<body>
<script src="devtools.js"></script>
</body>
在指令碼中，透過指定面板的標題、圖示以及提供面板內容的 HTML 檔案來建立 devtools 面板。
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);
});
該擴充套件程式現在可以使用 devtools.inspectedWindow.eval() 在被檢查的視窗中執行程式碼，或者通過後臺指令碼傳遞訊息來注入內容指令碼。您可以在 擴充套件開發者工具 中找到更多相關資訊。
開發者面板設計
有關如何設計開發者面板網頁以匹配 Firefox 風格的詳細資訊，請參閱 Acorn Design System 文件。
圖示
有關如何建立要與您的開發者工具面板一起使用的圖示的詳細資訊，請參閱 Acorn Design System 文件中的 圖示製作。
示例
GitHub 上的 webextensions-examples 儲存庫包含了實現 devtools 面板的 devtools-panels 示例。