chrome.devtools.panels

說明

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

每個擴充功能面板和側欄會顯示為個別的 HTML 網頁。已顯示所有擴充功能頁面 可以使用「開發人員工具」視窗中的所有部分，並使用 chrome.devtools API 的所有功能 其他擴充功能 API

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

如要瞭解如何使用開發人員工具 API，請參閱「開發人員工具 API 摘要」一文。

資訊清單

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

"devtools_page"

範例

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

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

下列程式碼會新增 Sidebar.html 中的側欄窗格，並新增標題為「字型屬性」 然後將高度設為 8ex：

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

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

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

如要試用這個 API，請安裝 chrome-extension-samples 提供的開發人員工具面板 API 範例 Cloud Storage 也提供目錄同步處理功能

類型

Button

擴充功能建立的按鈕。

屬性

• onClicked

  事件<functionvoid>

  點按按鈕時觸發。

  onClicked.addListener 函式如下所示：

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

  • 回呼

    函式

    callback 參數如下所示：

    () => void

• update

  void

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

  update 函式如下所示：

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

  • iconPath

    string optional

    按鈕新圖示的路徑。

  • tooltipText

    string optional

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

  • 已停用

    布林值 選填

    是否停用按鈕。

ElementsPanel

代表「元素」面板。

屬性

• onSelectionChanged

  事件<functionvoid>

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

  onSelectionChanged.addListener 函式如下所示：

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

  • 回呼

    函式

    callback 參數如下所示：

    () => void

• createSidebarPane

  void

  在面板的側欄中建立窗格。

  createSidebarPane 函式如下所示：

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

  • title

    字串

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

  • 回呼

    函式 選用

    callback 參數如下所示：

    (result: ExtensionSidebarPane) => void

    • 結果

      ExtensionSidebarPane

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

ExtensionPanel

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

屬性

• onHidden

  事件<functionvoid>

  使用者離開面板時觸發。

  onHidden.addListener 函式如下所示：

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

  • 回呼

    函式

    callback 參數如下所示：

    () => void

• onSearch

  事件<functionvoid>

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

  onSearch.addListener 函式如下所示：

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

  • 回呼

    函式

    callback 參數如下所示：

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

    • 動作

      字串

    • queryString

      string optional

• onShown

  事件<functionvoid>

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

  onShown.addListener 函式如下所示：

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

  • 回呼

    函式

    callback 參數如下所示：

    (window: Window) => void

    • 窗戶

      視窗

• createStatusBarButton

  void

  在面板的狀態列中附加一個按鈕。

  createStatusBarButton 函式如下所示：

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

  • iconPath

    字串

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

  • tooltipText

    字串

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

  • 已停用

    布林值

    是否停用按鈕。

  • returns

    按鈕

ExtensionSidebarPane

由擴充功能建立的側欄。

屬性

• onHidden

  事件<functionvoid>

  使用者關閉代管側欄窗格的面板，導致側欄窗格變成隱藏時觸發。

  onHidden.addListener 函式如下所示：

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

  • 回呼

    函式

    callback 參數如下所示：

    () => void

• onShown

  事件<functionvoid>

  使用者切換至代管面板的面板後，側欄窗格顯示為可見時觸發。

  onShown.addListener 函式如下所示：

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

  • 回呼

    函式

    callback 參數如下所示：

    (window: Window) => void

    • 窗戶

      視窗

• setExpression

  void

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

  setExpression 函式如下所示：

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

  • 運算式

    字串

    受檢查網頁情境中評估的運算式。JavaScript 物件和 DOM 節點會以類似主控台/手錶的可展開樹狀結構中顯示。

  • rootTitle

    string optional

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

  • 回呼

    函式 選用

    callback 參數如下所示：

    () => void

• setHeight

  void

  設定側欄高度。

  setHeight 函式如下所示：

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

  • 高度

    字串

    類似 CSS 的尺寸規格，例如 '100px' 或 '12ex'。

• setObject

  void

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

  setObject 函式如下所示：

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

  • jsonObject

    字串

    所檢查頁面內容中顯示的物件。透過呼叫端 (API 用戶端) 進行評估。

  • rootTitle

    string optional

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

  • 回呼

    函式 選用

    callback 參數如下所示：

    () => void

• setPage

  void

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

  setPage 函式如下所示：

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

  • 路徑

    字串

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

SourcesPanel

代表「來源」面板。

屬性

• onSelectionChanged

  事件<functionvoid>

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

  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,
)

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

參數

• 網址

  字串

  要開啟的資源網址。

• lineNumber

  數字

  指定載入資源時要捲動至哪個行數。

• columnNumber

  編號 選填

  Chrome 114 以上版本

  指定載入資源時要捲動的資料欄編號。

• 回呼

  函式 選用

  callback 參數如下所示：

  () => void

setOpenResourceHandler()

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

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

參數

• 回呼

  函式 選用

  callback 參數如下所示：

  (resource: Resource) => void

  • 資源

    資源

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