Manifest V2-Erweiterungen wurden am 31. August 2026 aus dem Chrome Web Store entfernt. Migriere deine Erweiterung zu Manifest V3, damit sie Nutzern wieder zur Verfügung steht.

Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

chrome.devtools.panels

Aktualisierungsdatum: 2026-09-25 robots: noindex

Beschreibung

Mit der chrome.devtools.panels API können Sie Ihre Erweiterung in die Benutzeroberfläche des Entwicklertools-Fensters einbinden: Erstellen Sie eigene Bereiche, greifen Sie auf vorhandene Bereiche zu und fügen Sie Seitenleisten hinzu.

Manifest

Die folgenden Schlüssel müssen im Manifest deklariert werden, um diese API verwenden zu können.

"devtools_page"

Eine allgemeine Einführung in die Verwendung von Developer Tools-APIs finden Sie unter DevTools APIs summary.

Übersicht

Jedes Erweiterungsfeld und jede Seitenleiste wird als separate HTML-Seite angezeigt. Alle Erweiterungsseiten, die im Entwicklertools-Fenster angezeigt werden, haben Zugriff auf alle Module in der chrome.devtools API sowie auf die chrome.extension API. Andere Erweiterungs-APIs sind für die Seiten im Entwicklertools-Fenster nicht verfügbar. Sie können sie jedoch aufrufen, indem Sie eine Anfrage an die Hintergrundseite Ihrer Erweiterung senden, ähnlich wie in Inhaltsskripts.

Mit der Methode devtools.panels.setOpenResourceHandler können Sie eine Callback-Funktion installieren, die Nutzeranfragen zum Öffnen einer Ressource verarbeitet (in der Regel ein Klick auf einen Ressourcenlink im Fenster „Entwicklertools“). Es wird maximal einer der installierten Handler aufgerufen. Nutzer können im Dialogfeld „Einstellungen für Entwicklertools“ entweder das Standardverhalten oder eine Erweiterung angeben, die Anfragen zum Öffnen von Ressourcen verarbeitet. Wenn eine Erweiterung setOpenResourceHandler() mehrmals aufruft, wird nur der letzte Handler beibehalten.

Beispiele

Mit dem folgenden Code wird ein Bereich hinzugefügt, der in Panel.html enthalten ist und in der Symbolleiste der Entwicklertools als FontPicker.png dargestellt und mit Schriftartauswahl beschriftet ist:

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

Mit dem folgenden Code wird dem Bereich „Elemente“ ein Seitenleistenbereich hinzugefügt, der in Sidebar.html enthalten ist und den Titel Schriftartattribute hat. Anschließend wird die Höhe auf 8ex festgelegt:

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

Dieser Screenshot zeigt, wie sich die oben genannten Beispiele auf das Entwicklertools-Fenster auswirken:

Symbolleiste für Erweiterungen in der Symbolleiste der Entwicklertools

Wenn Sie diese API ausprobieren möchten, installieren Sie das devtools panels API example aus dem Repository chrome-extension-samples.

Typen

Button

Ein von der Erweiterung erstellter Button.

Attribute

onClicked

Event<functionvoidvoid>

Wird ausgelöst, wenn auf den Button geklickt wird.

Die Funktion onClicked.addListener sieht so aus:
```
(callback: function) => {...}
```
- callback
  
  Funktion
  
  Der Parameter callback sieht so aus:
```
() => void
```
update

void

Aktualisiert die Attribute des Buttons. Wenn einige der Argumente weggelassen werden oder null ist, werden die entsprechenden Attribute nicht aktualisiert.

Die Funktion update sieht so aus:
```
(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
```
- iconPath
  
  String optional
  
  Pfad zum neuen Symbol des Buttons.
- tooltipText
  
  String optional
  
  Text, der als Kurzinfo angezeigt wird, wenn der Nutzer den Mauszeiger auf die Schaltfläche bewegt.
- deaktiviert
  
  Boolesch optional
  
  Gibt an, ob der Button deaktiviert ist.

ElementsPanel

Stellt den Bereich „Elemente“ dar.

Attribute

onSelectionChanged

Event<functionvoidvoid>

Wird ausgelöst, wenn ein Objekt im Bereich ausgewählt wird.

