--- title: 開發工具面板 slug: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels tags: - 初學者 - 擴充套件 - 教學 - 用戶介面 translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels ---
{{AddonSidebar}}

Firefox 54 以後可以使用這個功能。

當套件提供開發者使用的工具時，可以以一個瀏覽器開發工具的新面板的形式在開發者工具裡添加一個UI。

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

指定開發工具面板

開發工具面板可以透過 devtools.panels API 添加，因此這必須在特別的開發工具頁面執行。

透過在套件的 manifest.json 添加 devtools_page 鍵並提供HTML檔案來添加開發工具頁面：

"devtools_page": "devtools-page.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 風格的開發者面板，請查看文件光子設計系統。

圖示

更多關於建立開發者工具面板圖示的細節，請查看文件光子設計系統的圖示學。

範例

GitHub上的 webextensions-examples 程式庫包含了建立開發工具面板的 devtools-panels 範例。