Beschreibung
Mit der chrome.devtools.panels
API kannst du deine Erweiterung in die Benutzeroberfläche des Fensters der Entwicklertools einbinden. So kannst du eigene Bereiche erstellen, auf vorhandene Bereiche zugreifen und Seitenleisten hinzufügen.
Jedes Erweiterungsfeld und jede Seitenleiste wird als separate HTML-Seite angezeigt. Alle Erweiterungsseiten werden angezeigt
im Fenster der Entwicklertools Zugriff auf alle Teile der chrome.devtools
API sowie auf alle
andere Erweiterungs-APIs.
Sie können die Methode devtools.panels.setOpenResourceHandler
verwenden, um eine Callback-Funktion zu installieren.
die Nutzeranfragen zum Öffnen einer Ressource verarbeitet (normalerweise durch Klicken auf einen Ressourcenlink im
Entwicklertools). Höchstens einer der installierten Handler wird aufgerufen. die Nutzer angeben können (mithilfe
im Dialogfeld „Einstellungen der Entwicklertools“, entweder das Standardverhalten oder eine Erweiterung zur Verarbeitung der Ressource.
offenen Anfragen. Wenn eine Erweiterung setOpenResourceHandler()
mehrmals aufruft, wird nur die letzte
der Handler beibehalten wird.
Eine allgemeine Einführung zur Verwendung der Entwicklertools-APIs finden Sie in der Zusammenfassung der Entwicklertools.
Manifest
Die folgenden Schlüssel müssen im Manifest deklariert werden, um diese API verwenden zu können.
"devtools_page"
Beispiel
Mit dem folgenden Code wird ein in Panel.html
enthaltenes Feld hinzugefügt, das durch FontPicker.png
auf der
in der Symbolleiste der Entwicklertools mit der Bezeichnung Schriftartauswahl:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
Mit dem folgenden Code wird ein Seitenleistenbereich hinzugefügt, der in Sidebar.html
mit dem Titel Font Properties (Schrifteigenschaften) zu
das Steuerfeld "Elemente" und legt dann seine Höhe auf 8ex
fest:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
Der Screenshot zeigt, wie sich dieses Beispiel auf das Fenster der Entwicklertools auswirken würde:
<ph type="x-smartling-placeholder">![Symbolbereich für Erweiterungen in der Entwicklertools-Symbolleiste](https://developer.chrome.com/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=6&hl=de)
Wenn Sie diese API ausprobieren möchten, installieren Sie das Beispiel für die devtools Panels API unter chrome-extension-samples zu erstellen.
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
voidm
Aktualisiert die Attribute der Schaltfläche. Wenn 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
voidm
Erstellt einen Bereich in 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 für den erstellten Seitenleistenbereich.
-
-
ExtensionPanel
Stellt einen durch Erweiterung erstellten Bereich 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>
Wird bei einer Suchaktion ausgelöst, z. B. beim Starten einer neuen Suche, in der Suchergebnisnavigation oder beim Abbrechen 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
voidm
Hängt der Statusleiste des Steuerfelds eine Schaltfläche 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 x 24 Pixel enthalten, das aus zwei Symbolen im Format 32 x 24 besteht. Das linke Symbol wird verwendet, wenn die Schaltfläche inaktiv ist. wird das rechte Symbol angezeigt, wenn die Taste 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, weil der Nutzer nicht mehr zu dem Bereich wechselt, in dem der Seitenleistenbereich 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 der Seitenleistenbereich sichtbar wird, da der Nutzer zu dem Bereich wechselt, in dem es 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
voidm
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 untersuchten Seite ausgewertet werden soll. JavaScript-Objekte und DOM-Knoten werden in einer erweiterbaren Baumstruktur ähnlich der Konsole/Uhr angezeigt.
-
rootTitle
String optional
Ein optionaler Titel für den Stamm der Ausdrucksstruktur.
-
callback
Funktion optional
Der Parameter
callback
sieht so aus:() => void
-
-
setHeight
voidm
Legt die Höhe der Seitenleiste fest.
Die Funktion
setHeight
sieht so aus:(height: string) => {...}
-
Höhe
String
Eine CSS-ähnliche Größenspezifikation, z. B.
'100px'
oder'12ex'
.
-
-
setObject
voidm
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
voidm
Legt eine HTML-Seite fest, die im Seitenleistenbereich angezeigt werden soll.
Die Funktion
setPage
sieht so aus:(path: string) => {...}
-
Pfad
String
Der relative Pfad einer Erweiterungsseite zur Anzeige in der Seitenleiste.
-
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
voidm
Erstellt einen Bereich in 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 für den erstellten Seitenleistenbereich.
-
-
Attribute
elements
Bereich „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.
Parameter
-
Titel
String
Titel, der neben dem Erweiterungssymbol in der Symbolleiste der Entwicklertools angezeigt wird.
-
iconPath
String
Pfad des Bereichssymbols 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
-
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.
Parameter
-
URL
String
Die URL der zu öffnenden Ressource.
-
lineNumber
Zahl
Gibt die Nummer der Zeile an, zu der gescrollt werden soll, wenn die Ressource geladen wird.
-
columnNumber
Zahl optional
Chrome 114 und höherGibt die Spaltennummer an, zu der gescrollt werden soll, wenn die Ressource geladen wird.
-
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 den Handler aufzuheben, rufen Sie entweder die Methode ohne Parameter auf oder übergeben Sie null als Parameter.
Parameter
-
callback
Funktion optional
Der Parameter
callback
sieht so aus:(resource: Resource) => void
-
Ressource
Ein
devtools.inspectedWindow.Resource
-Objekt für die angeklickte Ressource.
-