Chrome unterstützt jetzt den standardisierten Namespace browser.* (verfügbar ab Chrome 148). Wir aktualisieren die Dokumentation schrittweise. Weitere Informationen finden Sie in unserem Leitfaden zur Umstellung.

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

chrome.devtools.panels

Beschreibung

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

Jeder Erweiterungsbereich und jede Seitenleiste wird als separate HTML-Seite angezeigt. Alle Erweiterungsseiten, die im Fenster „Entwicklertools“ angezeigt werden, haben Zugriff auf alle Teile der chrome.devtools API sowie auf alle anderen Erweiterungs-APIs.

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 Toolfenster „Entwicklertools“). Es wird maximal einer der installierten Handler aufgerufen. Nutzer können (über das Dialogfeld „Einstellungen“ der Entwicklertools) entweder das Standardverhalten oder eine Erweiterung zum Verarbeiten von Anfragen zum Öffnen von Ressourcen angeben. Wenn eine Erweiterung setOpenResourceHandler() mehrmals aufruft, wird nur der letzte Handler beibehalten.

Eine allgemeine Einführung in die Verwendung von Entwicklertool-APIs finden Sie in der Zusammenfassung der Entwicklertool-APIs.

Manifest

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

"devtools_page"

Beispiel

Mit dem folgenden Code wird ein in Panel.html enthaltenes Steuerfeld hinzugefügt, das in der Symbolleiste der Entwicklertools durch 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 Schriftarteigenschaften 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");
  }
);

Der Screenshot zeigt die Auswirkungen dieses Beispiels auf das Toolfenster „Entwicklertools“:

Bereich für Erweiterungssymbole in der Symbolleiste der Entwicklertools.

Wenn Sie diese API ausprobieren möchten, installieren Sie das Beispiel für die DevTools Panels API aus dem Repository chrome-extension-samples.

Typen

Button

Eine von der Erweiterung erstellte Schaltfläche.

Attribute

onClicked

Event<functionvoidvoid>

Wird ausgelöst, wenn auf die Schaltfläche 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 der Schaltfläche. Wenn einige der Argumente weggelassen werden oder null sind, 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 der Schaltfläche.
- 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 die Schaltfläche deaktiviert ist.

ElementsPanel

Stellt den Bereich „Elemente“ dar.

Attribute

onSelectionChanged

Event<functionvoidvoid>

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

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

void

Erstellt einen Bereich in der Seitenleiste des Steuerfelds.

Die Funktion createSidebarPane sieht so aus:
```
(title: string) => {...}
```
- Titel
  
  String
  
  Text, der in der Seitenleisten-Untertitelung angezeigt wird.
- Gibt zurück
  Promise<ExtensionSidebarPane>
  
  Chrome 152 oder höher
  
  Ein Callback, der aufgerufen wird, wenn die Seitenleiste erstellt wird.

ExtensionPanel

Stellt ein von einer Erweiterung erstelltes Steuerfeld 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 in Suchergebnissen oder Abbruch 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 Steuerfeld 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

Hängt einen Button an die Statusleiste des Bereichs an.

Die Funktion createStatusBarButton sieht so aus:
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- iconPath
  
  String
  
  Pfad zum Symbol der Schaltfläche. Die Datei sollte ein Bild mit 64 × 24 Pixeln enthalten, das aus zwei Symbolen mit 32 × 24 Pixeln besteht. 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 die Schaltfläche deaktiviert ist.
- Gibt zurück
  Button
Einblenden

void

Chrome 140+ browser.* seit Chrome 152

Zeigt das Steuerfeld 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 den Bereich 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 Bereich wechselt, in dem er gehostet wird.

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

void

Legt einen Ausdruck fest, der auf der geprüften Seite ausgewertet wird. Das Ergebnis wird in der Seitenleiste angezeigt.

Die Funktion setExpression sieht so aus:
```
(expression: string, rootTitle?: string) => {...}
```
- Ausdruck
  
  String
  
  Ein Ausdruck, der im Kontext der geprüften Seite ausgewertet werden soll. JavaScript-Objekte und DOM-Knoten werden in einer erweiterbaren Baumstruktur angezeigt, ähnlich wie in der Konsole/Beobachtung.
- rootTitle
  
  String optional
  
  Ein optionaler Titel für den Stamm des Ausdrucksbaums.
- Gibt zurück
  Promise<void>
  
  Chrome 152 oder höher
  
  Ein Callback, der aufgerufen wird, nachdem der Bereich in der Seitenleiste mit den Ergebnissen der Ausdrucksauswertung aktualisiert wurde.
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

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

Die Funktion setObject sieht so aus:
```
(jsonObject: string, rootTitle?: string) => {...}
```
- 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.
- Gibt zurück
  Promise<void>
  
  Chrome 152 oder höher
  
  Ein Callback, der aufgerufen wird, nachdem die Seitenleiste mit dem Objekt aktualisiert wurde.
setPage

void

Legt eine HTML-Seite fest, die im Seitenleistenbereich angezeigt werden soll.

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

SourcesPanel

Stellt den Bereich „Quellen“ dar.

Attribute

onSelectionChanged

Event<functionvoidvoid>

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

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

void

Erstellt einen Bereich in der Seitenleiste des Steuerfelds.

Die Funktion createSidebarPane sieht so aus:
```
(title: string) => {...}
```
- Titel
  
  String
  
  Text, der in der Seitenleisten-Untertitelung angezeigt wird.
- Gibt zurück
  Promise<ExtensionSidebarPane>
  
  Chrome 152 oder höher
  
  Ein Callback, der aufgerufen wird, wenn die Seitenleiste erstellt wird.

Theme

Chrome 99+ browser.* seit Chrome 152

Von den Entwicklertools verwendetes Design.

Enum

"default"
Standarddesign für Entwicklertools. Dies ist immer das helle Design.

"dark"
Dunkles Design.

Attribute

elements

Bereich „Elemente“:

Typ

ElementsPanel

sources

Quellenbereich

Typ

SourcesPanel

themeName

Chrome 59 oder höher browser.* seit Chrome 152

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

Typ

String

Methoden

create()

browser.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
): Promise<ExtensionPanel>

Erstellt einen Erweiterungsbereich.

Parameter

Titel

String

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

String

Pfad des Symbols des Bereichs relativ zum Verzeichnis der Erweiterung.
pagePath

String

Pfad der HTML-Seite des Bereichs relativ zum Verzeichnis der Erweiterung.

Ausgabe

Promise<ExtensionPanel>

Chrome 152 oder höher

Eine Funktion, die beim Erstellen des Bereichs aufgerufen wird.

openResource()

browser.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
): 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+ browser.* seit Chrome 152

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

Ausgabe

Promise<void>

Chrome 152 oder höher

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

setOpenResourceHandler()

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

Gibt die Funktion an, die aufgerufen werden soll, wenn der Nutzer im Toolfenster „Entwicklertools“ auf einen Ressourcenlink klickt. Wenn Sie den Handler deaktivieren möchten, rufen Sie die Methode entweder ohne Parameter auf oder übergeben Sie „null“ als Parameter.

Parameter

callback

function 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+ browser.* seit Chrome 152

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

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

Parameter

callback

function 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

Beispiel

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