chrome.devtools.panels

说明

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

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

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

有关使用 Developer Tools API 的一般性简介，请参阅 DevTools API 摘要。

清单

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

"devtools_page"

示例

以下代码会添加一个包含在 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

      用于创建边栏窗格的 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

    用于指明按钮是否处于停用状态。

  • 返回

    Button

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

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

属性

elements

元素面板。

类型

ElementsPanel

sources

“来源”面板。

类型

SourcesPanel

themeName

Chrome 59 及更高版本

在用户开发者工具设置中设置的颜色主题的名称。可能的值：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

    表示所创建的面板的 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 对象。