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 对象。