chrome.devtools.panels

說明

使用 chrome.devtools.panels API，將擴充功能整合至開發人員工具視窗使用者介面：建立專屬面板、存取現有面板以及新增側欄。

每個擴充功能面板和側欄都會顯示為獨立的 HTML 網頁。「開發人員工具」視窗內顯示的所有擴充功能頁面都能存取 chrome.devtools API 中的所有模組，以及 chrome.extension API。其他擴充功能 API 不適用於「開發人員工具」視窗中的頁面，但您可以將要求傳送至擴充功能的背景頁面來叫用這些 API，方法與內容指令碼中類似。

您可以使用 devtools.panels.setOpenResourceHandler 方法安裝回呼函式，用於處理使用者開啟資源的要求 (通常是在開發人員工具視窗中按一下資源連結)。最多會呼叫其中一個已安裝的處理常式；使用者可以透過「開發人員工具設定」對話方塊指定預設行為，或用來處理資源開啟要求的擴充功能。如果擴充功能多次呼叫 setOpenResourceHandler()，系統只會保留最後一個處理常式。

如需開發人員工具 API 的一般使用簡介，請參閱 DevTools API 摘要。

資訊清單

您必須在資訊清單中宣告下列金鑰，才能使用這個 API。

"devtools_page"

範例

以下程式碼會新增 Panel.html 中的面板 (在開發人員工具工具列中以 FontPicker.png 表示)，並加上「字型挑選器」標籤：

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

以下程式碼會在「元素」面板中新增 Sidebar.html 中的側欄窗格，並將標題為「Font Properties」，然後將高度設為 8ex：

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

此螢幕截圖顯示這個範例對「開發人員工具」視窗的影響：

開發人員工具工具列的擴充功能圖示面板。

如要試用這個 API，請從 chrome-extension-samples 存放區安裝開發人員工具面板 API 範例。

類型

Button

擴充功能建立的按鈕。

屬性

• onClicked

  事件<functionvoidvoid>

  點按按鈕時觸發。

  onClicked.addListener 函式如下所示：

  (callback: function)=> {...}

  • 回呼

    功能

    callback 參數如下所示：

    ()=>void

• update

  void

  更新按鈕的屬性。如果省略部分引數或 null，對應的屬性不會更新。

  update 函式如下所示：

  (iconPath?: string,tooltipText?: string,disabled?: boolean)=> {...}

  • iconPath

    字串 選用

    按鈕新圖示的路徑。

  • tooltipText

    字串 選用

    使用者將滑鼠遊標懸停在按鈕上時，系統會顯示工具提示文字。

  • 已停用

    布林值 (選用)

    指出按鈕是否停用。

ElementsPanel

代表「元素」面板。

屬性

• onSelectionChanged

  事件<functionvoidvoid>

  於面板中選取物件時觸發。

  onSelectionChanged.addListener 函式如下所示：

  (callback: function)=> {...}

  • 回呼

    功能

    callback 參數如下所示：

    ()=>void

• createSidebarPane

  void

  在面板側欄中建立窗格。

  createSidebarPane 函式如下所示：

  (title: string,callback?: function)=> {...}

  • title

    字串

    顯示在側欄說明文字中的文字。

  • 回呼

    函式選用

    callback 參數如下所示：

    (result: ExtensionSidebarPane)=>void

    • 結果

      ExtensionSidebarPane

      已建立側欄窗格的 ExtensionSidebarPane 物件。

ExtensionPanel

代表由擴充功能建立的面板。

屬性

• onHidden

  事件<functionvoidvoid>

  使用者離開面板時觸發。

  onHidden.addListener 函式如下所示：

  (callback: function)=> {...}

  • 回呼

    功能

    callback 參數如下所示：

    ()=>void

• onSearch

  事件<functionvoidvoid>

  執行搜尋動作 (開始新的搜尋、搜尋結果瀏覽或搜尋取消) 時觸發。

  onSearch.addListener 函式如下所示：

  (callback: function)=> {...}

  • 回呼

    功能

    callback 參數如下所示：

    (action: string,queryString?: string)=>void

    • 動作

      字串

    • queryString

      字串 選用

• onShown

  事件<functionvoidvoid>

  在使用者切換至面板時觸發。

  onShown.addListener 函式如下所示：

  (callback: function)=> {...}

  • 回呼

    功能

    callback 參數如下所示：

    (window: Window)=>void

    • 窗戶

      視窗

• createStatusBarButton

  void

  會在面板的狀態列附加按鈕。

  createStatusBarButton 函式如下所示：

  (iconPath: string,tooltipText: string,disabled: boolean)=> {...}

  • iconPath

    字串

    按鈕圖示的路徑。該檔案應包含由兩個 32x24 圖示組成的 64x24 像素圖片，閒置按鈕會使用左圖示；按下按鈕時，會顯示右圖示。

  • tooltipText

    字串

    使用者將滑鼠遊標懸停在按鈕上時，系統會顯示工具提示文字。

  • 已停用

    boolean

    指出按鈕是否停用。

  • returns

    按鈕

