Welcome What's new in Chrome extensions Getting started API Reference Samples
Welcome What's new in Chrome extensions Getting started API Reference Samples

chrome.devtools.panels

  • Description

    Use the chrome.devtools.panels API 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 devtools.panels.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.

Summary

Types

Button

A button created by the extension.

Properties

  • onClicked
    events.Event<function>

    Fired when the button is clicked.

    Add a listener like this:

    onClicked.addListener(listener)
    • listener
      function

      The listener parameter should be a function that looks like this:

      () => {...}
  • update
    function

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

    The update function looks like this:

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

      Path to the new icon of the button.

    • tooltipText
      string

      Text shown as a tooltip when user hovers the mouse over the button.

    • disabled
      boolean

      Whether the button is disabled.

ElementsPanel

Represents the Elements panel.

Properties

  • onSelectionChanged
    events.Event<function>

    Fired when an object is selected in the panel.

    Add a listener like this:

    onSelectionChanged.addListener(listener)
    • listener
      function

      The listener parameter should be a function that looks like this:

      () => {...}
  • createSidebarPane
    function

    Creates a pane within panel's sidebar.

    The createSidebarPane function looks like this:

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

      Text that is displayed in sidebar caption.

    • callback
      function

      A callback invoked when the sidebar is created.

      The callback parameter should be a function that looks like this:

      (result: ExtensionSidebarPane) => {...}

ExtensionPanel

Represents a panel created by extension.

Properties

  • onHidden
    events.Event<function>

    Fired when the user switches away from the panel.

    Add a listener like this:

    onHidden.addListener(listener)
    • listener
      function

      The listener parameter should be a function that looks like this:

      () => {...}
  • onSearch
    events.Event<function>

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

    Add a listener like this:

    onSearch.addListener(listener)
    • listener
      function

      The listener parameter should be a function that looks like this:

      (action: string, queryString: string) => {...}
      • action
        string

        Type of search action being performed.

      • queryString
        string

        Query string (only for 'performSearch').

  • onShown
    events.Event<function>

    Fired when the user switches to the panel.

    Add a listener like this:

    onShown.addListener(listener)
    • listener
      function

      The listener parameter should be a function that looks like this:

      (window: object) => {...}
      • window
        object

        The JavaScript window object of panel's page.

        • prototype
          Window
  • createStatusBarButton
    function

    Appends a button to the status bar of the panel.

    The createStatusBarButton function looks like this:

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

      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.

    • tooltipText
      string

      Text shown as a tooltip when user hovers the mouse over the button.

    • disabled
      boolean

      Whether the button is disabled.

    • returns

ExtensionSidebarPane

A sidebar created by the extension.

Properties

  • onHidden
    events.Event<function>

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

    Add a listener like this:

    onHidden.addListener(listener)
    • listener
      function

      The listener parameter should be a function that looks like this:

      () => {...}
  • onShown
    events.Event<function>

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

    Add a listener like this:

    onShown.addListener(listener)
    • listener
      function

      The listener parameter should be a function that looks like this:

      (window: object) => {...}
      • window
        object

        The JavaScript window object of the sidebar page, if one was set with the setPage() method.

        • prototype
          Window
  • setExpression
    function

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

    The setExpression function looks like this:

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

      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.

    • rootTitle
      string

      An optional title for the root of the expression tree.

    • callback
      function

      A callback invoked after the sidebar pane is updated with the expression evaluation results.

      The callback parameter should be a function that looks like this:

      () => {...}
  • setHeight
    function

    Sets the height of the sidebar.

    The setHeight function looks like this:

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

      A CSS-like size specification, such as '100px' or '12ex'.

  • setObject
    function

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

    The setObject function looks like this:

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

      An object to be displayed in context of the inspected page. Evaluated in the context of the caller (API client).

    • rootTitle
      string

      An optional title for the root of the expression tree.

    • callback
      function

      A callback invoked after the sidebar is updated with the object.

      The callback parameter should be a function that looks like this:

      () => {...}
  • setPage
    function

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

    The setPage function looks like this:

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

      Relative path of an extension page to display within the sidebar.

SourcesPanel

Since Chrome 41.

Represents the Sources panel.

Properties

  • onSelectionChanged
    events.Event<function>

    Fired when an object is selected in the panel.

    Add a listener like this:

    onSelectionChanged.addListener(listener)
    • listener
      function

      The listener parameter should be a function that looks like this:

      () => {...}
  • createSidebarPane
    function

    Creates a pane within panel's sidebar.

    The createSidebarPane function looks like this:

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

      Text that is displayed in sidebar caption.

    • callback
      function

      A callback invoked when the sidebar is created.

      The callback parameter should be a function that looks like this:

      (result: ExtensionSidebarPane) => {...}

Properties

elements

Elements panel.

sources

Sources panel.

themeName

Since Chrome 59.

The name of the color theme set in user's DevTools settings. Possible values: default (the default) and dark.

Type

string

Methods

create

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

Creates an extension panel.

Parameters

  • title
    string

    Title that is displayed next to the extension icon in the Developer Tools toolbar.

  • iconPath
    string

    Path of the panel's icon relative to the extension directory.

  • pagePath
    string

    Path of the panel's HTML page relative to the extension directory.

  • callback
    function

    A function that is called when the panel is created.

    The callback parameter should be a function that looks like this:

    (panel: ExtensionPanel) => {...}
    • An ExtensionPanel object representing the created panel.

openResource

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

Requests DevTools to open a URL in a Developer Tools panel.

Parameters

  • url
    string

    The URL of the resource to open.

  • lineNumber
    number

    Specifies the line number to scroll to when the resource is loaded.

  • callback
    function

    A function that is called when the resource has been successfully loaded.

    The callback parameter should be a function that looks like this:

    () => {...}

setOpenResourceHandler

devtools.panels.setOpenResourceHandler(callback: function)

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

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.