Die Funktion onSelectionChanged.addListener sieht so aus:
```
(callback: function) => {...}
```
- callback
  
  Funktion
  
  Der Parameter callback sieht so aus:
```
() => void
```
createSidebarPane

void

Promise

Erstellt einen Bereich in der Seitenleiste des Steuerfelds.

Die Funktion createSidebarPane sieht so aus:
```
(title: string, callback?: function) => {...}
```
- Titel
  
  String
  
  Text, der in der Seitenleistenüberschrift angezeigt wird.
- callback
  
  Funktion optional
  
  Der Parameter callback sieht so aus:
```
(result: ExtensionSidebarPane) => void
```
  - Ergebnis
    
    ExtensionSidebarPane
    
    Ein ExtensionSidebarPane-Objekt für den erstellten Seitenleistenbereich.
- Gibt zurück
  Promise<ExtensionSidebarPane>
  
  Chrome 152 und höher
  
  Ein Callback, der aufgerufen wird, wenn die Seitenleiste erstellt wird.
  
  Promises werden nur für Manifest V3 und höher unterstützt. Auf anderen Plattformen müssen Callbacks verwendet werden.

ExtensionPanel

Stellt ein von einer Erweiterung erstelltes Feld dar.

Attribute

onHidden

Event<functionvoidvoid>

Wird ausgelöst, wenn der Nutzer das Steuerfeld verlässt.

Die Funktion onHidden.addListener sieht so aus:
```
(callback: function) => {...}
```
- callback
  
  Funktion
  
  Der Parameter callback sieht so aus:
```
() => void
```
onSearch

Event<functionvoidvoid>

Wird bei einer Suchaktion ausgelöst (Start einer neuen Suche, Navigation zu einem Suchergebnis oder Abbrechen der Suche).

Die Funktion onSearch.addListener sieht so aus:
```
(callback: function) => {...}
```
- callback
  
  Funktion
  
  Der Parameter callback sieht so aus:
```
(action: string, queryString?: string) => void
```
  - Aktion
    
    String
  - queryString
    
    String optional
onShown

Event<functionvoidvoid>

Wird ausgelöst, wenn der Nutzer zum Bereich wechselt.

Die Funktion onShown.addListener sieht so aus:
```
(callback: function) => {...}
```
- callback
  
  Funktion
  
  Der Parameter callback sieht so aus:
```
(window: Window) => void
```
  - Fenster
    
    Fenster
createStatusBarButton

void

Fügt der Statusleiste des Bereichs einen Button hinzu.

Die Funktion createStatusBarButton sieht so aus:
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- iconPath
  
  String
  
  Pfad zum Symbol der Schaltfläche. Die Datei sollte ein 64 × 24 Pixel großes Bild mit zwei 32 × 24 Pixel großen Symbolen enthalten. Das linke Symbol wird verwendet, wenn die Schaltfläche inaktiv ist. Das rechte Symbol wird angezeigt, wenn die Schaltfläche gedrückt wird.
- tooltipText
  
  String
  
  Text, der als Kurzinfo angezeigt wird, wenn der Nutzer den Mauszeiger auf die Schaltfläche bewegt.
- deaktiviert
  
  boolean
  
  Gibt an, ob der Button deaktiviert ist.
- Gibt zurück
  Button
Einblenden

void

Chrome 140 und höher

Zeigt den Bereich an, indem der entsprechende Tab aktiviert wird.

Die Funktion show sieht so aus:
```
() => {...}
```

ExtensionSidebarPane

Eine von der Erweiterung erstellte Seitenleiste.

Attribute

onHidden

Event<functionvoidvoid>

Wird ausgelöst, wenn der Seitenleistenbereich ausgeblendet wird, weil der Nutzer das Steuerfeld verlässt, in dem sich der Seitenleistenbereich befindet.

Die Funktion onHidden.addListener sieht so aus:
```
(callback: function) => {...}
```
- callback
  
  Funktion
  
  Der Parameter callback sieht so aus:
```
() => void
```
onShown

Event<functionvoidvoid>

Wird ausgelöst, wenn der Seitenleistenbereich sichtbar wird, weil der Nutzer zum entsprechenden Bereich wechselt.

Die Funktion onShown.addListener sieht so aus:
```
(callback: function) => {...}
```
- callback
  
  Funktion
  
  Der Parameter callback sieht so aus:
