chrome.devtools.panels

说明

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

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

您可以使用 devtools.panels.setOpenResourceHandler 方法安装回调函数 用于处理用户请求打开资源(通常,点击 “开发者工具”窗口)。最多只能调用一个已安装的处理程序;(使用 “开发者工具设置”对话框)的默认行为或用于处理资源的扩展程序 开放请求。如果扩展程序多次调用 setOpenResourceHandler(),则只有最后一次调用 处理程序。

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

清单

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

"devtools_page"

示例

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

屏幕截图说明了此示例对“开发者工具”窗口的影响:

<ph type="x-smartling-placeholder">
</ph> 开发者工具工具栏中的扩展程序图标面板
开发者工具工具栏中的扩展程序图标面板。

若要试用此 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

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

      字符串

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

    • 已停用

      布尔值

      按钮是否已停用。

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

属性

elements

元素面板。

类型

sources

“来源”面板。

类型

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

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 作为形参。

参数