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

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

      字串

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

    • 已停用

      布林值

      是否停用按鈕。

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

屬性

elements

元素面板。

類型

sources

來源面板。

類型

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 物件。

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

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

參數