本頁面由 Cloud Translation API 翻譯而成。

chrome.devtools.panels

說明

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

每個擴充功能面板和側欄都會顯示為獨立的 HTML 頁面。在「開發人員工具」視窗中顯示的所有擴充功能頁面，皆可存取 chrome.devtools API 的所有部分，以及所有其他擴充功能 API。

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

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

資訊清單

如要使用此 API，您必須在資訊清單中宣告下列鍵。

"devtools_page"

範例

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

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

以下程式碼會將 Sidebar.html 中包含的側邊欄窗格 (標題為「Font Properties」) 新增至「Elements」面板，然後將其高度設為 8ex：

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

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

開發人員工具列上的擴充功能圖示面板 — 開發人員工具工具列上的「Extension icon」面板。

如要試用這個 API，請從 chrome-extension-samples 存放區安裝 devtools 面板 API 範例。

類型

Button

由擴充功能建立的按鈕。

屬性

onClicked

Event<functionvoidvoid>

點選按鈕時觸發。

onClicked.addListener 函式如下所示：
```
(callback: function) => {...}
```
- 回呼
  
  函式
  
  callback 參數如下所示：
```
() => void
```
update

void

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

update 函式如下所示：
```
(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
```
- iconPath
  
  string 選填
  
  按鈕的新圖示路徑。
- tooltipText
  
  string 選填
  
  使用者將滑鼠游標懸停在按鈕上時，顯示為工具提示的文字。
- 已停用
  
  boolean 選填
  
  是否停用按鈕。

ElementsPanel

代表「元素」面板。

屬性

onSelectionChanged

Event<functionvoidvoid>

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

onSelectionChanged.addListener 函式如下所示：
```
(callback: function) => {...}
```
- 回呼
  
  函式
  
  callback 參數如下所示：
```
() => void
```
createSidebarPane

void

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

createSidebarPane 函式如下所示：
```
(title: string, callback?: function) => {...}
```
- title
  
  字串
  
  顯示在側欄標題中的文字。
- 回呼
  
  函式選填
  
  callback 參數如下所示：
```
(result: ExtensionSidebarPane) => void
```
  - 結果
    
    ExtensionSidebarPane
    
    建立側欄窗格的 ExtensionSidebarPane 物件。

ExtensionPanel

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

屬性

onHidden

Event<functionvoidvoid>

在使用者離開面板時觸發。

onHidden.addListener 函式如下所示：
```
(callback: function) => {...}
```
- 回呼
  
  函式
  
  callback 參數如下所示：
```
() => void
```
onSearch

Event<functionvoidvoid>

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

onSearch.addListener 函式如下所示：
```
(callback: function) => {...}
```
- 回呼
  
  函式
  
  callback 參數如下所示：
```
(action: string, queryString?: string) => void
```
  - 動作
    
    字串
  - queryString
    
    string 選填
onShown

Event<functionvoidvoid>

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

onShown.addListener 函式如下所示：
```
(callback: function) => {...}
```
- 回呼
  
  函式
  
  callback 參數如下所示：
```
(window: Window) => void
```
  - 窗戶
    
    視窗
createStatusBarButton

void

將按鈕附加至面板的狀態列。

createStatusBarButton 函式如下所示：
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- iconPath
  
  字串
  
  按鈕圖示的路徑。檔案應包含由兩個 32x24 圖示組成的 64x24 像素圖片。左側圖示會在按鈕未啟用時使用；右側圖示會在按下按鈕時顯示。
- tooltipText
  
  字串
  
  使用者將滑鼠游標懸停在按鈕上時，顯示為工具提示的文字。
- 已停用
  
  布林值
  
  是否停用按鈕。
- returns
  按鈕

ExtensionSidebarPane

擴充功能建立的側欄。

屬性

onHidden

Event<functionvoidvoid>

當使用者切換至不包含側邊欄窗格的面板時，系統會觸發此事件，以便隱藏側邊欄窗格。

onHidden.addListener 函式如下所示：
```
(callback: function) => {...}
```
- 回呼
  
  函式
  
  callback 參數如下所示：
```
() => void
```
onShown

Event<functionvoidvoid>

當使用者切換至代管側邊面板的面板時，系統會觸發此事件，以便顯示側邊面板。

onShown.addListener 函式如下所示：
```
(callback: function) => {...}
```
- 回呼
  
  函式
  
  callback 參數如下所示：
```
(window: Window) => void
```
  - 窗戶
    
    視窗
setExpression

void

設定在檢查的網頁中評估的表式。結果會顯示在側邊面板中。

setExpression 函式如下所示：
```
(expression: string, rootTitle?: string, callback?: function) => {...}
```
- 運算式
  
  字串
  
  要在檢查的網頁內容中評估的運算式。JavaScript 物件和 DOM 節點會顯示在可展開的樹狀結構中，類似於控制台/Watch。
- rootTitle
  
  string 選填
  
  運算式樹狀結構的根節點選用標題。
- 回呼
  
  函式選填
  
  callback 參數如下所示：
```
() => void
```
setHeight

void

設定側欄的高度。

setHeight 函式如下所示：
```
(height: string) => {...}
```
- 高度
  
  字串
  
  類似 CSS 的大小規格，例如 '100px' 或 '12ex'。
setObject

void

設定要顯示在側邊面板中的符合 JSON 規範的物件。

setObject 函式如下所示：
```
(jsonObject: string, rootTitle?: string, callback?: function) => {...}
```
- jsonObject
  
  字串
  
  在檢查的網頁中顯示的物件。在呼叫端 (API 用戶端) 的內容中評估。
- rootTitle
  
  string 選填
  
  運算式樹狀結構的根節點選用標題。
- 回呼
  
  函式選填
  
  callback 參數如下所示：
```
() => void
```
setPage

void

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

setPage 函式如下所示：
```
(path: string) => {...}
```
- 路徑
  
  字串
  
  要在側欄中顯示的擴充功能頁面相對路徑。

SourcesPanel

代表「來源」面板。

屬性

onSelectionChanged

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

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

參數

網址

字串

要開啟的資源網址。
lineNumber

數字

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

號碼選填

Chrome 114 以上版本

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

函式選填

callback 參數如下所示：
```
() => void
```

setOpenResourceHandler()

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

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

參數

回呼

函式選填

callback 參數如下所示：
```
(resource: Resource) => void
```
- 資源
  
  資源
  
  點選的資源對應的 devtools.inspectedWindow.Resource 物件。