devtools panels

We'd love to hear more about your role and the company you work for

Please help us by answering a few questions.

Hinweis: Dieses Feature ist seit Firefox 54 verfügbar.

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

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

Spezifikation eines Entwicklerwerkzeug-Panels

Ein Entwicklerwerkzeug-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 devtools_page Schlüssel in der manifest.json der Erweiterung aufnehmen und den Speicherort der HTML-Datei der Seite in der Erweiterung angeben:

json

"devtools_page": "devtools-page.html"

Von der devtools-Seite aus rufen Sie 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 des Panels, sein Symbol und die HTML-Datei, die den Inhalt des Panels bereitstellt, angeben:

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 mithilfe von devtools.inspectedWindow.eval() ausführen oder ein Inhalts-Skript über das Hintergrund-Skript einfügen, indem eine Nachricht übermittelt wird. Weitere Details hierzu finden Sie unter Erweitern der Entwicklerwerkzeuge.

devtools panels

Spezifikation eines Entwicklerwerkzeug-Panels

Design des Entwicklerpanels

Symbole

Beispiele