devtools.panels.create()

Fügt ein neues Panel zu den Devtools hinzu.

Diese Funktion benötigt: einen Titel, eine URL zu einer Icon-Datei und eine URL zu einer HTML-Datei. Sie erstellt ein neues Panel in den Devtools, dessen Inhalt durch die HTML-Datei spezifiziert wird. Sie gibt ein Promise zurück, das auf ein ExtensionPanel-Objekt aufgelöst wird, das das neue Panel repräsentiert.

Syntax

js
let creating = browser.devtools.panels.create(
  title,       // string
  iconPath,    // string
  pagePath     // string
)

Parameter

title

string. Der Titel des Panels. Dieser erscheint in der Registerkartenzeile oben im Devtools-Fenster und ist die Hauptmethode, mit der der Benutzer Ihr Panel identifizieren kann.

iconPath

string. Gibt ein Icon an, das neben dem Titel angezeigt wird. Es wird als URL zu einer Bilddatei bereitgestellt, die mit Ihrer Erweiterung gebündelt wurde. Auf Chromium-basierten Browsern und Safari wird diese URL als absolut aufgelöst, während Firefox diese URL relativ zur aktuellen Erweiterungsseite auflöst (es sei denn, sie wird als absolute URL ausgedrückt, z. B. "/icons/panel.png").

pagePath

string. Gibt eine HTML-Datei an, die den Inhalt des Panels definiert. Es wird als URL zu einer HTML-Datei bereitgestellt, die mit Ihrer Erweiterung gebündelt ist. Die URL kann als absolute URL oder relativ zur aktuellen Erweiterungsseite aufgelöst werden. Siehe die Browser-Kompatibilitätsdaten für weitere Informationen. Die HTML-Datei kann CSS- und JavaScript-Dateien enthalten, genau wie eine normale Webseite. Das im Panel laufende JavaScript kann die Devtools-APIs verwenden. Siehe Erweiterung der Entwicklerwerkzeuge.

Rückgabewert

Ein Promise, das mit einem ExtensionPanel-Objekt erfüllt wird, das das neue Panel repräsentiert.

Browser-Kompatibilität

BCD tables only load in the browser

Beispiele

Erstellen Sie ein neues Panel und fügen Sie Listener zu seinen onShown- und onHidden-Ereignissen hinzu:

js
function handleShown() {
  console.log("panel is being shown");
}

function handleHidden() {
  console.log("panel is being hidden");
}

browser.devtools.panels
  .create(
    "My Panel", // title
    "/icons/star.png", // icon
    "/devtools/panel/panel.html", // content
  )
  .then((newPanel) => {
    newPanel.onShown.addListener(handleShown);
    newPanel.onHidden.addListener(handleHidden);
  });

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