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

Allowed in: Devtools pages only

Button
ElementsPanel
ExtensionPanel
ExtensionSidebarPane
SourcesPanel
elements
onThemeChanged
sources
themeName
create
openResource
setOpenResourceHandler
elements: ElementsPanel

Elements panel.

onThemeChanged: WebExtEvent<(themeName: string) => void>

Fired when the devtools theme changes.

The name of the current devtools theme.

sources: SourcesPanel

Sources panel.

themeName: string

The name of the current devtools theme.

  • 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, or an empty string to use the default extension icon as the panel icon.

    • pagePath: string

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

    Returns Promise<ExtensionPanel>

  • 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.

    Returns Promise<void>

    Unsupported on Firefox at this time.

  • 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.

    Returns Promise<Resource>

    Unsupported on Firefox at this time.