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.

Manifest

The following keys must be declared in the manifest to use this API.

"devtools_page"

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

To try this API, install the devtools panels API example from the chrome-extension-samples repository.

Types

Button

A button created by the extension.

Properties

  • onClicked

    Event<functionvoidvoid>

    Fired when the button is clicked.

    The onClicked.addListener function looks like: 

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

    • callback

      function

      The callback parameter looks like: 

      () => void

  • update

    void

    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: 

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

    • iconPath

      string optional

      Path to the new icon of the button.

    • tooltipText

      string optional

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

    • disabled

      boolean optional

      Whether the button is disabled.

ElementsPanel

Represents the Elements panel.

Properties

  • onSelectionChanged

    Event<functionvoidvoid>

    Fired when an object is selected in the panel.

    The onSelectionChanged.addListener function looks like: 

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

    • callback

      function

      The callback parameter looks like: 

      () => void

  • createSidebarPane

    void

    Promise

    Creates a pane within panel's sidebar.

    The createSidebarPane function looks like: 

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

    • title

      string

      Text that is displayed in sidebar caption.

    • callback

      function optional

      The callback parameter looks like: 

      (result: ExtensionSidebarPane) => void

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152+

      A callback invoked when the sidebar is created.

      Promises are only supported for Manifest V3 and later, other platforms need to use callbacks.

ExtensionPanel

Represents a panel created by an extension.

Properties

  • onHidden

    Event<functionvoidvoid>

    Fired when the user switches away from the panel.

    The onHidden.addListener function looks like: 

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

    • callback