chrome.devtools.panels

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.

Manifest

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

"devtools_page"

Eine allgemeine Einführung zur Verwendung der Entwicklertools-APIs finden Sie in der Zusammenfassung der Entwicklertools.

Übersicht

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

Sie können die Methode devtools.panels.setOpenResourceHandler verwenden, um eine Callback-Funktion zu installieren. die Nutzeranfragen zum Öffnen einer Ressource verarbeitet (normalerweise ein Klick 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.

Beispiele

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

Dieser Screenshot zeigt, wie sich die obigen Beispiele auf das Fenster der Entwicklertools auswirken würden:

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: <ph type="x-smartling-placeholder"></ph>

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

  • callback

    Funktion

    Der Parameter callback sieht so aus: <ph type="x-smartling-placeholder"></ph>

    () => 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: <ph type="x-smartling-placeholder"></ph>

  (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: <ph type="x-smartling-placeholder"></ph>

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

  • callback

    Funktion

    Der Parameter callback sieht so aus: <ph type="x-smartling-placeholder"></ph>

    () => void

• createSidebarPane

  voidm

  Erstellt einen Bereich in der Seitenleiste des Steuerfelds.

  Die Funktion createSidebarPane sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

  • Titel

    String

    Text, der in der Bildunterschrift der Seitenleiste angezeigt wird.

  • callback

    Funktion optional

    Der Parameter callback sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (result: ExtensionSidebarPane) => void

    • Ergebnis

      ExtensionSidebarPane

      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: <ph type="x-smartling-placeholder"></ph>

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

  • callback

    Funktion

    Der Parameter callback sieht so aus: <ph type="x-smartling-placeholder"></ph>

    () => 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: <ph type="x-smartling-placeholder"></ph>

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

  • callback

    Funktion

    Der Parameter callback sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (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: <ph type="x-smartling-placeholder"></ph>

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

  • callback

    Funktion

    Der Parameter callback sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (window: Window) => void

    • Fenster

      Fenster

• createStatusBarButton

  voidm

  Hängt der Statusleiste des Steuerfelds eine Schaltfläche an.

  Die Funktion createStatusBarButton sieht so aus: <ph type="x-smartling-placeholder"></ph>

  (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

    Button

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: <ph type="x-smartling-placeholder"></ph>

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

  • callback

    Funktion

    Der Parameter callback sieht so aus: <ph type="x-smartling-placeholder"></ph>

    () => 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: <ph type="x-smartling-placeholder"></ph>

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

  • callback

    Funktion

    Der Parameter callback sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (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: <ph type="x-smartling-placeholder"></ph>

  (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: <ph type="x-smartling-placeholder"></ph>

    () => void

• setHeight

  voidm

  Legt die Höhe der Seitenleiste fest.

  Die Funktion setHeight sieht so aus: <ph type="x-smartling-placeholder"></ph>

  (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: <ph type="x-smartling-placeholder"></ph>

  (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: <ph type="x-smartling-placeholder"></ph>

    () => void

• setPage

  voidm

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

  Die Funktion setPage sieht so aus: <ph type="x-smartling-placeholder"></ph>

  (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: <ph type="x-smartling-placeholder"></ph>

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

  • callback

    Funktion

    Der Parameter callback sieht so aus: <ph type="x-smartling-placeholder"></ph>

    () => void

• createSidebarPane

  voidm

  Erstellt einen Bereich in der Seitenleiste des Steuerfelds.

  Die Funktion createSidebarPane sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

  • Titel

    String

    Text, der in der Bildunterschrift der Seitenleiste angezeigt wird.

  • callback

    Funktion optional

    Der Parameter callback sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (result: ExtensionSidebarPane) => void

    • Ergebnis

      ExtensionSidebarPane

      Ein ExtensionSidebarPane-Objekt für den erstellten Seitenleistenbereich.

Attribute

elements

Bereich „Elemente“.

Typ

ElementsPanel

sources

Quellenbereich.

Typ

SourcesPanel

themeName

Chrome 59 und höher

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: <ph type="x-smartling-placeholder"></ph>

  (panel: ExtensionPanel) => void

  • Kartenfeld

    ExtensionPanel

    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öher

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

• callback

  Funktion optional

  Der Parameter callback sieht so aus: <ph type="x-smartling-placeholder"></ph>

  () => 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: <ph type="x-smartling-placeholder"></ph>

  (resource: Resource) => void

  • Ressource

    Ressource

    Ein devtools.inspectedWindow.Resource-Objekt für die angeklickte Ressource.