說明
使用 chrome.devtools.panels
API,將擴充功能整合至開發人員工具視窗使用者介面:建立專屬面板、存取現有面板以及新增側欄。
資訊清單
如需開發人員工具 API 的一般使用簡介,請參閱 DevTools API 摘要。
總覽
每個擴充功能面板和側欄都會顯示為獨立的 HTML 網頁。「開發人員工具」視窗內顯示的所有擴充功能頁面都能存取 chrome.devtools
API 中的所有模組,以及 chrome.extension API。其他擴充功能 API 不適用於「開發人員工具」視窗中的頁面,但您可以將要求傳送至擴充功能的背景頁面來叫用這些 API,方法與內容指令碼中類似。
您可以使用 devtools.panels.setOpenResourceHandler
方法安裝回呼函式,用於處理使用者開啟資源的要求 (通常是按一下開發人員工具視窗中的資源連結)。最多會呼叫其中一個已安裝的處理常式;使用者可以透過「開發人員工具設定」對話方塊指定預設行為,或用來處理資源開啟要求的擴充功能。如果擴充功能多次呼叫 setOpenResourceHandler()
,系統只會保留最後一個處理常式。
示例
以下程式碼會新增 Panel.html
中的面板 (在開發人員工具工具列中以 FontPicker.png
表示),並加上「字型挑選器」標籤:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
以下程式碼會在「元素」面板中新增 Sidebar.html
中的側欄窗格,並將標題為「Font Properties」,然後將高度設為 8ex
:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
這張螢幕截圖顯示上述範例對開發人員工具視窗的影響:
如要試用這個 API,請從 chrome-extension-samples 存放區安裝開發人員工具面板 API 範例。
類型
Button
擴充功能建立的按鈕。
屬性
-
onClicked
事件<functionvoidvoid>
點按按鈕時觸發。
onClicked.addListener
函式如下所示:(callback: function) => {...}
-
回呼
功能
callback
參數如下所示:() => void
-
-
update
void
更新按鈕的屬性。如果省略部分引數或
null
,對應的屬性不會更新。update
函式如下所示:(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
-
iconPath
字串 選用
按鈕新圖示的路徑。
-
tooltipText
字串 選用
使用者將滑鼠遊標懸停在按鈕上時,系統會顯示工具提示文字。
-
已停用
布林值 (選用)
指出按鈕是否停用。
-
ElementsPanel
代表「元素」面板。
屬性
-
onSelectionChanged
事件<functionvoidvoid>
於面板中選取物件時觸發。
onSelectionChanged.addListener
函式如下所示:(callback: function) => {...}
-
回呼
功能
callback
參數如下所示:() => void
-
-
createSidebarPane
void
在面板側欄中建立窗格。
createSidebarPane
函式如下所示:(title: string, callback?: function) => {...}
-
title
字串
顯示在側欄說明文字中的文字。
-
回呼
函式選用
callback
參數如下所示:(result: ExtensionSidebarPane) => void
-
已建立側欄窗格的 ExtensionSidebarPane 物件。
-
-
ExtensionPanel
代表由擴充功能建立的面板。
屬性
-
onHidden
事件<functionvoidvoid>
使用者離開面板時觸發。
onHidden.addListener
函式如下所示:(callback: function) => {...}
-
回呼
功能
callback
參數如下所示:() => void
-
-
onSearch
事件<functionvoidvoid>
執行搜尋動作 (開始新的搜尋、搜尋結果瀏覽或搜尋取消) 時觸發。
onSearch.addListener
函式如下所示:(callback: function) => {...}
-
回呼
功能
callback
參數如下所示:(action: string, queryString?: string) => void
-
動作
字串
-
queryString
字串 選用
-
-
-
onShown
事件<functionvoidvoid>
在使用者切換至面板時觸發。
onShown.addListener
函式如下所示:(callback: function) => {...}
-
回呼
功能
callback
參數如下所示:(window: Window) => void
-
窗戶
視窗
-
-
-
createStatusBarButton
void
會在面板的狀態列附加按鈕。
createStatusBarButton
函式如下所示:(iconPath: string, tooltipText: string, disabled: boolean) => {...}
-
iconPath
字串
按鈕圖示的路徑。該檔案應包含由兩個 32x24 圖示組成的 64x24 像素圖片,閒置按鈕會使用左圖示;按下按鈕時,會顯示右圖示。
-
tooltipText
字串
使用者將滑鼠遊標懸停在按鈕上時,系統會顯示工具提示文字。
-
已停用
boolean
指出按鈕是否停用。
-
returns
-
ExtensionSidebarPane
擴充功能建立的側欄。
屬性
-
onHidden
事件<functionvoidvoid>
使用者離開代管側欄窗格的面板而隱藏側欄窗格時觸發。
onHidden.addListener
函式如下所示:(callback: function) => {...}
-
回呼
功能
callback
參數如下所示:() => void
-
-
onShown
事件<functionvoidvoid>
使用者切換到代管窗格的面板時,觸發側欄窗格時觸發。
onShown.addListener
函式如下所示:(callback: function) => {...}
-
回呼
功能
callback
參數如下所示:(window: Window) => void
-
窗戶
視窗
-
-
-
setExpression
void
設定在檢查的頁面中評估的運算式。搜尋結果會顯示在側欄窗格中。
setExpression
函式如下所示:(expression: string, rootTitle?: string, callback?: function) => {...}
-
運算式
字串
要根據所檢查網頁背景進行評估的運算式。JavaScript 物件和 DOM 節點會以類似控制台/手錶的展開式樹狀結構顯示,
-
rootTitle
字串 選用
運算式樹狀結構根層級的標題 (選用)。
-
回呼
函式選用
callback
參數如下所示:() => void
-
-
setHeight
void
設定側欄的高度。
setHeight
函式如下所示:(height: string) => {...}
-
高度
字串
類 CSS 的大小規格,例如
'100px'
或'12ex'
。
-
-
setObject
void
設定顯示在側欄窗格中且符合 JSON 規定的物件。
setObject
函式如下所示:(jsonObject: string, rootTitle?: string, callback?: function) => {...}
-
jsonObject
字串
要顯示在已檢查頁面環境中的物件。在呼叫端 (API 用戶端) 中進行評估。
-
rootTitle
字串 選用
運算式樹狀結構根層級的標題 (選用)。
-
回呼
函式選用
callback
參數如下所示:() => void
-
-
setPage
void
設定要在側欄窗格中顯示的 HTML 網頁。
setPage
函式如下所示:(path: string) => {...}
-
path
字串
顯示在側欄中的擴充功能頁面的相對路徑。
-
SourcesPanel
代表「來源」面板。
屬性
-
onSelectionChanged
事件<functionvoidvoid>
於面板中選取物件時觸發。
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,
)
要求開發人員工具在「開發人員工具」面板中開啟網址。
參數
-
url
字串
要開啟的資源網址。
-
lineNumber
號碼
指定載入資源時要捲動至的行號。
-
columnNumber
數字 選填
Chrome 114 以上版本指定要在載入資源時捲動至的欄數。
-
回呼
函式選用
callback
參數如下所示:() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
指定使用者點擊「開發人員工具」視窗中的資源連結時要呼叫的函式。如要取消設定處理常式,請呼叫不含參數的方法,或將 null 做為參數傳遞。
參數
-
回呼
函式選用
callback
參數如下所示:(resource: Resource) => void
-
資源
所點選資源的
devtools.inspectedWindow.Resource
物件。
-