devtools-Panels
Hinweis: Diese Funktion ist seit Firefox 54 verfügbar.
Wenn eine Erweiterung Werkzeuge für Entwickler bereitstellt, können Sie dafür eine Benutzeroberfläche als neues Panel zu den Entwicklerwerkzeugen des Browsers hinzufügen.
Ein Panel für Entwicklerwerkzeuge festlegen
Ein Panel für Entwicklerwerkzeuge wird über die API devtools.panels hinzugefügt. Der entsprechende Code muss auf einer speziellen devtools-Seite ausgeführt werden.
Fügen Sie die devtools-Seite hinzu, indem Sie den Schlüssel devtools_page in die manifest.json der Erweiterung aufnehmen und den Pfad zur HTML-Datei der Seite innerhalb der Erweiterung angeben:
"devtools_page": "devtools-page.html"
Rufen Sie von der devtools-Seite aus ein Skript auf, das das Panel hinzufügt:
<body>
<script src="devtools.js"></script>
</body>
Erstellen Sie das Panel im Skript, indem Sie seinen Titel, sein Icon und die HTML-Datei für seinen Inhalt 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 mit devtools.inspectedWindow.eval() Code im untersuchten Fenster ausführen. Alternativ kann sie eine Nachricht an das Hintergrundskript senden, damit dieses ein Content-Skript einfügt. Weitere Informationen dazu finden Sie unter Erweitern der Entwicklerwerkzeuge.
Gestaltung des Panels
Wie Sie die Webseite Ihres Panels passend zum Stil von Firefox gestalten, erfahren Sie in der Dokumentation zum Acorn Design System.
Icons
Wie Sie Icons für Ihr Panel erstellen, erfahren Sie unter Iconography in der Dokumentation zum Acorn Design System.
Beispiele
Das Repository webextensions-examples auf GitHub enthält das Beispiel devtools-panels, das ein devtools-Panel implementiert.