ExtensionSidebarPane

擴充功能建立的側欄。

屬性

• onHidden

  事件<functionvoidvoid>

  使用者離開代管側欄窗格的面板而隱藏側欄窗格時觸發。

  onHidden.addListener 函式如下所示：

  (callback: function)=> {...}

  • 回呼

    功能

    callback 參數如下所示：

    ()=>void

• onShown

  事件<functionvoidvoid>

  使用者切換到代管窗格的面板時，觸發側欄窗格時觸發。

  onShown.addListener 函式如下所示：

  (callback: function)=> {...}

  • 回呼

    功能

    callback 參數如下所示：

    (window: Window)=>void

    • 窗戶

      視窗

• setExpression

  void

  設定在檢查的頁面中評估的運算式。搜尋結果會顯示在側欄窗格中。

  setExpression 函式如下所示：

  (expression: string,rootTitle?: string,callback?: function)=> {...}

  • 運算式

    字串

    要根據所檢查網頁背景進行評估的運算式。JavaScript 物件和 DOM 節點會以類似控制台/手錶的展開式樹狀結構顯示，

  • rootTitle

    字串 選用

    運算式樹狀結構根層級的標題 (選用)。

  • 回呼

    函式選用

    callback 參數如下所示：

    ()=>void

• setHeight

  void

  設定側欄的高度。

  setHeight 函式如下所示：

  (height: string)=> {...}

  • 高度

    字串

    類 CSS 的大小規格，例如 '100px' 或 '12ex'。

• setObject

  void

  設定顯示在側欄窗格中且符合 JSON 規定的物件。

  setObject 函式如下所示：

  (jsonObject: string,rootTitle?: string,callback?: function)=> {...}

  • jsonObject

    字串

    要顯示在已檢查頁面環境中的物件。在呼叫端 (API 用戶端) 中進行評估。

  • rootTitle

    字串 選用

    運算式樹狀結構根層級的標題 (選用)。

  • 回呼

    函式選用

    callback 參數如下所示：

    ()=>void

• setPage

  void

  設定要在側欄窗格中顯示的 HTML 網頁。

  setPage 函式如下所示：

  (path: string)=> {...}

  • path

    字串

    顯示在側欄中的擴充功能頁面的相對路徑。

SourcesPanel

代表「來源」面板。

屬性

• onSelectionChanged

  事件<functionvoidvoid>

  於面板中選取物件時觸發。

  onSelectionChanged.addListener 函式如下所示：

  (callback: function)=> {...}

  • 回呼

    功能

    callback 參數如下所示：

    ()=>void

• createSidebarPane

  void

  在面板側欄中建立窗格。

  createSidebarPane 函式如下所示：

  (title: string,callback?: function)=> {...}

  • title

    字串

    顯示在側欄說明文字中的文字。

  • 回呼

    函式選用

    callback 參數如下所示：

    (result: ExtensionSidebarPane)=>void

    • 結果

      ExtensionSidebarPane

      已建立側欄窗格的 ExtensionSidebarPane 物件。

屬性

elements

元素面板。

類型

ElementsPanel

sources

來源面板。

類型

SourcesPanel

themeName

Chrome 59 以上版本

使用者在開發人員工具設定中設定的顏色主題名稱。可能的值：default (預設值) 和 dark。

類型

字串

方法

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
)

建立擴充功能面板。

參數

• title

  字串

  顯示在開發人員工具工具列中擴充功能圖示旁的標題。

• iconPath

  字串

  面板圖示相對於擴充功能目錄的路徑。

• pagePath

  字串

  面板 HTML 網頁相對於擴充功能目錄的路徑。

• 回呼

  函式選用

  callback 參數如下所示：

  (panel: ExtensionPanel)=>void

  • 面板

    ExtensionPanel

    代表已建立面板的 ExtensionPanel 物件。

openResource()

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
)

要求開發人員工具在「開發人員工具」面板中開啟網址。

參數

• url

  字串

  要開啟的資源網址。

• lineNumber

  號碼

  指定載入資源時要捲動至的行號。

• columnNumber

  數字 選填

  Chrome 114 以上版本

  指定要在載入資源時捲動至的欄數。

• 回呼

  函式選用

  callback 參數如下所示：

  ()=>void

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
)

指定使用者點擊「開發人員工具」視窗中的資源連結時要呼叫的函式。如要取消設定處理常式，請呼叫不含參數的方法，或將 null 做為參數傳遞。

參數

• 回呼

  函式選用

  callback 參數如下所示：

  (resource: Resource)=>void

  • 資源

    資源

    所點選資源的 devtools.inspectedWindow.Resource 物件。