Google Chrome Extensions (Labs)

Getting Started
Overview
What's New?
Developer's Guide
- Browser UI
- Browser Interaction
  - Bookmarks
  - Cookies
  - Developer Tools
  - Events
  - History
  - Management
  - Tabs
  - Windows
- Implementation
- Finishing
  - Hosting
  - Other Deployment Options
Packaged Apps
Tutorials
Reference
- Formats
  - Manifest Files
  - Match Patterns
- Permission Warnings
- chrome.* APIs
- Other APIs
Samples

chrome.devtools.panels

Overview
1. h3Name
Examples
1. h3Name
API reference: chrome.devtools.panels
1. Properties
  1. elements
2. Methods
  1. create
  2. setOpenResourceHandler
3. Events
  1. eventName
4. Types

Use the chrome.devtools.panels module to integrate your extension into Developer Tools window UI: create your own panels, access existing panels, and add sidebars.

See DevTools APIs summary for general introduction to using Developer Tools APIs.

Overview

Each extension panel and sidebar is displayed as a separate HTML page. All extension pages displayed in the Developer Tools window have access to all modules in chrome.devtools API, as well as to chrome.extension API. Other extension APIs are not available to the pages within Developer Tools window, but you may invoke them by sending a request to the background page of your extension, similarly to how it's done in the content scripts.

You can use the setOpenResourceHandler() method to install a callback function that handles user requests to open a resource (typically, a click on a resource link in the Developer Tools window). At most one of the installed handlers gets called; users can specify (using the Developer Tools Settings dialog) either the default behavior or an extension to handle resource open requests. If an extension calls setOpenResourceHandler() multiple times, only the last handler is retained.

Examples

The following code adds a panel contained in Panel.html, represented by FontPicker.png on the Developer Tools toolbar and labeled as Font Picker:

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

The following code adds a sidebar pane contained in Sidebar.html and titled Font Properties to the Elements panel, then sets its height to 8ex:

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

This screenshot demonstrates the effect the above examples would have on Developer Tools window: Extension icon panel on DevTools toolbar

You can find examples that use this API in Samples.

API reference: chrome.devtools.panels

Properties

elements

chrome.devtools.panels.elements

elements
( optional enumerated ElementsPanel )

Elements panel.

Methods

create

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

Creates an extension panel.

Parameters

title ( optional enumerated string ): Undocumented.; Title that is displayed next to the extension icon in the Developer Tools toolbar.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
iconPath ( optional enumerated string ): Undocumented.; Path of the panel's icon relative to the extension directory.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
pagePath ( optional enumerated string ): Undocumented.; Path of the panel's HTML page relative to the extension directory.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
callback ( optional enumerated function ): Undocumented.; A function that is called when the panel is created.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

Callback function

If you specify the callback parameter, it should specify a function that looks like this:

function(ExtensionPanel panel) {...};

panel ( optional enumerated ExtensionPanel ): Undocumented.; An ExtensionPanel object representing the created panel.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

setOpenResourceHandler

chrome.devtools.panels.setOpenResourceHandler(function callback)

Specifies the function to be called when the user clicks a resource link in the Developer Tools window. To unset the handler, either call the method with no parameters or pass null as the parameter.

Parameters

callback ( optional enumerated function ): Undocumented.; A function that is called when the user clicks on a valid resource link in Developer Tools window. Note that if the user clicks an invalid URL or an XHR, this function is not called.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

Callback function

If you specify the callback parameter, it should specify a function that looks like this:

function(object Resource) {...};

Resource ( optional enumerated object ): Undocumented.; A Resource object for the resource that was clicked.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

Types

ElementsPanel

( optional enumerated object )

Represents the Elements panel.

Methods of ElementsPanel

createSidebarPane

elementsPanel.createSidebarPane(string title, function callback)

Creates a pane within panel's sidebar.

Parameters

title ( optional enumerated string ): Undocumented.; Text that is displayed in sidebar caption.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
callback ( optional enumerated function ): Undocumented.; A callback invoked when the sidebar is created.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

Callback function

If you specify the callback parameter, it should specify a function that looks like this:

function(ExtensionSidebarPane result) {...};

result ( optional enumerated ExtensionSidebarPane ): Undocumented.; An ExtensionSidebarPane object for created sidebar pane.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

Events of ElementsPanel

onSelectionChanged

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

Fired when an object is selected in the panel.

ExtensionPanel

( optional enumerated object )

Represents a panel created by extension.

Methods of ExtensionPanel

createStatusBarButton

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

Appends a button to the status bar of the panel.

Parameters

iconPath ( optional enumerated string ): Undocumented.; Path to the icon of the button. The file should contain a 64x24-pixel image composed of two 32x24 icons. The left icon is used when the button is inactive; the right icon is displayed when the button is pressed.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
tooltipText ( optional enumerated string ): Undocumented.; Text shown as a tooltip when user hovers the mouse over the button.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
disabled ( optional enumerated boolean ): Undocumented.; Whether the button is disabled.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

