說明
使用 chrome.devtools.panels
API 將擴充功能整合至開發人員工具視窗 UI:建立專屬面板、存取現有面板,以及新增側欄。
每個擴充功能面板和側欄會顯示為個別的 HTML 網頁。已顯示所有擴充功能頁面
可以使用「開發人員工具」視窗中的所有部分,並使用 chrome.devtools
API 的所有功能
其他擴充功能 API
您可以使用 devtools.panels.setOpenResourceHandler
方法安裝回呼函式
,可處理使用者開啟資源的要求 (通常是
開發人員工具視窗)。系統最多會呼叫其中一個已安裝的處理常式;使用者可以透過
「開發人員工具設定」對話方塊),指定預設行為或處理資源的擴充功能
待處理的要求。如果擴充功能多次呼叫 setOpenResourceHandler()
,則只有最後一次呼叫的
處理常式皆會保留。
如要瞭解如何使用開發人員工具 API,請參閱「開發人員工具 API 摘要」一文。
資訊清單
範例
下列程式碼會新增 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");
}
);
螢幕截圖顯示這個範例對「開發人員工具」視窗的影響:
![開發人員工具工具列中的擴充功能圖示面板](https://developer.chrome.google.cn/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=19&hl=zh-tw)
如要試用這個 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 物件。
-
-
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 物件。
-
-
屬性
elements
元素面板。
sources
來源面板。
類型
themeName
使用者開發人員工具設定中設定的色彩主題名稱。可能的值: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,
)
指定當使用者在「開發人員工具」視窗中點選資源連結時,要呼叫的函式。如要取消設定處理常式,您可以呼叫不含參數的方法,或將空值做為參數傳遞。
參數
-
回呼
函式 選用
callback
參數如下所示:(resource: Resource) => void
-
資源
針對所點選資源的
devtools.inspectedWindow.Resource
物件。
-