擴充開發人員工具

開發人員工具擴充功能會透過新增至擴充功能的開發人員工具頁面，存取開發人員工具專屬的擴充功能 API，為 Chrome 開發人員工具新增功能。

開發人員工具專用的擴充功能 API 包括：

• devtools.inspectedWindow
• devtools.network
• devtools.panels
• devtools.recorder
• devtools.performance

開發人員工具頁面

開發人員工具視窗開啟時，開發人員工具擴充功能會建立其開發人員工具頁面的例項，只要視窗開啟，這個例項就會存在。這個頁面可存取 DevTools API 和擴充功能 API，並執行下列操作：

• 使用 devtools.panels API 建立面板並與其互動，包括在開發人員工具視窗中，將其他擴充功能頁面設為面板或側欄。
• 取得檢查視窗的相關資訊，並使用 devtools.inspectedWindow API 評估檢查視窗中的程式碼。
• 使用 devtools.network API 取得網路要求相關資訊。
• 使用 devtools.recorder API 擴充錄音工具面板。
• 使用 devtools.performance API 取得 「效能」面板的錄製狀態相關資訊。

開發人員工具頁面可直接存取擴充功能 API。包括能夠使用訊息傳遞與服務工作者通訊。

建立 DevTools 擴充功能

如要為擴充功能建立 DevTools 頁面，請在擴充功能資訊清單中新增 devtools_page 欄位：

{
  "name": ...
  "version": "1.0",
  "devtools_page": "devtools.html",
  ...
}

devtools_page 欄位必須指向 HTML 頁面。由於 DevTools 頁面必須是擴充功能的本機，因此建議您使用相對網址指定該頁面。

chrome.devtools API 的成員僅適用於在開發人員工具視窗中載入的網頁，且必須在該視窗開啟時才能使用。內容指令碼和其他擴充功能頁面無法存取這些 API。

開發人員工具 UI 元素：面板和側邊欄窗格

除了一般擴充功能 UI 元素 (例如瀏覽器動作、內容相關選單和彈出式視窗) 之外，DevTools 擴充功能還可在 DevTools 視窗中新增 UI 元素：

• 面板是頂層分頁，例如「元素」、「來源」和「網路」面板。
• 側邊面板會顯示與面板相關的輔助 UI。元素面板中的「Styles」、「Computed Styles」和「Event Listener」窗格就是側欄窗格的範例。視您使用的 Chrome 版本和 DevTools 視窗的停靠位置而定，側邊欄窗格可能會如下圖所示：