Beschreibung
Verwenden Sie die chrome.devtools.panels
API, um Ihre Erweiterung in die Benutzeroberfläche des Fensters der Entwicklertools zu integrieren: Sie können eigene Bereiche erstellen, auf vorhandene Bereiche zugreifen und Seitenleisten hinzufügen.
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 APIs für Entwicklertools finden Sie unter Zusammenfassung der Entwicklertools-APIs.
Überblick
Jeder Erweiterungsbereich und jede Seitenleiste wird als separate HTML-Seite angezeigt. Alle Erweiterungsseiten, die im Fenster der Entwicklertools angezeigt werden, haben Zugriff auf alle Module in der chrome.devtools
API und auf die chrome.extension API. Andere Erweiterungs-APIs sind für die Seiten im Fenster der Entwicklertools nicht verfügbar. Sie können sie jedoch aufrufen, indem Sie eine Anfrage an die Hintergrundseite Ihrer Erweiterung senden, ähnlich wie bei den 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 höchstens einer der installierten Handler aufgerufen. Nutzer können im Dialogfeld „Einstellungen“ der Entwicklertools entweder das Standardverhalten oder eine Erweiterung für die Verarbeitung offener Ressourcenanfragen festlegen. Wenn eine Erweiterung setOpenResourceHandler()
mehrmals aufruft, wird nur der letzte Handler beibehalten.
Beispiele
Mit dem folgenden Code wird ein in Panel.html
enthaltenes Feld hinzugefügt, das in der Symbolleiste der Entwicklertools durch FontPicker.png
dargestellt und als Schriftartauswahl bezeichnet wird:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
Mit dem folgenden Code wird dem Steuerfeld „Elemente“ ein in Sidebar.html
enthaltener Seitenleistenbereich mit dem Titel Font Properties (Schriftarteneigenschaften) hinzugefügt. Anschließend wird seine Höhe auf 8ex
festgelegt:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
Dieser Screenshot zeigt die Auswirkungen, die die obigen Beispiele auf das Fenster der Entwicklertools haben würden:
Wenn Sie diese API testen möchten, installieren Sie das API-Beispiel für die Entwicklertools-Bereiche aus dem Repository chrome-extension-sample.
Typen
Button
Eine von der Erweiterung erstellte Schaltfläche.
Attribute
-
onClicked
Ereignis<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. Falls einige Argumente weggelassen werden oder
null
, 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
Boolescher Wert optional
Gibt an, ob die Schaltfläche deaktiviert ist.
-
ElementsPanel
Stellt das Steuerfeld „Elemente“ dar.
Attribute
-
onSelectionChanged
Ereignis<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 ein Fenster innerhalb der Seitenleiste des Steuerfelds.
Die Funktion
createSidebarPane
sieht so aus:(title: string, callback?: function) => {...}
-
Titel
String
Text, der in der Bildunterschrift der Seitenleiste angezeigt wird.
-
callback
Funktion optional
Der Parameter
callback
sieht so aus:(result: ExtensionSidebarPane) => void
-
Ergebnis
Ein ExtensionSidebarPane-Objekt zum Erstellen eines Seitenleistenbereichs.
-
-
ExtensionPanel
Stellt ein durch eine Erweiterung erstelltes Steuerfeld dar.
Attribute
-
onHidden
Ereignis<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
Ereignis<functionvoidvoid>
Auslösung bei einer Suchaktion (Start einer neuen Suche, Suchergebnisnavigation oder Abbruch einer 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
Ereignis<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
Fügt der Statusleiste des Steuerfelds eine Schaltfläche 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 Bild mit 64 × 24 Pixel enthalten, das aus zwei Symbolen mit der Größe 32 × 24 Pixel 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
-
ExtensionSidebarPane
Eine von der Erweiterung erstellte Seitenleiste.
Attribute
-
onHidden
Ereignis<functionvoidvoid>
Wird ausgelöst, wenn der Seitenleistenbereich ausgeblendet wird, wenn der Nutzer von dem Steuerfeld weggeht, in dem der Seitenleisten gehostet wird.
Die Funktion
onHidden.addListener
sieht so aus:(callback: function) => {...}
-
callback
Funktion
Der Parameter
callback
sieht so aus:() => void
-
-
onShown
Ereignis<functionvoidvoid>
Wird ausgelöst, wenn die Seitenleiste sichtbar wird, wenn der Nutzer zu dem Steuerfeld wechselt, in dem sie 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 untersuchten Seite ausgewertet wird. Das Ergebnis wird im Seitenleistenfenster angezeigt.
Die Funktion
setExpression
sieht so aus:(expression: string, rootTitle?: string, callback?: function) => {...}
-
expression
String
Ein Ausdruck, der im Kontext der untersuchten Seite ausgewertet werden soll. JavaScript-Objekte und DOM-Knoten werden in einer maximierbaren Baumstruktur angezeigt, ähnlich wie bei der Konsole/Smartwatch.
-
rootTitle
String optional
Ein optionaler Titel für den Stamm der Ausdrucksstruktur.
-
callback
Funktion optional
Der Parameter
callback
sieht so aus:() => void
-
-
setHeight
void
Legt die Höhe der Seitenleiste fest.
Die Funktion
setHeight
sieht so aus:(height: string) => {...}
-
Höhe
String
Eine CSS-ähnliche Größenspezifikation wie
'100px'
oder'12ex'
.
-
-
setObject
void
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 untersuchten Seite angezeigt werden soll. Wird im Kontext des Aufrufers (API-Client) ausgewertet.
-
rootTitle
String optional
Ein optionaler Titel für den Stamm der Ausdrucksstruktur.
-
callback
Funktion optional
Der Parameter
callback
sieht so aus:() => void
-
-
setPage
void
Legt fest, dass eine HTML-Seite im Seitenleistenfenster angezeigt wird.
Die Funktion
setPage
sieht so aus:(path: string) => {...}
-
Pfad
String
Der relative Pfad einer Erweiterungsseite, der in der Seitenleiste angezeigt werden soll.
-
SourcesPanel
Stellt das Steuerfeld „Quellen“ dar.
Attribute
-
onSelectionChanged
Ereignis<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 ein Fenster innerhalb der Seitenleiste des Steuerfelds.
Die Funktion
createSidebarPane
sieht so aus:(title: string, callback?: function) => {...}
-
Titel
String
Text, der in der Bildunterschrift der Seitenleiste angezeigt wird.
-
callback
Funktion optional
Der Parameter
callback
sieht so aus:(result: ExtensionSidebarPane) => void
-
Ergebnis
Ein ExtensionSidebarPane-Objekt zum Erstellen eines Seitenleistenbereichs.
-
-
Attribute
elements
Steuerfeld „Elemente“.
Typ
sources
Quellenbereich.
Typ
themeName
Der Name des Farbdesigns, das in den Entwicklertools-Einstellungen des Nutzers festgelegt wurde. Mögliche Werte: default
(Standardeinstellung) und dark
.
Typ
String
Methoden
create()
chrome.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
callback?: function,
)
Erstellt einen Erweiterungsbereich.
Parameters
-
Titel
String
Titel, der neben dem Erweiterungssymbol in der Symbolleiste der Entwicklertools angezeigt wird.
-
iconPath
String
Pfad des Symbols für den Bereich im Verhältnis zum Verzeichnis der Erweiterungen.
-
pagePath
String
Pfad der HTML-Seite des Bereichs im Verhältnis zum Verzeichnis mit den Erweiterungen.
-
callback
Funktion optional
Der Parameter
callback
sieht so aus:(panel: ExtensionPanel) => void
-
Kartenfeld
Ein ExtensionPanel-Objekt, das das erstellte Steuerfeld darstellt.
-
openResource()
chrome.devtools.panels.openResource(
url: string,
lineNumber: number,
columnNumber?: number,
callback?: function,
)
Fordert die Entwicklertools an, eine URL in einem Bereich für Entwicklertools zu öffnen
Parameters
-
url
String
Die URL der zu öffnenden Ressource.
-
lineNumber
Zahl
Gibt die Zeilennummer an, zu der gescrollt werden soll, wenn die Ressource geladen ist.
-
columnNumber
Nummer optional
Chrome 114 und höherGibt die Spaltennummer an, zu der beim Laden der Ressource gescrollt werden soll.
-
callback
Funktion optional
Der Parameter
callback
sieht so aus:() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
Gibt die Funktion an, die aufgerufen werden soll, wenn der Nutzer im Fenster der Entwicklertools auf einen Ressourcenlink klickt. Um die Festlegung des Handlers aufzuheben, rufen Sie entweder die Methode ohne Parameter auf oder übergeben Sie null als Parameter.
Parameters
-
callback
Funktion optional
Der Parameter
callback
sieht so aus:(resource: Resource) => void
-
Ressource
Ein
devtools.inspectedWindow.Resource
-Objekt für die Ressource, auf die geklickt wurde.
-