此页面由 Cloud Translation API 翻译。

chrome.devtools.panels

说明

使用 chrome.devtools.panels API 将您的扩展程序集成到“开发者工具”窗口界面：创建自己的面板、访问现有面板以及添加边栏。

每个扩展程序面板和边栏都会显示为单独的 HTML 页面。“开发者工具”窗口中显示的所有扩展程序页面都可以访问 chrome.devtools API 的所有部分，以及所有其他扩展程序 API。

您可以使用 devtools.panels.setOpenResourceHandler 方法安装一个回调函数，用于处理用户打开资源的请求（通常是点击“开发者工具”窗口中的资源链接）。系统最多会调用一个已安装的处理脚本；用户可以使用“开发者工具”设置对话框指定默认行为或用于处理资源打开请求的扩展程序。如果扩展程序多次调用 setOpenResourceHandler()，系统只会保留最后一个处理脚本。

如需简要了解如何使用开发者工具 API，请参阅 DevTools API 摘要。

清单

必须在清单中声明以下键才能使用此 API。

"devtools_page"

示例

以下代码会添加 Panel.html 中包含的面板，该面板在“Developer Tools”工具栏中由 FontPicker.png 表示，并标记为 Font Picker：

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

以下代码会将包含在 Sidebar.html 中且标题为 Font Properties 的边栏窗格添加到“Elements”面板，然后将其高度设置为 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

Event<functionvoidvoid>

在用户点击按钮时触发。

onClicked.addListener 函数如下所示：
```
(callback: function) => {...}
```
- callback
  
  函数
  
  callback 参数如下所示：
```
() => void
```
update

void

更新按钮的属性。如果省略了某些实参或将其设为 null，则系统不会更新相应的属性。

update 函数如下所示：
```
(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
```
- iconPath
  
  字符串（选填）
  
  按钮的新图标的路径。
- tooltipText
  
  字符串（选填）
  
  当用户将鼠标悬停在按钮上时显示的提示文字。
- 已停用
  
  布尔值（可选）
  
  按钮是否已停用。

ElementsPanel

表示“元素”面板。

属性

onSelectionChanged

Event<functionvoidvoid>

在面板中选择对象时触发。

onSelectionChanged.addListener 函数如下所示：
```
(callback: function) => {...}
```
- callback
  
  函数
  
  callback 参数如下所示：
```
() => void
```
createSidebarPane

void

在面板的边栏中创建窗格。

createSidebarPane 函数如下所示：
```
(title: string, callback?: function) => {...}
```
- title
  
  字符串
  
  边栏标题中显示的文字。
- callback
  
  函数（可选）
  
  callback 参数如下所示：
```
(result: ExtensionSidebarPane) => void
```
  - 结果
    
    ExtensionSidebarPane
    
    用于创建的边栏窗格的 ExtensionSidebarPane 对象。

ExtensionPanel

表示由扩展程序创建的面板。

属性

onHidden

Event<functionvoidvoid>

当用户从面板切换到其他界面时触发。

onHidden.addListener 函数如下所示：
```
(callback: function) => {...}
```
- callback
  
  函数
  
  callback 参数如下所示：
```
() => void
```
onSearch

Event<functionvoidvoid>

在执行搜索操作（开始新的搜索、浏览搜索结果或取消搜索）时触发。

onSearch.addListener 函数如下所示：
```
(callback: function) => {...}
```
- callback
  
  函数
  
  callback 参数如下所示：
```
(action: string, queryString?: string) => void
```
  - action
    
    字符串
  - queryString
    
    字符串（选填）
onShown

Event<functionvoidvoid>

当用户切换到该面板时触发。

onShown.addListener 函数如下所示：
```
(callback: function) => {...}
```
- callback
  
  函数
  
  callback 参数如下所示：
```
(window: Window) => void
```
  - 窗口
    
    窗口
createStatusBarButton

void

将按钮附加到面板的状态栏。

createStatusBarButton 函数如下所示：
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- iconPath
  
  字符串
  
  按钮图标的路径。该文件应包含一个由两个 32x24 图标组成的 64x24 像素图片。左侧图标用于按钮处于非活动状态时；右侧图标用于按钮被按下时。
