chrome.devtools.panels

说明

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

清单

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

"devtools_page"

有关使用开发者工具 API 的一般说明，请参阅 DevTools API 摘要。

概览

每个扩展程序面板和边栏都会显示为一个单独的 HTML 网页。已显示所有扩展程序页面 在“开发者工具”窗口中可以访问 chrome.devtools API 中的所有模块，以及 chrome.extension API。其他扩展程序 API 不可用于 Developer 中的页面 但您也可以通过向扩展程序的后台网页发送请求来调用它们， 操作方式与内容脚本中类似。

您可以使用 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 中的 devtools Panels API 示例 存储库

类型

Button

由扩展程序创建的按钮。

属性

• onClicked

  事件<functionvoidvoid>

  在用户点击按钮时触发。

  onClicked.addListener 函数如下所示：

  (callback: function) => {...}

  • callback

    函数

    callback 参数如下所示：

    () => void

• update

  void

  更新按钮的属性。如果省略某些参数或设为 null，则不会更新相应的属性。

  update 函数如下所示：

  (iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}

  • iconPath

    字符串（可选）

    指向按钮的新图标的路径。

  • tooltipText

    字符串（可选）

    用户将鼠标悬停在按钮上时作为提示显示的文本。

  • 已停用

    布尔值（可选）

    按钮是否已停用。

ElementsPanel

表示元素面板。

属性

• onSelectionChanged

  事件<functionvoidvoid>

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

  onSelectionChanged.addListener 函数如下所示：

  (callback: function) => {...}

  • callback

    函数

    callback 参数如下所示：

    () => void

• createSidebarPane

  void

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

  createSidebarPane 函数如下所示：

  (title: string, callback?: function) => {...}

  • 标题

    字符串

    边栏标题中显示的文本。

  • callback

    函数（可选）

    callback 参数如下所示：

    (result: ExtensionSidebarPane) => void

    • 结果

      ExtensionSidebarPane

      用于创建边栏窗格的 ExtensionSidebarPane 对象。

ExtensionPanel

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

属性

• onHidden

  事件<functionvoidvoid>

  在用户离开面板时触发。

  onHidden.addListener 函数如下所示：

  (callback: function) => {...}

  • callback

    函数

    callback 参数如下所示：

    () => void

• onSearch

  事件<functionvoidvoid>

  搜索操作（开始新的搜索、搜索结果导航或取消搜索）时触发。

  onSearch.addListener 函数如下所示：

  (callback: function) => {...}

  • callback

    函数

    callback 参数如下所示：

    (action: string, queryString?: string) => void

    • action

      字符串

    • queryString

      字符串（可选）

• onShown

  事件<functionvoidvoid>

  在用户切换到面板时触发。

  onShown.addListener 函数如下所示：

  (callback: function) => {...}

  • callback

    函数

    callback 参数如下所示：

    (window: Window) => void

    • 窗口

      窗口

• createStatusBarButton

  void

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

  createStatusBarButton 函数如下所示：

  (iconPath: string, tooltipText: string, disabled: boolean) => {...}

  • iconPath

    字符串

    按钮图标的路径。该文件应包含一张 64x24 像素的图片，由两个 32x24 的图标组成。当按钮处于不活动状态时，使用左侧图标；按下按钮时，系统会显示右侧图标。

  • tooltipText

    字符串

    用户将鼠标悬停在按钮上时作为提示显示的文本。

  • 已停用

    布尔值

    按钮是否已停用。

  • 返回

    Button

ExtensionSidebarPane

由扩展程序创建的边栏。

属性

• onHidden

  事件<functionvoidvoid>

  在用户离开托管边栏窗格的面板后，边栏窗格被隐藏时触发。

  onHidden.addListener 函数如下所示：

  (callback: function) => {...}

  • callback

    函数

    callback 参数如下所示：

    () => void

• onShown

  事件<functionvoidvoid>

  在用户切换到托管边栏窗格的面板后，边栏窗格变得可见时触发。

  onShown.addListener 函数如下所示：

  (callback: function) => {...}

  • callback

    函数

    callback 参数如下所示：

    (window: Window) => void

    • 窗口

      窗口

• setExpression

  void

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

  setExpression 函数如下所示：

  (expression: string, rootTitle?: string, callback?: function) => {...}

  • 表达式

    字符串

    要在所检查网页的上下文中求值的表达式。JavaScript 对象和 DOM 节点显示在类似于控制台/watch 的可展开树中。

  • 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

  事件<functionvoidvoid>

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

  onSelectionChanged.addListener 函数如下所示：

  (callback: function) => {...}

  • callback

    函数

    callback 参数如下所示：

    () => void

• createSidebarPane

  void

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

  createSidebarPane 函数如下所示：

  (title: string, callback?: function) => {...}

  • 标题

    字符串

    边栏标题中显示的文本。

  • 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,
)

创建扩展程序面板。

参数

• 标题

  字符串

  在开发者工具工具栏中的扩展程序图标旁边显示的标题。

• iconPath

  字符串

  面板图标相对于扩展程序目录的路径。

• pagePath

  字符串

  面板的 HTML 页面相对于扩展程序目录的路径。

• callback

  函数（可选）

  callback 参数如下所示：

  (panel: ExtensionPanel) => void

  • 面板

    ExtensionPanel

    表示所创建的面板的 ExtensionPanel 对象。

openResource()

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

向开发者工具发出在开发者工具面板中打开网址的请求。

参数

• 网址

  字符串

  要打开的资源的网址。

• lineNumber

  number

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

• columnNumber

  编号（选填）

  Chrome 114 及更高版本

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

• callback

  函数（可选）

  callback 参数如下所示：

  () => void

setOpenResourceHandler()

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

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

参数

• callback

  函数（可选）

  callback 参数如下所示：

  (resource: Resource) => void

  • 资源

    资源

    所点击资源的 devtools.inspectedWindow.Resource 对象。