说明
使用 chrome.devtools.panels
API 将您的扩展程序集成到开发者工具窗口界面中:您可以创建自己的面板、访问现有面板以及添加边栏。
每个扩展程序面板和边栏都会显示为单独的 HTML 页面。“开发者工具”窗口中显示的所有扩展程序页面都可以访问 chrome.devtools
API 中的所有模块,以及 chrome.extension API。其他扩展程序 API 对开发者工具窗口中的页面不可用,但您可以通过向扩展程序的后台页面发送请求来调用这些 API(类似于在内容脚本中执行的操作)。
您可以使用 devtools.panels.setOpenResourceHandler
方法安装一个回调函数,用于处理用户打开资源请求(通常是点击开发者工具窗口中的资源链接)。最多会调用已安装的一个处理程序;用户可以(使用开发者工具设置对话框)指定默认行为或用于处理资源打开请求的扩展程序。如果扩展程序多次调用 setOpenResourceHandler()
,则仅保留最后一个处理程序。
有关使用 Developer Tools API 的一般性简介,请参阅 DevTools API 摘要。
清单
示例
以下代码会添加一个包含在 Panel.html
中的面板,该面板在开发者工具工具栏中以 FontPicker.png
表示,并标记为字体选择器:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
以下代码会向 Elements 面板添加一个包含在 Sidebar.html
中且标题为字体属性的边栏窗格,然后将其高度设置为 8ex
:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
屏幕截图说明了此示例对开发者工具窗口的影响:
如需试用此 API,请从 chrome-extension-samples 代码库安装 devtools Panels API 示例。
类型
Button
扩展程序创建的按钮。
属性
-
onClicked
事件<functionvoid>
点击按钮时触发。
onClicked.addListener
函数如下所示:(callback: function) => {...}
-
callback
功能
callback
参数如下所示:() => void
-
-
update
void
更新按钮的属性。如果省略某些参数或为
null
,则相应的属性不会更新。update
函数如下所示:(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
-
iconPath
字符串(可选)
指向按钮新图标的路径。
-
tooltipText
字符串(可选)
用户将鼠标悬停在按钮上时以提示形式显示的文本。
-
已停用
布尔值 选填
用于指明按钮是否处于停用状态。
-
ElementsPanel
表示 Element 面板。
属性
-
onSelectionChanged
事件<functionvoid>
在面板中选择某个对象时触发。
onSelectionChanged.addListener
函数如下所示:(callback: function) => {...}
-
callback
功能
callback
参数如下所示:() => void
-
-
createSidebarPane
void
在面板的边栏中创建窗格。
createSidebarPane
函数如下所示:(title: string, callback?: function) => {...}
-
title
string
边栏标题中显示的文字。
-
callback
函数(可选)
callback
参数如下所示:(result: ExtensionSidebarPane) => void
-
用于创建边栏窗格的 ExtensionSidebarPane 对象。
-
-
ExtensionPanel
表示扩展程序创建的面板。
属性
-
onHidden
事件<functionvoid>
在用户离开面板时触发。
onHidden.addListener
函数如下所示:(callback: function) => {...}
-
callback
功能
callback
参数如下所示:() => void
-
-
onSearch
事件<functionvoid>
搜索操作(开始新搜索、搜索结果导航或搜索被取消)时触发。
onSearch.addListener
函数如下所示:(callback: function) => {...}
-
callback
功能
callback
参数如下所示:(action: string, queryString?: string) => void
-
action
string
-
queryString
字符串(可选)
-
-
-
onShown
事件<functionvoid>
在用户切换到面板时触发。
onShown.addListener
函数如下所示:(callback: function) => {...}
-
callback
功能
callback
参数如下所示:(window: Window) => void
-
窗口
窗口
-
-
-
createStatusBarButton
void
向面板的状态栏附加一个按钮。
createStatusBarButton
函数如下所示:(iconPath: string, tooltipText: string, disabled: boolean) => {...}
-
iconPath
string
按钮图标的路径。文件应包含一张大小为 64x24 像素的图片,由两个 32x24 的图标组成。当按钮处于不活动状态时,使用左侧图标;按下按钮时,会显示右侧图标。
-
tooltipText
string
用户将鼠标悬停在按钮上时以提示形式显示的文本。
-
已停用
boolean
用于指明按钮是否处于停用状态。
-
返回
-
ExtensionSidebarPane
扩展程序创建的边栏。
属性
-
onHidden
事件<functionvoid>
在用户切换托管边栏窗格的面板后,边栏窗格变为隐藏状态时触发。
onHidden.addListener
函数如下所示:(callback: function) => {...}
-
callback
功能
callback
参数如下所示:() => void
-
-
onShown
事件<functionvoid>
在用户切换到托管边栏窗格的面板后,边栏窗格变得可见时触发。
onShown.addListener
函数如下所示:(callback: function) => {...}
-
callback
功能
callback
参数如下所示:(window: Window) => void
-
窗口
窗口
-
-
-
setExpression
void
设置在所检查页面中求值的表达式。结果会显示在边栏窗格中。
setExpression
函数如下所示:(expression: string, rootTitle?: string, callback?: function) => {...}
-
表达式
string
要在所检查网页的上下文中求值的表达式。JavaScript 对象和 DOM 节点均显示在类似于控制台/手表的可展开树中。
-
rootTitle
字符串(可选)
表达式树根的可选标题。
-
callback
函数(可选)
callback
参数如下所示:() => void
-
-
setHeight
void
设置边栏的高度。
setHeight
函数如下所示:(height: string) => {...}
-
高度
string
类似于 CSS 的尺寸规范,例如
'100px'
或'12ex'
。
-
-
setObject
void
设置要在边栏窗格中显示的兼容 JSON 的对象。
setObject
函数如下所示:(jsonObject: string, rootTitle?: string, callback?: function) => {...}
-
jsonObject
string
在所检查网页的上下文中显示的对象。在调用方(API 客户端)的上下文中进行评估。
-
rootTitle
字符串(可选)
表达式树根的可选标题。
-
callback
函数(可选)
callback
参数如下所示:() => void
-
-
setPage
void
设置要在边栏窗格中显示的 HTML 页面。
setPage
函数如下所示:(path: string) => {...}
-
path
string
要在边栏中显示的扩展程序页面的相对路径。
-
SourcesPanel
表示“来源”面板。
属性
-
onSelectionChanged
事件<functionvoid>
在面板中选择某个对象时触发。
onSelectionChanged.addListener
函数如下所示:(callback: function) => {...}
-
callback
功能
callback
参数如下所示:() => void
-
-
createSidebarPane
void
在面板的边栏中创建窗格。
createSidebarPane
函数如下所示:(title: string, callback?: function) => {...}
-
title
string
边栏标题中显示的文字。
-
callback
函数(可选)
callback
参数如下所示:(result: ExtensionSidebarPane) => void
-
用于创建边栏窗格的 ExtensionSidebarPane 对象。
-
-
属性
elements
元素面板。
sources
“来源”面板。
类型
themeName
在用户开发者工具设置中设置的颜色主题的名称。可能的值:default
(默认值)和 dark
。
类型
string
方法
create()
chrome.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
callback?: function,
)
创建扩展程序面板。
参数
-
title
string
开发者工具工具栏中的扩展程序图标旁边显示的标题。
-
iconPath
string
面板图标相对于扩展程序目录的路径。
-
pagePath
string
面板的 HTML 网页相对于扩展程序目录的路径。
-
callback
函数(可选)
callback
参数如下所示:(panel: ExtensionPanel) => void
-
表示所创建的面板的 ExtensionPanel 对象。
-
openResource()
chrome.devtools.panels.openResource(
url: string,
lineNumber: number,
columnNumber?: number,
callback?: function,
)
请求开发者工具在开发者工具面板中打开网址。
参数
-
网址
string
要打开的资源的网址。
-
lineNumber
number
指定资源加载后要滚动到的行号。
-
columnNumber
数字可选
Chrome 114 及更高版本指定加载资源时要滚动到的列号。
-
callback
函数(可选)
callback
参数如下所示:() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
指定当用户点击开发者工具窗口中的资源链接时要调用的函数。若要取消设置处理程序,请在调用该方法时不使用形参,也可以传递 null 作为形参。
参数
-
callback
函数(可选)
callback
参数如下所示:(resource: Resource) => void
-
资源
所点击资源的
devtools.inspectedWindow.Resource
对象。
-