chrome.devtools.panels

Beschreibung

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

Jedes Erweiterungssteuerfeld 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 Rückruffunktion 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 für Entwicklertools“ entweder das Standardverhalten oder eine Erweiterung zum Verarbeiten von Anfragen für offene Ressourcen angeben. Wenn eine Erweiterung setOpenResourceHandler() mehrmals aufruft, wird nur der letzte Handler beibehalten.

Eine allgemeine Einführung in die Verwendung von DevTools APIs finden Sie unter DevTools APIs – Zusammenfassung.

Manifest

Die folgenden Schlüssel müssen im Manifest deklariert werden, damit diese API verwendet werden kann.

"devtools_page"

Beispiel

Der folgende Code fügt ein Steuerfeld in Panel.html hinzu, das in der Symbolleiste der Entwicklertools durch FontPicker.png dargestellt und als Schriftauswahl gekennzeichnet ist:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

Im folgenden Code wird dem Bereich „Elemente“ ein Seitenleistenbereich mit dem Titel Schriftschnitteigenschaften hinzugefügt, der in Sidebar.html enthalten ist. Die Höhe wird 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 Fenster „Entwicklertools“:

Bereich für Erweiterungssymbole in der DevTools-Symbolleiste
Bereich für Erweiterungssymbole in der DevTools-Symbolleiste

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

Typen

Button

Eine Schaltfläche, die von der Erweiterung erstellt wurde.

Attribute

  • onClicked

    Event<functionvoidvoid>

    Wird ausgelöst, wenn auf die Schaltfläche geklickt wird.

    Die onClicked.addListener-Funktion 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 oder null sind, werden die entsprechenden Attribute nicht aktualisiert.

    Die update-Funktion 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 den Elementbereich dar.

Attribute

  • onSelectionChanged

    Event<functionvoidvoid>

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

    Die onSelectionChanged.addListener-Funktion 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 createSidebarPane-Funktion sieht so aus: 

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

    • Titel

      String

      Text, der in der Seitenleiste angezeigt wird.

    • callback

      function optional

      Der Parameter callback sieht so aus: 

      (result: ExtensionSidebarPane) => void

ExtensionPanel

Stellt einen Bereich dar, der von einer Erweiterung erstellt wurde.

Attribute

  • onHidden

    Event<functionvoidvoid>

    Wird ausgelöst, wenn der Nutzer den Bereich verlässt.

    Die onHidden.addListener-Funktion 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 den Suchergebnissen oder Abbruch der Suche).

    Die onSearch.addListener-Funktion 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 onShown.addListener-Funktion 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 createStatusBarButton-Funktion 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.

ExtensionSidebarPane

Eine von der Erweiterung erstellte Seitenleiste.

Attribute

  • onHidden

    Event<functionvoidvoid>

    Wird ausgelöst, wenn der Seitenleistenbalken ausgeblendet wird, weil der Nutzer das Steuerfeld verlässt, in dem der Seitenleistenbalken angezeigt wird.

    Die onHidden.addListener-Funktion 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 Steuerfeld wechselt, in dem er gehostet wird.

    Die onShown.addListener-Funktion sieht so aus: 

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

    • callback

      Funktion

      Der Parameter callback sieht so aus: 

      (window: Window) => void

      • Fenster

        Fenster

  • setExpression

    void

    Hiermit wird ein Ausdruck festgelegt, der auf der geprüften Seite ausgewertet wird. Das Ergebnis wird in der Seitenleiste angezeigt.

    Die setExpression-Funktion sieht so aus: 

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

    • Ausdruck

      String

      Ein Ausdruck, der im Kontext der geprüften Seite ausgewertet werden soll. JavaScript-Objekte und DOM-Knoten werden in einem auswählbaren Baum angezeigt, ähnlich wie in der Console/Watch.

    • rootTitle

      String optional

      Ein optionaler Titel für den Stammknoten des Ausdrucksbaums.

    • callback

      function optional

      Der Parameter callback sieht so aus: 

      () => void

  • setHeight

    void

    Damit wird die Höhe der Seitenleiste festgelegt.

    Die setHeight-Funktion sieht so aus: 

    (height: string) => {...}

    • Höhe

      String

      Eine CSS-ähnliche Größenangabe wie '100px' oder '12ex'.

  • setObject

    void

    Hiermit wird ein JSON-konformes Objekt festgelegt, das im Seitenleistenbereich angezeigt werden soll.

    Die setObject-Funktion sieht so aus: 

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

    • 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 Stammknoten des Ausdrucksbaums.

    • callback

      function optional

      Der Parameter callback sieht so aus: 

      () => void

  • setPage

    void

    Hiermit wird eine HTML-Seite festgelegt, die im Seitenleistenbereich angezeigt werden soll.

    Die setPage-Funktion sieht so aus: 

    (path: string) => {...}

    • Pfad

      String

      Relativer Pfad zu 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 onSelectionChanged.addListener-Funktion 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 createSidebarPane-Funktion sieht so aus: 

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

    • Titel

      String

      Text, der in der Seitenleiste angezeigt wird.

    • callback

      function optional

      Der Parameter callback sieht so aus: 

      (result: ExtensionSidebarPane) => void

Attribute

elements

Bereich „Elemente“

Typ

ElementsPanel

sources

Im Bereich „Quellen“

Typ

SourcesPanel

themeName

Chrome 59 und höher

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

Typ

String

Methoden

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
)

Erstellt ein Erweiterungsfeld.

Parameter

  • Titel

    String

    Titel, der in der Symbolleiste der Entwicklertools neben dem Symbol der Erweiterung angezeigt wird.

  • iconPath

    String

    Pfad des Symbols des Steuerfelds relativ zum Erweiterungsverzeichnis.

  • pagePath

    String

    Pfad der HTML-Seite des Steuerfelds relativ zum Erweiterungsverzeichnis.

  • callback

    function 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,
)

Erfordert, dass die Entwicklertools eine URL in einem Bereich der Entwicklertools öffnen.

Parameter

  • URL

    String

    Die URL der zu öffnenden Ressource.

  • lineNumber

    Zahl

    Gibt die Zeilennummer an, zu der beim Laden der Ressource gescrollt werden soll.

  • columnNumber

    number optional

    Chrome 114 und höher

    Gibt die Spaltennummer an, zu der beim Laden der Ressource gescrollt werden soll.

  • callback

    function 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 „Entwicklertools“ auf einen Ressourcenlink klickt. Wenn Sie den Handler zurücksetzen möchten, rufen Sie die Methode entweder ohne Parameter auf oder übergeben Sie „null“ als Parameter.

Parameter