```
(window: Window) => void
```
  - Fenster
    
    Fenster
setExpression

void

Promise

Legt einen Ausdruck fest, der auf der untersuchten Seite ausgewertet wird. Das Ergebnis wird im Seitenleistenbereich angezeigt.

Die Funktion setExpression sieht so aus:
```
(expression: string, rootTitle?: string, callback?: function) => {...}
```
- Ausdruck
  
  String
  
  Ein Ausdruck, der im Kontext der geprüften Seite ausgewertet werden soll. JavaScript-Objekte und DOM-Knoten werden in einem aufklappbaren Baum ähnlich der Konsole/Überwachung angezeigt.
- rootTitle
  
  String optional
  
  Ein optionaler Titel für den Stamm des Ausdrucksbaums.
- callback
  
  Funktion optional
  
  Der Parameter callback sieht so aus:
```
() => void
```
- Gibt zurück
  Promise<void>
  
  Chrome 152 und höher
  
  Ein Callback, der aufgerufen wird, nachdem der Seitenleistenbereich mit den Ergebnissen der Ausdrucksauswertung aktualisiert wurde.
  
  Promises werden nur für Manifest V3 und höher unterstützt. Auf anderen Plattformen müssen Callbacks verwendet werden.
setHeight

void

Legt die Höhe der Seitenleiste fest.

Die Funktion setHeight sieht so aus:
```
(height: string) => {...}
```
- Höhe
  
  String
  
  Eine CSS-ähnliche Größenangabe, z. B. '100px' oder '12ex'.
setObject

void

Promise

Legt ein JSON-kompatibles Objekt fest, das im Seitenleistenbereich angezeigt werden soll.

Die Funktion setObject sieht so aus:
```
(jsonObject: string, rootTitle?: string, callback?: function) => {...}
```
- jsonObject
  
  String
  
  Ein Objekt, das im Kontext der geprüften Seite angezeigt werden soll. Wird im Kontext des Aufrufers (API-Client) ausgewertet.
- rootTitle
  
  String optional
  
  Ein optionaler Titel für den Stamm des Ausdrucksbaums.
- callback
  
  Funktion optional
  
  Der Parameter callback sieht so aus:
```
() => void
```
- Gibt zurück
  Promise<void>
  
  Chrome 152 und höher
  
  Ein Callback, der aufgerufen wird, nachdem die Seitenleiste mit dem Objekt aktualisiert wurde.
  
  Promises werden nur für Manifest V3 und höher unterstützt. Auf anderen Plattformen müssen Callbacks verwendet werden.
setPage

void

Legt fest, dass eine HTML-Seite im Seitenleistenbereich angezeigt wird.

Die Funktion setPage sieht so aus:
```
(path: string) => {...}
```
- Pfad
  
  String
  
  Relativer Pfad einer Erweiterungsseite, die in der Seitenleiste angezeigt werden soll.

SourcesPanel

Stellt den Quellenbereich dar.

Attribute

onSelectionChanged

Event<functionvoidvoid>

Wird ausgelöst, wenn ein Objekt im Bereich ausgewählt wird.

Die Funktion onSelectionChanged.addListener sieht so aus:
```
(callback: function) => {...}
```
- callback
  
  Funktion
  
  Der Parameter callback sieht so aus:
```
() => void
```
createSidebarPane

void

Promise

Erstellt einen Bereich in der Seitenleiste des Steuerfelds.

Die Funktion createSidebarPane sieht so aus:
```
(title: string, callback?: function) => {...}
```
- Titel
  
  String
  
  Text, der in der Seitenleistenüberschrift angezeigt wird.
- callback
  
  Funktion optional
  
  Der Parameter callback sieht so aus:
```
(result: ExtensionSidebarPane) => void
```
  - Ergebnis
    
    ExtensionSidebarPane
    
    Ein ExtensionSidebarPane-Objekt für den erstellten Seitenleistenbereich.
- Gibt zurück
  Promise<ExtensionSidebarPane>
  
  Chrome 152 und höher
  
  Ein Callback, der aufgerufen wird, wenn die Seitenleiste erstellt wird.
  
  Promises werden nur für Manifest V3 und höher unterstützt. Auf anderen Plattformen müssen Callbacks verwendet werden.

Theme

