chrome.devtools.panels

内容导航

概览
示例
API说明：chrome.devtools.panels
1. 属性
  1. elements
2. 方法
  1. create
  2. setOpenResourceHandler
3. 类型
  1. ElementsPanel
    1. 方法
      1. createSidebarPane
    2. 事件
      1. onSelectionChanged
  2. ExtensionPanel
    1. 方法
      1. createStatusBarButton
    2. 事件
  3. ExtensionSidebarPane
    1. 方法
    2. 事件
      1. onHidden
      2. onShown
  4. Button
    1. 方法
      1. update
    2. 事件
      1. onClicked

chrome.devtools.panels模块用以整合您的扩展到开发者工具窗口中：创建您自己的面板，访问已存在的面板和添加侧边栏。

访问 DevTools 接口介绍了解使用开发人员工具 API 的使用简介。

概览

每个扩展面板和侧边栏都被展示为一个独立的HTML页面。展现在开发者工具窗口的所有扩展页面均可访问chrome.devtools API 和 chrome.extension API 的所有模块。其他扩展API对开发者工具窗口内的页面来说不可用，但是您可以通过发送请求到background page然后调用，这和在 content scripts 中的做法类似。

您可以使用 setOpenResourceHandler() 方法来安装回调函数用以处理打开资源的用户请求（典型地，在开发者工具窗口点击一个资源的链接）。最多一个安装的处理函数能够被调用；用户可以指定（使用开发人员工具设置对话框）默认行为或用以处理资源开放请求的扩展。如若一个扩展调用多次 setOpenResourceHandler()，只有最后的那个处理函数会被保留。

示例

下面的代码在Panel.html添加一个面板，在开发人员工具的工具栏显示FontPicker.png图片和 Font Picker标签：

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");
    });

下面的截图显示了上面例子对开发者工具窗口作用的具体效果： Extension icon panel on DevTools toolbar

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

API说明：chrome.devtools.panels

属性

elements

chrome.devtools.panels.elements

elements
( ElementsPanel )

元素面板

方法

create

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

创建扩展面板

Parameters

title ( string ): 在开发者工具工具栏里紧邻扩展图标的标题
iconPath ( string ): 面板图标相对于扩展目录路径
pagePath ( string ): 面板HTML页面相对于扩展目录的路径
callback ( optional function ): 面板创建时调用的函数

Callback function

指定回调参数应如下例所示：

function(ExtensionPanel panel) {...};

panel ( ExtensionPanel ): 代表着创建的面板的ExtensionPanel对象

setOpenResourceHandler

chrome.devtools.panels.setOpenResourceHandler(function callback)

指定用户在开发人员工具窗口点击资源链接时调用的函数。若取消处理函数，可调用无参方法或传递null作为参数。

参数

callback ( optional function ): 用户在开发人员工具窗口点击一个有效资源链接时调用的函数。注意若用户点击一个无效URL或XHR，该函数不被调用。

Callback function

指定回调参数应如下例所示：

function(object Resource) {...};

Resource ( object ): 被点击的资源对象

Types

ElementsPanel

( object )

显示元素面板

Methods of ElementsPanel

createSidebarPane

elementsPanel.createSidebarPane(string title, function callback)

在面板侧边栏创建窗格

Parameters

title ( string ): 显示侧边栏标题的文本
callback ( optional function ): 侧边栏创建时调用的回调函数

Callback function

指定回调应如下例所示：

function(ExtensionSidebarPane result) {...};

result ( ExtensionSidebarPane ): 创建的侧边栏窗格的ExtensionSidebarPane对象

Events of ElementsPanel

onSelectionChanged

elementsPanel.onSelectionChanged.addListener(function() {...});

面板里对象被选中时触发

ExtensionPanel

( object )

表示扩展创建的面板

Methods of ExtensionPanel

createStatusBarButton

Button extensionPanel.createStatusBarButton(string iconPath, string tooltipText, boolean disabled)

向面板状态栏追加按钮

Parameters

iconPath ( string ): 按钮图标路径。文件应包含包含有两个 32x24 图标组成的 64x24像素的图片。当按钮无效时使用左边图标，按钮点击时使用右边图标。
tooltipText ( string ): 用户鼠标在按钮上时显示为tooltip的文字
disabled ( boolean ): 按钮是否可用

Returns

( Button ): Undocumented.

Events of ExtensionPanel

onHidden

extensionPanel.onHidden.addListener(function() {...});

用户从面板切换离开时触发

onSearch

extensionPanel.onSearch.addListener(function(string action, string queryString) {...});

搜索行为（搜索，搜索结果导航或搜索取消）时触发

Listener parameters

action ( string ): 正在执行搜索行为的类型
queryString ( optional string ): 查询字符串（只适用于'performSearch'）

onShown

extensionPanel.onShown.addListener(function(Window window) {...});

用户切换面板时触发

Listener parameters

window ( Window ): 面板页面的窗口对象

ExtensionSidebarPane

( object )

扩展创建的侧边栏

Methods of ExtensionSidebarPane

setExpression

extensionSidebarPane.setExpression(string expression, string rootTitle, function callback)

设置检查页面评估的表达式。结果将会在侧边栏窗格显示。

参数

expression ( string ): 检查页面上下文中被评估的表达式。JavaScript对象和DOM节点显示为展开的树形结构就像console/watch.
rootTitle ( optional string ): 表达式树根的可选标题
callback ( optional function ): 侧边栏窗格被表达式验证结果更新时调用的回调

Callback function

指定回调函数应如下例所示：

function(null) {...};

setHeight

extensionSidebarPane.setHeight(string height)

设置侧边栏的高度

Parameters

height ( string ): 类似CSS的大小规格，比如 '100px' 或 '12ex'

setObject

extensionSidebarPane.setObject(string jsonObject, string rootTitle, function callback)

设置侧边栏窗格中显示一个JSON兼容对象

Parameters

jsonObject ( string ): 显示在检查页面上下文的对象。调用者的上下文评估（API客户端）。
rootTitle ( optional string ): 表达式树根的可选标题
callback ( optional function ): 侧边栏被对象更新后调用的回调

Callback function

指定回调函数应如下例所示：

function(null) {...};

setPage

extensionSidebarPane.setPage(string path)

设置在侧边栏显示的HTML页面

Parameters

path ( string ): 显示在侧边栏的相对于扩展页面的路径

Events of ExtensionSidebarPane

onHidden

extensionSidebarPane.onHidden.addListener(function() {...});

用户切换离开包含侧边栏面板导致侧边栏窗格隐藏时触发

onShown

extensionSidebarPane.onShown.addListener(function(Window window) {...});

用户切换到包含侧边栏窗格的面板导致侧边栏出现时触发

Listener parameters

window ( optional Window ): 使用 setPage()方法时侧边栏页的 window 对象

Button

( object )

扩展创建的按钮

Methods of Button

update

button.update(string iconPath, string tooltipText, boolean disabled)

更新按钮属性。若一些参数忽略或为 null，响应的属性不更新

参数

iconPath ( optional string ): 按钮新图标的路径
tooltipText ( optional string ): 用户鼠标在按钮时显示为tooltip的文本
disabled ( optional boolean ): 按钮是否可用

Events of Button

onClicked

button.onClicked.addListener(function() {...});

点击按钮时触发