chrome.devtools.panels
| 描述： |
使用 chrome.devtools.panels API将您的扩展程序整合到开发者工具窗口用户界面中：创建您自己的面板、访问现有的面板以及添加侧边栏。
|
| 可用版本： |
从 Chrome 18 开始稳定支持。
|
有关使用开发者工具 API 的一般信息请参见开发者工具
API 概述。
概述
每一个扩展程序面板和侧边栏显示为单独的 HTML
页面。开发者工具窗口中显示的所有扩展程序页面都能访问
chrome.devtools API 中的所有模块以及
chrome.extension API，其他扩展程序 API
对开发者工具窗口中的页面不可用，但是您可以向您的扩展程序的后台网页发送请求，调用这些 API，与您在内容脚本中所做的类似。
您可以使用
devtools.panels.setOpenResourceHandler
方法安装一个回调函数，处理用户打开资源的请求（典型例子为在开发者工具窗口中单击资源链接）。已安装的处理函数中最多只有一个会被调用，用户可以指定（使用开发者工具的设置对话框）使用默认行为或者让扩展程序来处理资源打开的请求。如果扩展程序多次调用了
setOpenResourceHandler()，只会保留最后一个处理函数。
例子
以下代码添加一个面板，内容包含在 Panel.html 文件中，使用
FontPicker.png 作为开发者工具的工具栏图标，并且标签为“Font
Picker”（字体选择器）。
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html"
function(panel) { ... });
如下代码向 Elements（元素）面板添加一个侧边栏窗格，内容包含在
Sidebar.html 文件中，标题为 Font Properties（字体属性），并将它的高度设置为 8ex：
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
});
如下屏幕截图演示以上例子在开发者工具窗口中的效果：
您可以在示例中找到使用这一
API 的例子。
类型
ElementsPanel
代表元素面板。
ElementsPanel.createSidebarPane(string title, function callback)
在面板的侧边栏中创建窗格。
参数
如果您指定了 callback 参数，它应该指定一个如下形式的函数：
function(ExtensionSidebarPane result) {...};
-
-
新创建的侧边栏窗格所对应的 ExtensionSidebarPane 对象。
onSelectionChanged
当面板中某一对象选定时产生。
addListener
onSelectionChanged.addListener(function callback)
参数
callback 参数应该指定一个如下形式的函数：
function() {...};
ExtensionPanel
代表扩展程序创建的面板。
Button ExtensionPanel.createStatusBarButton(
string iconPath,
string tooltipText,
boolean disabled)
向面板状态栏添加一个按钮。
参数
-
-
指向按钮图标的路径。文件应该包含 64×24 像素的图片，由两个 32×24 像素的图标组成。左边的图标在按钮不活动时使用，右边的图标在按钮按下时显示。
-
tooltipText
(
string
)
-
当用户将鼠标悬停在按钮上时显示为工具提示的文字。
onSearch
进行搜索操作（新搜索的开始、搜索结果的导航或者搜索取消）时产生。
addListener
onSearch.addListener(function callback)
参数
callback 参数应该指定一个如下形式的函数：
function(string action, string queryString) {...};
-
action
(
string
)
-
正在进行的搜索操作类型。
-
queryString
(
optional
string
)
-
查询字符串（仅用于 'performSearch' 类型）。
onShown
当用户切换到这一面板时产生。
addListener
onShown.addListener(function callback)
参数
callback 参数应该指定一个如下形式的函数：
function(global window) {...};
-
window
(
global
)
-
面板页面的 JavaScript
window 对象。
onHidden
当用户切换至其他面板时产生。
addListener
onHidden.addListener(function callback)
参数
callback 参数应该指定一个如下形式的函数：
function() {...};
扩展程序创建的侧边栏。
ExtensionSidebarPane.setHeight(string height)
设置侧边栏高度。
参数
-
height
(
string
)
-
类似 CSS 中指定的大小，例如
'100px' 或 '12ex'。
ExtensionSidebarPane.setExpression(string expression, string rootTitle, function callback)
设置在审查的页面中求值的表达式，结果将显示在侧边栏窗格中。
参数
-
expression
(
string
)
-
要在审查的页面上下文中求值的表达式。JavaScript 对象以及 DOM 节点将显示为与控制台/监视中类似的可展开的树。
-
rootTitle
(
optional
string
)
-
表达式树根节点标题（可选）。
-
callback
(
optional
function
)
-
表达式求值结果在侧边栏窗格中更新后调用的回调函数。
如果您指定了 callback 参数，它应该指定一个如下形式的函数：
function() {...};
ExtensionSidebarPane.setObject(string jsonObject, string rootTitle, function callback)
设置要显示在侧边栏窗格中的 JSON 对象。
参数
-
jsonObject
(
string
)
-
要显示的审查页面上下文中的对象，在调用者（API 客户端）上下文中求值。
-
rootTitle
(
optional
string
)
-
表达式树根节点标题（可选）。
-
callback
(
optional
function
)
-
对象在侧边栏窗格中更新后调用的回调函数。
如果您指定了 callback 参数，它应该指定一个如下形式的函数：
function() {...};
ExtensionSidebarPane.setPage(string path)
设置显示在侧边栏窗格中的 HTML 页面。
参数
-
path
(
string
)
-
显示在侧边栏中的扩展程序页面的相对路径。
当侧边栏窗格由于用户切换到包含它的面板而可见时产生。
addListener
onShown.addListener(function callback)
参数
callback 参数应该指定一个如下形式的函数：
function(global window) {...};
-
window
(
optional
global
)
-
侧边栏页面的 JavaScript
window 对象，如果已经用 setPage() 方法设置过的话。
当侧边栏窗格由于用户切换至其他面板而隐藏时产生。
addListener
onHidden.addListener(function callback)
参数
callback 参数应该指定一个如下形式的函数：
function() {...};
由扩展程序创建的按钮。
Button.update(string iconPath, string tooltipText, boolean disabled)
更新按钮属性。如果某些参数省略或者为 null，相应的属性就不更新。
参数
-
iconPath
(
optional
string
)
-
指向按钮新图标的路径。
-
tooltipText
(
optional
string
)
-
当用户将鼠标悬停在按钮上时显示为工具提示的文字。
-
disabled
(
optional
boolean
)
-
按钮是否已禁用。
按钮单击时产生。
addListener
onClicked.addListener(function callback)
参数
callback 参数应该指定一个如下形式的函数：
function() {...};
属性
elements
chrome.devtools.panels.elements
方法
create
chrome.devtools.panels.create(string title, string iconPath, string pagePath, function callback)
创建扩展程序面板。
参数
-
title
(
string
)
-
在开发者工具的工具栏中显示在扩展程序图标旁的标题。
-
iconPath
(
string
)
-
面板图标的 URL，相对于扩展程序目录。
-
pagePath
(
string
)
-
面板的 HTML 页面 URL，相对于扩展程序目录。
-
callback
(
optional
function
)
-
面板创建后调用的函数。
如果您指定了 callback 参数，它应该指定一个如下形式的函数：
function(ExtensionPanel panel) {...};
-
-
代表已创建面板的 ExtensionPanel 对象。
setOpenResourceHandler
chrome.devtools.panels.setOpenResourceHandler(function callback)
指定当用户单击开发者工具窗口中的某个资源链接时要调用的函数。要取消这一处理函数，不带参数调用这一方法或者传递 null 作为参数。
参数
-
callback
(
optional
function
)
-
当用户单击开发者工具窗口中的某个有效资源链接时调用的函数。注意，如果用户单击了无效的 URL 或者 XHR，不会调用这一函数。
如果您指定了 callback 参数，它应该指定一个如下形式的函数：
function(devtools.inspectedWindow.Resource resource) {...};
chrome