Chrome 99 und höher

Von den Entwicklertools verwendetes Design.

Enum

„default“
Standarddesign für die Entwicklertools. Das ist immer das helle Design.

„dark“
Dunkles Design

Attribute

elements

Bereich „Elemente“:

Typ

ElementsPanel

sources

Quellenbereich

Typ

SourcesPanel

themeName

Chrome 59 und höher

Der Name des Farbschemas, das in den Einstellungen der Entwicklertools des Nutzers festgelegt ist. Mögliche Werte: default (Standard) und dark.

Typ

String

Methoden

create()

Promise

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): Promise<ExtensionPanel>

Erstellt ein Erweiterungsfeld.

Parameter

Titel

String

Der Titel, der neben dem Erweiterungssymbol in der Symbolleiste der Entwicklertools angezeigt wird.
iconPath

String

Pfad des Symbols des Bereichs relativ zum Erweiterungsverzeichnis.
pagePath

String

Pfad der HTML-Seite des Bereichs relativ zum Erweiterungsverzeichnis.
callback

Funktion optional

Der Parameter callback sieht so aus:
```
(panel: ExtensionPanel) => void
```
- Bereich
  
  ExtensionPanel
  
  Ein ExtensionPanel-Objekt, das das erstellte Feld darstellt.

Ausgabe

Promise<ExtensionPanel>

Chrome 152 und höher

Eine Funktion, die beim Erstellen des Bereichs aufgerufen wird.

Promises werden nur für Manifest V3 und höher unterstützt. Auf anderen Plattformen müssen Callbacks verwendet werden.

openResource()

Promise

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

Fordert die Entwicklertools auf, eine URL in einem Entwicklertools-Bereich zu öffnen.

Parameter

URL

String

Die URL der Ressource, die geöffnet werden soll.
lineNumber

Zahl

Gibt die Zeilennummer an, zu der gescrollt werden soll, wenn die Ressource geladen wird.
columnNumber

number optional

Chrome 114 und höher

Gibt die Spaltennummer an, zu der gescrollt werden soll, wenn die Ressource geladen wird.
callback

Funktion optional

Der Parameter callback sieht so aus:
```
() => void
```

Ausgabe

Promise<void>

Chrome 152 und höher

Eine Funktion, die aufgerufen wird, wenn die Ressource erfolgreich geladen wurde.

Promises werden nur für Manifest V3 und höher unterstützt. Auf anderen Plattformen müssen Callbacks verwendet werden.

setOpenResourceHandler()

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

Gibt die Funktion an, die aufgerufen werden soll, wenn der Nutzer im Fenster „Entwicklertools“ auf einen Ressourcenlink klickt. Um den Handler zu entfernen, rufen Sie die Methode entweder ohne Parameter auf oder übergeben Sie „null“ als Parameter.

Parameter

callback

Funktion optional

Der Parameter callback sieht so aus:
```
(resource: Resource, lineNumber: number) => void
```
- Ressource
  
  Ressource
  
  Ein devtools.inspectedWindow.Resource-Objekt für die angeklickte Ressource.
- lineNumber
  
  Zahl
  
  Gibt die Zeilennummer innerhalb der Ressource an, auf die geklickt wurde.

setThemeChangeHandler()

Chrome 99 und höher

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

Gibt die Funktion an, die aufgerufen werden soll, wenn sich das aktuelle Design in den Entwicklertools ändert. Um den Handler zu entfernen, rufen Sie die Methode entweder ohne Parameter auf oder übergeben Sie null als Parameter.

Parameter

callback

Funktion optional

Der Parameter callback sieht so aus:
```
(theme: Theme) => void
```
- Design
  
  Design
  
  Aktuelles Design in den Entwicklertools.

chrome.devtools.panels Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Beschreibung

Manifest

Übersicht

Beispiele

Typen

Button

Attribute

ElementsPanel

Attribute

ExtensionPanel

Attribute

ExtensionSidebarPane

Attribute

SourcesPanel

Attribute

Theme

Enum

Attribute

elements

Typ

sources

Typ

themeName

Typ

Methoden

create()

Parameter

Ausgabe

openResource()

Parameter

Ausgabe

setOpenResourceHandler()

Parameter

setThemeChangeHandler()

Parameter

chrome.devtools.panels