devtools.panels.ElementsPanel.createSidebarPane()
Fügt der Seitenleiste des HTML/CSS-Inspektors einen neuen Bereich hinzu.
Der HTML/CSS-Inspektor, in Firefox Page Inspector und in Chrome Elements-Panel genannt, zeigt im Hauptbereich seines Fensters das DOM der Seite an. In einer Seitenleiste mit Registerkarten zeigt er verschiedene weitere Aspekte des HTML und CSS der Seite an. In Firefox kann die Seitenleiste beispielsweise die CSS-Regeln, die Schriftarten oder das Boxmodell des ausgewählten Elements anzeigen.
Die Funktion createSidebarPane() fügt der Seitenleiste einen neuen Bereich hinzu. Der folgende Screenshot zeigt beispielsweise einen neuen Bereich mit dem Titel „My pane“, in dem ein JSON-Objekt angezeigt wird:
Diese Funktion nimmt ein Argument entgegen: einen String, der den Titel des Bereichs angibt. Sie gibt eine Promise zurück, die mit einem ExtensionSidebarPane-Objekt erfüllt wird, das den neuen Bereich repräsentiert. Mit diesem Objekt können Sie Inhalt und Verhalten des Bereichs festlegen.
Syntax
let creating = browser.devtools.panels.elements.createSidebarPane(
title // string
)
Parameter
title-
string. Der Titel des Bereichs. Er erscheint in der Registerkartenleiste oben in der Seitenleiste und ist die wichtigste Möglichkeit für Benutzer, Ihren Bereich zu erkennen.
Rückgabewert
Eine Promise, die mit einem ExtensionSidebarPane-Objekt erfüllt wird, das den neuen Bereich repräsentiert.
Beispiele
Erstellen Sie einen neuen Bereich und füllen Sie ihn mit einem JSON-Objekt. Sie können diesen Code in einem Skript ausführen, das von der Devtools-Seite Ihrer Erweiterung geladen wird.
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.