chrome.devtools.panels

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.

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 klicken Sie dazu im Fenster der Entwicklertools auf einen Ressourcenlink. 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.

Eine allgemeine Einführung in die Verwendung von APIs für Entwicklertools finden Sie unter Zusammenfassung der Entwicklertools-APIs.

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

Der Screenshot zeigt, wie sich dieses Beispiel auf das Fenster der Entwicklertools auswirken würde:

Bereich für Erweiterungssymbole in der Symbolleiste der Entwicklertools
Bereich mit Erweiterungssymbolen in der Symbolleiste der Entwicklertools.

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

      • 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.

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

      • Ein ExtensionSidebarPane-Objekt zum Erstellen eines Seitenleistenbereichs.

Attribute

elements

Steuerfeld „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.

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

      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

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

    Gibt 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