devtools.panels.ElementsPanel.createSidebarPane()

Fügt ein neues Paneel zur Seitenleiste im HTML/CSS-Inspektor hinzu.

Der HTML/CSS-Inspektor, der in Firefox als Page Inspector und in Chrome als Elements panel bezeichnet wird, zeigt das Seiten-DOM im Hauptteil seines Fensters an und hat eine Seitenleiste, die verschiedene andere Aspekte der Seite HTML/CSS in einer Registerkartenoberfläche anzeigt. Zum Beispiel kann in Firefox die Seitenleiste die CSS-Regeln für das ausgewählte Element anzeigen oder dessen Schriftarten oder das Boxmodell.

Die Funktion createSidebarPane() fügt ein neues Paneel zur Seitenleiste hinzu. Zum Beispiel zeigt der untenstehende Screenshot ein neues Paneel mit dem Titel "My pane", das ein JSON-Objekt anzeigt:

Bild zeigt ein neues Paneel mit dem Titel "My pane", das ein JSON-Objekt anzeigt

Diese Funktion nimmt ein Argument an, welches ein String ist und den Titel des Paneels darstellt. Sie gibt ein Promise zurück, das zu einem ExtensionSidebarPane-Objekt aufgelöst wird, welches das neue Paneel darstellt. Sie können dieses Objekt verwenden, um den Inhalt und das Verhalten des Paneels zu definieren.

Syntax

js
let creating = browser.devtools.panels.elements.createSidebarPane(
  title       // string
)

Parameter

title

string. Der Titel des Paneels. Dieser erscheint in der Zeile der Registerkarten oben in der Seitenleiste und ist die Hauptmethode, wie der Benutzer Ihr Paneel anhand des Titels identifizieren kann.

Rückgabewert

Ein Promise, das mit einem ExtensionSidebarPane-Objekt erfüllt wird, das das neue Paneel darstellt.

Beispiele

Erstellen Sie ein neues Paneel und füllen Sie es mit einem JSON-Objekt. Sie könnten diesen Code in einem Script ausführen, das von der devtools-Seite Ihrer Erweiterung geladen wird.

js
function onCreated(sidebarPane) {
  sidebarPane.setObject({
    someBool: true,
    someString: "hello there",
    someObject: {
      someNumber: 42,
      someOtherString: "this is my pane's content",
    },
  });
}

browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);

Browser-Kompatibilität

Hinweis: Diese API basiert auf der chrome.devtools.panels API von Chromium.