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

chrome.devtools.panels

說明

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

資訊清單

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

"devtools_page"

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

總覽

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

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

範例

下列程式碼會新增 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 物件。