- tooltipText
  
  字符串
  
  当用户将鼠标悬停在按钮上时显示的提示文字。
- 已停用
  
  布尔值
  
  按钮是否已停用。
- 返回
  Button

ExtensionSidebarPane

扩展程序创建的边栏。

属性

onHidden

Event<functionvoidvoid>

当用户从托管边栏窗格的面板切换出去，导致边栏窗格变为隐藏状态时触发。

onHidden.addListener 函数如下所示：
```
(callback: function) => {...}
```
- callback
  
  函数
  
  callback 参数如下所示：
```
() => void
```
onShown

Event<functionvoidvoid>

当用户切换到托管边栏窗格的面板时，触发此事件。

onShown.addListener 函数如下所示：
```
(callback: function) => {...}
```
- callback
  
  函数
  
  callback 参数如下所示：
```
(window: Window) => void
```
  - 窗口
    
    窗口
setExpression

void

设置要在被检查的网页中求值的表达式。结果会显示在侧边栏窗格中。

setExpression 函数如下所示：
```
(expression: string, rootTitle?: string, callback?: function) => {...}
```
- 表达式
  
  字符串
  
  要在被检查网页的上下文中求值的表达式。JavaScript 对象和 DOM 节点会显示在类似于控制台/监视的展开式树中。
- rootTitle
  
  字符串（选填）
  
  表达式树的根的标题（可选）。
- callback
  
  函数（可选）
  
  callback 参数如下所示：
```
() => void
```
setHeight

void

设置边栏的高度。

setHeight 函数如下所示：
```
(height: string) => {...}
```
- 高度
  
  字符串
  
  类似 CSS 的尺寸规范，例如 '100px' 或 '12ex'。
setObject

void

设置要在边栏窗格中显示的符合 JSON 规范的对象。

setObject 函数如下所示：
```
(jsonObject: string, rootTitle?: string, callback?: function) => {...}
```
- jsonObject
  
  字符串
  
  要在被检查网页的上下文中显示的对象。在调用方（API 客户端）上下文中进行评估。
- rootTitle
  
  字符串（选填）
  
  表达式树的根的标题（可选）。
- callback
  
  函数（可选）
  
  callback 参数如下所示：
```
() => void
```
setPage

void

设置要在边栏窗格中显示的 HTML 页面。

setPage 函数如下所示：
```
(path: string) => {...}
```
- 路径
  
  字符串
  
  要在边栏中显示的扩展程序页面的相对路径。

SourcesPanel

表示“来源”面板。

属性

onSelectionChanged

Event<functionvoidvoid>

在面板中选择对象时触发。

onSelectionChanged.addListener 函数如下所示：
```
(callback: function) => {...}
```
- callback
  
  函数
  
  callback 参数如下所示：
```
() => void
```
createSidebarPane

void

在面板的边栏中创建窗格。

createSidebarPane 函数如下所示：
```
(title: string, callback?: function) => {...}
```
- title
  
  字符串
  
  边栏标题中显示的文字。
- callback
  
  函数（可选）
  
  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

函数（可选）

callback 参数如下所示：
```
(panel: ExtensionPanel) => void
```
- 面板
  
  ExtensionPanel
  
  表示所创建面板的 ExtensionPanel 对象。

openResource()

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
)

请求 DevTools 在开发者工具面板中打开网址。

参数

网址

字符串

要打开的资源的网址。
lineNumber

数值

指定在资源加载时滚动到的行号。
columnNumber

number 可选

Chrome 114 及更高版本

指定在加载资源时滚动到的列号。
callback

函数（可选）

callback 参数如下所示：
```
() => void
```

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
)

指定在用户点击“开发者工具”窗口中的资源链接时要调用的函数。如需取消设置处理脚本，请调用不带参数的方法，或将 null 作为参数传递。

参数

callback

函数（可选）

callback 参数如下所示：
```
(resource: Resource) => void
```
- 资源
  
  资源
  
  被点击的资源的 devtools.inspectedWindow.Resource 对象。