devtools panels

Hinweis: Diese Funktion ist seit Firefox 54 verfügbar.

Wenn eine Erweiterung Werkzeuge bietet, die für Entwickler nützlich sind, ist es möglich, eine Benutzeroberfläche für diese Werkzeuge den Entwicklerwerkzeugen des Browsers als neues Panel hinzuzufügen.

Ein einfaches Beispiel, das die Hinzufügung von "My panel" zu den Registerkarten der Entwicklerwerkzeuge zeigt.

Ein Entwicklerwerkzeuge-Panel angeben

Ein Entwicklerwerkzeuge-Panel wird mithilfe der devtools.panels API hinzugefügt, die wiederum von einer speziellen DevTools-Seite aus ausgeführt werden muss.

Fügen Sie die DevTools-Seite hinzu, indem Sie den Schlüssel devtools_page in die manifest.json der Erweiterung einfügen und den Speicherort der HTML-Datei der Seite in der Erweiterung angeben:

json

"devtools_page": "devtools-page.html"

Rufen Sie von der DevTools-Seite aus ein Skript auf, das das DevTools-Panel hinzufügt:

html

<body>
  <script src="devtools.js"></script>
</body>

Erstellen Sie im Skript das DevTools-Panel, indem Sie den Titel, das Symbol und die HTML-Datei angeben, die den Inhalt des Panels bereitstellt:

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

Die Erweiterung kann nun Code im inspizierten Fenster ausführen, indem sie devtools.inspectedWindow.eval() verwendet oder ein Content-Skript über das Hintergrundskript durch das Senden einer Nachricht injiziert. Weitere Details dazu finden Sie unter Entwicklerwerkzeuge erweitern.

devtools panels

Ein Entwicklerwerkzeuge-Panel angeben

Gestaltung des Entwicklerpanels

Symbole

Beispiele