chrome.devtools.panels

Description

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

Manifest Keys

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

有关使用开发人员工具 API 的一般介绍，请参阅 DevTools API 摘要。

# Overview

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

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

# Examples

下面的代码添加了一个包含在 Panel.html 中的面板，由开发者工具工具栏上的 FontPicker.png 表示并标记为字体选择器：

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

以下代码将包含在 Sidebar.html 中的侧边栏窗格添加到 Elements 面板中，标题为 Font Properties，然后将其高度设置为 8ex：

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

此屏幕截图演示了上述示例对“开发人员工具”窗口的影响：

您可以在示例中找到使用此 API 的示例。

Summary

• Types

  Button

  ElementsPanel

  ExtensionPanel

  ExtensionSidebarPane

  SourcesPanel

• Properties

  elements

  sources

  themeName

• Methods

  create

  openResource

  setOpenResourceHandler

Types

Button

由扩展程序创建的按钮。

PROPERTIES

• onClicked

  event

  单击按钮时触发。

  The onClicked.addListener function looks like:

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

  • callback

    function

    The callback parameter looks like:

    () => void

• update

  function

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

  The update function looks like:

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

  • iconPath

    string optional

    按钮新图标的路径。

  • tooltipText

    string optional

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

  • disabled

    boolean optional

    按钮是否被禁用。

ElementsPanel

代表元素面板。

PROPERTIES

• onSelectionChanged

  event

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

  The onSelectionChanged.addListener function looks like:

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

  • callback

    function

    The callback parameter looks like:

    () => void

• createSidebarPane

  function

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

  The createSidebarPane function looks like:

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

  • title

    string

    显示在侧边栏标题中的文本。

  • callback

    function optional

    The callback parameter looks like:

    (result: ExtensionSidebarPane) => void

    • result

      ExtensionSidebarPane

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

ExtensionPanel

表示由扩展创建的面板。

PROPERTIES

• onHidden

  event

  当用户离开面板时触发。

  The onHidden.addListener function looks like:

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

  • callback

    function

    The callback parameter looks like:

    () => void

• onSearch

  event

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

  The onSearch.addListener function looks like:

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

  • callback

    function

    The callback parameter looks like:

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

    • action

      string

    • queryString

      string optional

• onShown

  event

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

  The onShown.addListener function looks like:

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

  • callback

    function

    The callback parameter looks like:

    (window: Window) => void

    • window

      Window

• createStatusBarButton

  function

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

  The createStatusBarButton function looks like:

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

  • iconPath

    string

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

  • tooltipText

    string

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

  • disabled

    boolean

    按钮是否被禁用。

  • returns

    Button

ExtensionSidebarPane

由扩展创建的侧边栏。

PROPERTIES

• onHidden

  event

  当由于用户离开承载侧边栏窗格的面板而导致侧边栏窗格隐藏时触发。

  The onHidden.addListener function looks like:

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

  • callback

    function

    The callback parameter looks like:

    () => void

• onShown

  event

  当侧边栏窗格由于用户切换到托管它的面板而变得可见时触发。

  The onShown.addListener function looks like:

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

  • callback

    function

    The callback parameter looks like:

    (window: Window) => void

    • window

      Window

• setExpression

  function

  设置在检查页面内计算的表达式。结果显示在侧边栏窗格中。

  The setExpression function looks like:

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

  • expression

    string

    要在检查页面的上下文中评估的表达式。 JavaScript 对象和 DOM 节点显示在类似于控制台/手表的可扩展树中。

  • rootTitle

    string optional

    表达式树根的可选标题。

  • callback

    function optional

    The callback parameter looks like:

    () => void

• setHeight

  function

  设置侧边栏的高度。

  The setHeight function looks like:

  (height: string) => {...}

  • height

    string

    类似 CSS 的尺寸规范，例如“100px”或“12ex”。

• setObject

  function

  设置要在侧边栏窗格中显示的 JSON 兼容对象。

  The setObject function looks like:

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

  • jsonObject

    string

    要在检查页面的上下文中显示的对象。在调用者（API 客户端）的上下文中进行评估。

  • rootTitle

    string optional

    表达式树根的可选标题。

  • callback

    function optional

    The callback parameter looks like:

    () => void

• setPage

  function

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

  The setPage function looks like:

  (path: string) => {...}

  • path

    string

    要在侧边栏中显示的扩展页面的相对路径。

SourcesPanel

代表“来源”面板。

PROPERTIES

• onSelectionChanged

  event

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

  The onSelectionChanged.addListener function looks like:

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

  • callback

    function

    The callback parameter looks like:

    () => void

• createSidebarPane

  function

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

  The createSidebarPane function looks like:

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

  • title

    string

    显示在侧边栏标题中的文本。

  • callback

    function optional

    The callback parameter looks like:

    (result: ExtensionSidebarPane) => void

    • result

      ExtensionSidebarPane

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

Properties

elements

元素面板。

TYPE

ElementsPanel

sources

来源面板。

TYPE

SourcesPanel

themeName

Chrome 59+

在用户的 DevTools 设置中设置的颜色主题的名称。可能的值：default（默认值）和dark。

TYPE

string

Methods

create

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
)

创建扩展面板。

PARAMETERS

• title

  string

  显示在开发人员工具工具栏中扩展图标旁边的标题。

• iconPath

  string

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

• pagePath

  string

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

• callback

  function optional

  The callback parameter looks like:

  (panel: ExtensionPanel) => void

  • panel

    ExtensionPanel

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

openResource

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

请求开发者工具在开发者工具面板中打开一个 URL。

PARAMETERS

• url

  string

  要打开的资源的 URL。

• lineNumber

  number

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

• callback

  function optional

  The callback parameter looks like:

  () => void

setOpenResourceHandler

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

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

PARAMETERS

• callback

  function optional

  The callback parameter looks like:

  (resource: Resource) => void

  • resource

    Resource

    单击的资源的 devtools.inspectedWindow.Resource 对象。

By.一粒技术服务.