Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.chrome.com/docs/extensions/reference/api/devtools/panels below:

chrome.devtools.panels | API | Chrome for Developers

Stay organized with collections Save and categorize content based on your preferences.

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.

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 parts of the chrome.devtools API, as well as all other extension APIs.

You can use the devtools.panels.setOpenResourceHandler method to install a callback function that handles user requests to open a resource (typically, a click 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.

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

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

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

The screenshot illustrates the effect this example would have on Developer Tools window:

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

A button created by the extension.

• onClicked

  Event<functionvoidvoid>

  Fired when the button is clicked.

  The onClicked.addListener function looks like:

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

  • The callback parameter looks like:

    () => 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) => {...}

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

Represents the Elements panel.

• onSelectionChanged

  Event<functionvoidvoid>

  Fired when an object is selected in the panel.

  The onSelectionChanged.addListener function looks like:

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

  • The callback parameter looks like:

    () => void

• Creates a pane within panel's sidebar.

  The createSidebarPane function looks like:

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

  • Text that is displayed in sidebar caption.

  • The callback parameter looks like:

    (result: ExtensionSidebarPane) => void

    • An ExtensionSidebarPane object for created sidebar pane.

Represents a panel created by an extension.

• onHidden

  Event<functionvoidvoid>

  Fired when the user switches away from the panel.

  The onHidden.addListener function looks like:

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

  • The callback parameter looks like:

    () => void

• onSearch

  Event<functionvoidvoid>

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

  The onSearch.addListener function looks like:

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

  • The callback parameter looks like:

    (action: string, queryString?: string) => void

    • queryString

      string optional

• onShown

  Event<functionvoidvoid>

  Fired when the user switches to the panel.

  The onShown.addListener function looks like:

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

  • The callback parameter looks like:

    (window: Window) => void

• createStatusBarButton

  void

  Appends a button to the status bar of the panel.

  The createStatusBarButton function looks like:

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

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

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

  • Whether the button is disabled.

• Shows the panel by activating the corresponding tab.

  The show function looks like:

  () => {...}

A sidebar created by the extension.

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

  The onHidden.addListener function looks like:

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

  • The callback parameter looks like:

    () => void

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

  The onShown.addListener function looks like:

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

  • The callback parameter looks like:

    (window: Window) => void

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

  The setExpression function looks like:

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

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

  • An optional title for the root of the expression tree.

  • The callback parameter looks like:

    () => void

• Sets the height of the sidebar.

  The setHeight function looks like:

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

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

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

  The setObject function looks like:

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

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

  • An optional title for the root of the expression tree.

  • The callback parameter looks like:

    () => void

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

  The setPage function looks like:

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

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

Represents the Sources panel.

• onSelectionChanged

  Event<functionvoidvoid>

  Fired when an object is selected in the panel.

  The onSelectionChanged.addListener function looks like:

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

  • The callback parameter looks like:

    () => void

• Creates a pane within panel's sidebar.

  The createSidebarPane function looks like:

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

  • Text that is displayed in sidebar caption.

  • The callback parameter looks like:

    (result: ExtensionSidebarPane) => void

    • An ExtensionSidebarPane object for created sidebar pane.

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

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

Creates an extension panel.

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

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

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

• callback

  function optional

  The callback parameter looks like:

  (panel: ExtensionPanel) => void

  • An ExtensionPanel object representing the created panel.

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): void

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

• The URL of the resource to open.

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

• columnNumber

  number optional

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

• callback

  function optional

  The callback parameter looks like:

  () => void

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

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.

• callback

  function optional

  The callback parameter looks like:

  (resource: Resource, lineNumber: number) => void

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-08-11 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-11 UTC."],[],[]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4