Returns

paramName ( optional enumerated Button ): Undocumented.; Description of this parameter from the json schema.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

Events of ExtensionPanel

onHidden

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

Fired when the user switches away from the panel.

onSearch

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

Fired upon a search action (start of a new search, search result navigation, or search being canceled).

Listener parameters

action ( optional enumerated string ): Undocumented.; Type of search action being performed.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
queryString ( optional enumerated string ): Undocumented.; Query string (only for 'performSearch').; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

onShown

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

Fired when the user switches to the panel.

Listener parameters

window ( optional enumerated DOMWindow ): Undocumented.; The window object of panel's page.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

ExtensionSidebarPane

( optional enumerated object )

A sidebar created by the extension.

Methods of ExtensionSidebarPane

setExpression

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

Sets an expression that is evaluated within the inspected page. The result is displayed in the sidebar pane.

Parameters

expression ( optional enumerated string ): Undocumented.; An expression to be evaluated in context of the inspected page. JavaScript objects and DOM nodes are displayed in an expandable tree similar to the console/watch.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
rootTitle ( optional enumerated string ): Undocumented.; An optional title for the root of the expression tree.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
callback ( optional enumerated function ): Undocumented.; A callback invoked after the sidebar pane is updated with the expression evaluation results.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

Callback function

If you specify the callback parameter, it should specify a function that looks like this:

function(null) {...};

panel ( optional enumerated ExtensionPanel ): Undocumented.; An ExtensionPanel object representing the created panel.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

setHeight

extensionSidebarPane.setHeight(string height)

Sets the height of the sidebar.

Parameters

height ( optional enumerated string ): Undocumented.; A CSS-like size specification, such as '100px' or '12ex'.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

setObject

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

Sets a JSON-compliant object to be displayed in the sidebar pane.

Parameters

jsonObject ( optional enumerated string ): Undocumented.; An object to be displayed in context of the inspected page. Evaluated in the context of the caller (API client).; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
rootTitle ( optional enumerated string ): Undocumented.; An optional title for the root of the expression tree.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
callback ( optional enumerated function ): Undocumented.; A callback invoked after the sidebar is updated with the object.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

Callback function

If you specify the callback parameter, it should specify a function that looks like this:

function(null) {...};

Resource ( optional enumerated object ): Undocumented.; A Resource object for the resource that was clicked.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

setPage

extensionSidebarPane.setPage(string path)

Sets an HTML page to be displayed in the sidebar pane.

Parameters

path ( optional enumerated string ): Undocumented.; Relative path of an extension page to display within the sidebar.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

Events of ExtensionSidebarPane

onHidden

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

Fired when the sidebar pane becomes hidden as a result of the user switching away from the panel that hosts the sidebar pane.

onShown

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

Fired when the sidebar pane becomes visible as a result of user switching to the panel that hosts it.

Listener parameters

window ( optional enumerated DOMWindow ): Undocumented.; The window object of the sidebar page, if one was set with the setPage() method.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

Button

( optional enumerated object )

A button created by the extension.

Methods of Button

update

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

Updates the attributes of the button. If some of the arguments are omitted or null, the corresponding attributes are not updated.

Parameters

iconPath ( optional enumerated string ): Undocumented.; Path to the new icon of the button.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
tooltipText ( optional enumerated string ): Undocumented.; Text shown as a tooltip when user hovers the mouse over the button.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
disabled ( optional enumerated boolean ): Undocumented.; Whether the button is disabled.; This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.

Events of Button

onClicked

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

Fired when the button is clicked.

Parameters

Google Chrome Extensions (Labs)

Developer's Guide

Packaged Apps

Tutorials

Reference

Samples

More

chrome.devtools.panels

Contents

Overview

Examples

API reference: chrome.devtools.panels

Properties

elements

Methods

create

Parameters

Returns

Callback function

setOpenResourceHandler

Parameters

Returns

Callback function

Events

event name

Listener parameters

Extra parameters to addListener

Listener returns

Types

ElementsPanel

Methods of ElementsPanel

createSidebarPane

Parameters

Returns

Callback function

Events of ElementsPanel

onSelectionChanged

Listener parameters

Extra parameters to addListener

Listener returns

ExtensionPanel

Methods of ExtensionPanel

createStatusBarButton

Parameters

Returns

Callback function

Events of ExtensionPanel

onHidden

Listener parameters

Extra parameters to addListener

Listener returns

onSearch

Listener parameters

Extra parameters to addListener

Listener returns

onShown

Listener parameters

Extra parameters to addListener

Listener returns

ExtensionSidebarPane

Methods of ExtensionSidebarPane

setExpression

Parameters

Returns

Callback function

setHeight

Parameters

Returns

Callback function

setObject

Parameters

Returns

Callback function

setPage

Parameters

Returns

Callback function

Events of ExtensionSidebarPane

onHidden