Hinzufügen eines benutzerdefinierten Tools in Microsoft Edge DevTools

In diesem Artikel wird der Code des Benutzerdefinierten DevTools-Beispiels beschrieben. Informationen zum ersten Installieren und Ausführen des Beispiels finden Sie unter Beispiel: Benutzerdefiniertes DevTools-Tool.

Einführung

Wie eine reguläre Erweiterung verfügt auch eine DevTools-Erweiterung über eine Manifestdatei. Dies wird unter Erste Schritte bei der Entwicklung einer Erweiterung beschrieben, die ein einfaches Erweiterungsbeispiel enthält, mit dem Sie beginnen können.

Eine Erweiterung, die DevTools erweitert, umfasst zusätzlich Folgendes:

Eine gerenderte HTML-Datei, die im Toolbereich in DevTools angezeigt werden soll.
Eine nicht gerenderte HTML-Datei, die beim Öffnen von DevTools ausgeführt wird und in der Regel die Kommunikation zwischen dem benutzerdefinierten DevTools-Tool und der überprüften Webseite verarbeitet.

Dieses DevTools-Erweiterungsbeispiel kommuniziert zwischen DevTools und der überprüften Webseite und ruft DevTools-APIs auf.

Das Beispiel für die DevTools-Erweiterung zeigt ein benutzerdefiniertes Tool in DevTools an, einschließlich einer Benutzerdefinierten Registerkarte in der Aktivitätsleiste und einem Bereich, der mit der Registerkarte verbunden ist:

Benutzerdefinierte Registerkarte

Ein Panel ist eine Toolseite in Microsoft Edge DevTools zusammen mit der Registerkarte des Tools in der Aktivitätsleiste.

Siehe auch:

Übersicht über Dateien

Das Beispiel für die DevTools-Erweiterung enthält die folgenden Dateien:

Datei	Beschreibung
`manifest.json`	Informationen zur Erweiterung: Name, Beschreibung, Version, Manifestversion und HTML-Seite, die in DevTools angezeigt werden sollen.
`panel.html`	Webseite, die im benutzerdefinierten Bereich in DevTools angezeigt werden soll.
`devtools.html`	Eine nicht gerenderte HTML-Datei, die beim Öffnen von DevTools ausgeführt wird, um die JavaScript-Dateien der Erweiterung zu laden.
`devtools.js`	Hauptlogik für die benutzerdefinierte DevTools-Seite.
`content_script.js`	Code, der von der Erweiterung in die überprüfte Webseite eingefügt wird. Fügt der Seite, die eine Nachricht mit der Maustaste sendet, einen Klickereignislistener hinzu. `devtools.js` lauscht auf diese Meldung und zeigt die Position im benutzerdefinierten Bereich an.
`icon.png`	Symbol, das auf der Registerkarte des Tools in der Aktivitätsleiste von DevTools und im Menü Weitere Tools angezeigt werden soll.
`README.md`	Grundlegende Informationen für Entwickler zur Verwendung des Beispiels.

Details finden Sie unten.

Interagieren zwischen der Webseite und DevTools

Mehrere Dateien sind erforderlich, um die Interaktion zwischen der überprüften Webseite und DevTools zu ermöglichen. Diese Dateien werden in verschiedenen Kontexten ausgeführt:

devtools.js wird im Kontext des benutzerdefinierten Toolbereichs in DevTools ausgeführt.
content_script.js ist ein Inhaltsskript, was bedeutet, dass es im Kontext der überprüften Webseite ausgeführt wird. Auf die gleiche Weise wie andere Skripts von der Webseite geladen werden, hat ein Inhaltsskript Zugriff auf das DOM und kann es ändern.

Die DevTools-Seite, die überprüfte Seite und das Inhaltsskript passen in einer Erweiterung zusammen:

Diagramm, das die Anatomie einer DevTools-Erweiterung zeigt

Erkennt content_script.js , wo der Benutzer auf die überprüfte Webseite klickt:

document.addEventListener("click", event => {
  chrome.runtime.sendMessage({
    click: true,
    xPosition: event.clientX + document.body.scrollLeft,
    yPosition: event.clientY + document.body.scrollTop
  });
});

Das Inhaltsskript leitet diese Informationen an die devtools.js Datei weiter, wo die Daten in DevTools im benutzerdefinierten Tool und im Konsolentool angezeigt werden.

Ermitteln Sie mithilfe eines Inhaltsskripts, dass der Benutzer auf eine Webseite klickt. Das Inhaltsskript leitet diese Informationen an die devtools.js Datei weiter, in der die Daten sowohl in der DevTools-Konsole als auch im benutzerdefinierten DevTools-Tool angezeigt werden, das eine Microsoft Edge-Erweiterung ist.

Code für das benutzerdefinierte DevTools-Tool

Das Benutzerdefinierte DevTools-Beispiel besteht aus den folgenden Dateien und Code. Der Code, der mit der überprüften Webseite interagiert, führt Folgendes aus:

Zeigt Speicherinformationen im Benutzerdefinierten DevTools-Tool an.
Zeigt die Position des Mausklicks im Benutzerdefinierten DevTools-Tool an, wenn auf die Webseite geklickt wird.
Zeigt eine Begrüßungswarnung auf der überprüften Webseite an, wenn im Tool "Benutzerdefinierte DevTools" auf die Schaltfläche "Hallo sagen" geklickt wird.

`manifest.json`

Informationen zur Erweiterung: Name, Beschreibung, Version, Manifestversion und HTML-Seite, die in DevTools angezeigt werden sollen.

Die Manifestdatei enthält Schlüssel-Wert-Paare. Die Schlüssel der obersten Ebene werden als Member bezeichnet.

Diese Datei ist für eine Erweiterung erforderlich. Das Manifest enthält die folgenden Informationen zur Erweiterung:

Member	Beschreibung
`name`	Der Name der Erweiterung, der unter `edge://extensions/`angezeigt wird.
`description`	Die Beschreibung der Erweiterung, die unter dem Namen der Erweiterung angezeigt wird.
`version`	Die Version der Erweiterung, die neben dem Namen der Erweiterung angezeigt wird.
`manifest_version`	Bestimmt den Satz von Features, die die Erweiterung verwendet, z. B. Änderung von Netzwerkanforderungen. Die aktuelle Version ist Version `3`. Weitere Informationen zu dieser Version und den Unterschieden zur Version `2`finden Sie unter Übersicht und Zeitpläne für die Migration zu Manifest V3.
`devtools_page`	Der Pfad zu einer HTML-Datei, die jedes Mal ausgeführt wird, wenn DevTools geöffnet wird und die JavaScript-Dateien der Erweiterung lädt. Diese Seite wird in DevTools nicht gerendert.
`content_scripts`	Die JavaScript- oder CSS-Dateien, die verwendet werden sollen, wenn der Benutzer angegebene Webseiten öffnet. Weitere Informationen finden Sie unter Inhaltsskripts in der Chrome-Dokumentation.
`permissions`	Das lokale Gerät benötigt Berechtigungen zum Anzeigen seiner Systemspeicherkapazität, da das Skript dafür die API aufruft.

manifest.json:

{
    "name": "Custom DevTools Tool",
    "description": "A DevTools extension interacting with the inspected page",
    "manifest_version": 3,
    "version": "1.0",
    "devtools_page": "devtools.html",
    "content_scripts": [{
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "run_at": "document_idle",
        "js": [
            "content_script.js"
        ]
    }],
    "permissions": [
        "system.memory"
    ]
}

Der permissions Manifestmember in manifest.json definiert, welche Berechtigungen die Erweiterung vom Benutzer benötigt. Für die Verwendung bestimmter Erweiterungs-APIs sind einige Berechtigungen erforderlich. Die system-memory Berechtigung ist erforderlich, um die Erweiterungs-APIs verwenden zu können. Bestimmten APIs sind Berechtigungen zugeordnet.

Schlüssel innerhalb des content_scripts Members:

Schlüssel	Wert
`matches`	Gibt an, in welche Seiten dieses Inhaltsskript eingefügt wird.
`run_at`	Gibt an, wann der Browser das Skript auf die Seite einschleust.
`js`	Die javascript-Dateien, die eingefügt werden sollen.

Siehe auch:

manifest.json : Quelldatei im Repository.
Api-Referenz für Erweiterungen

`panel.html`

Webseite, die im benutzerdefinierten Bereich in DevTools angezeigt werden soll.

Diese Datei ist erforderlich. Dies ist die Webseite, die im benutzerdefinierten Bereich in DevTools angezeigt werden soll.

panel.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h2>Custom DevTools tool</h2>

    <h3>Memory</h3>
    <div>
      <b>Available Memory Capacity:</b> <span id="availableMemoryCapacity"></span>
    </div>
    <div>
      <b>Total Memory Capacity:</b> <span id="totalMemoryCapacity"></span>
    </div>

    <h3>Send message from DevTools to inspected page</h3>
    <input type="button" id="sayHello" value="Say hello to the inspected page">
    <h3>Send message from inspected page to DevTools</h3>
    <p>Click somewhere in the inspected webpage.</p>
    <div>
      <b>Coordinates:</b> <span id="youClickedOn"></span>
    </div>

  </body>
</html>

panel.html wird im chrome.devtools.panels.create Methodenaufruf in devtools.jsverwiesen. Die panel.html Webseite enthält die Benutzeroberfläche des Bereichs des benutzerdefinierten Tools.

Die oben genannten Elemente veranschaulichen die Interaktion zwischen der überprüften Seite und dem DevTools-Bereich.

Wenn der Benutzer auf die sayHello Schaltfläche in der DevTools-Erweiterung klickt, wird eine Warnung im überprüften Fenster angezeigt.

Wenn der Benutzer auf eine beliebige Stelle auf der überprüften Seite klickt, werden die Maus-Klick-Koordinaten im benutzerdefinierten DevTools-Tool angezeigt.

Siehe auch:

panel.html : Quelldatei im Repository.

`devtools.html`

Eine nicht gerenderte HTML-Datei, die beim Öffnen von DevTools ausgeführt wird. Diese Datei ist erforderlich.

Der Dateiname devtools.html muss mit dem Wert des devtools_page Members in der Manifestdatei übereinstimmen.

devtools.html enthält ein <script> -Element, das lädt devtools.js:

devtools.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script src="devtools.js"></script>
  </body>
</html>

Siehe auch:

devtools.html : Quelldatei im Repository.

`devtools.js`

devtools.js enthält die Hauptlogik für die benutzerdefinierte DevTools-Seite. devtools.js führt Folgendes aus:

Erstellt eine neue Benutzerdefinierte Toolregisterkarte und einen Bereich in DevTools mithilfe chrome.devtools.panels.create()von .
Wenn das Tool (panel.onShown Listener) angezeigt wird, werden die availableMemoryCapacity Elemente und totalMemoryCapacity aus dem DOM abgerufen.
Legt einen Timer fest, um Code jede Sekunde auszuführen, nachdem das Panel angezeigt wird.
Wenn der Timer ausgelöst wird, wird die chrome.system.memory.getInfo -Methode verwendet, um die verfügbare und gesamte Speicherkapazität des Geräts abzurufen, und diese Werte werden in den entsprechenden DOM-Elementen angezeigt.

devtools.js:

let availableMemoryCapacity;
let totalMemoryCapacity;
let youClickedOn;

chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => {
    // Code invoked on panel creation.
    panel.onShown.addListener( (extPanelWindow) => {
        // Memory API.
        availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
        totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
        // 2-way message sending.
        let sayHello = extPanelWindow.document.querySelector('#sayHello');
        youClickedOn = extPanelWindow.document.querySelector('#youClickedOn');
        sayHello.addEventListener("click", () => {
            // show a greeting alert in the inspected page
            chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools extension!");');
        });
    });
});

// Update the Memory display.
setInterval(() => {
    chrome.system.memory.getInfo((data) => {
        if (availableMemoryCapacity) {
            availableMemoryCapacity.innerHTML = data.availableCapacity;
        }
        if (totalMemoryCapacity) {
            totalMemoryCapacity.innerHTML = data.capacity;
        }
    });
}, 1000);

// Send a message from the inspected page to DevTools.
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    // Messages from content scripts should have sender.tab set.
    if (sender.tab && request.click == true) {
        console.log('I am here!');
        if (youClickedOn) {
            youClickedOn.innerHTML = `(${request.xPosition}, ${request.yPosition})`;
        }
        sendResponse({
            xPosition: request.xPosition,
            yPosition: request.yPosition
        });
    }
});

Der create Methodenaufruf in devtools.js:

chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
});

Die create -Methode weist die folgende Signatur auf:

chrome.devtools.panels.create(
    title: string, // Tool tab's label in Activity bar.
    iconPath: string, // Icon to display in tool's tab.
    pagePath: string, // Webpage to display in tool's panel.
    callback: function // Code to run when tool is opened.
)

Um mit der überprüften Webseite zu kommunizieren, fügt der Schaltfläche und youClickedOn Bezeichnung, devtools.js die sayHello in der panel.html Datei definiert sind, Ereignislistener hinzu.

Wenn der Benutzer auf die sayHello Schaltfläche klickt, devtools.js führt Code mithilfe der chrome.devtools.inspectedWindow.eval() -Methode direkt im überprüften Fenster aus.

Wenn der Benutzer auf eine beliebige Stelle im überprüften Fenster klickt, erhalten die DevTools-Erweiterungen eine Meldung mit request.click == true und den Mauspositionsinformationen.

Siehe auch:

devtools.js : Quelldatei im Repository.
Unterstützte APIs für Microsoft Edge-Erweiterungen
- chrome.devtools.panels
  - create()

`content_script.js`

Code, den das benutzerdefinierte DevTools-Tool in die überprüfte Webseite einschleust. Enthält JavaScript, das in die überprüfte Webseite (beliebige Webseiten) eingefügt wird.

Diese Datei führt Folgendes aus:

Fügt der überprüften Webseite einen Klickereignislistener hinzu, der eine Nachricht mit der Maustaste sendet, indem aufgerufen wird chrome.runtime.sendMessage.
Lauscht über einen Ereignislistener auf das Seitenklickereignis.

Das Inhaltsskript leitet die Mausklickkoordinaten an die devtools.js Datei weiter, wo die Koordinaten sowohl im Konsolentool als auch im benutzerdefinierten Tool in DevTools angezeigt werden.

Ein Inhaltsskript wird im Kontext der überprüften Webseite ausgeführt. Auf die gleiche Weise wie andere Skripts von der Webseite geladen werden, hat ein Inhaltsskript Zugriff auf das DOM und kann es ändern.

content_script.js:

document.addEventListener("click", (event) => {
  chrome.runtime.sendMessage({
      click: true,
      xPosition: event.clientX + document.body.scrollLeft,
      yPosition: event.clientY + document.body.scrollTop
    },
    response => {
      console.log("Received response", response);
    }
  );
});

Siehe auch:

content_script.js : Quelldatei im Repository.
Inhaltsskripts : Chrome-Dokumentation.

`icon.png`

Symbol, das auf der Registerkarte des Tools in der Aktivitätsleiste von DevTools und im Menü Weitere Tools angezeigt werden soll.

icon.png ist das Symbol, das auf der Registerkarte des Tools in der Aktivitätsleiste von DevTools und im Menü Weitere Tools angezeigt werden soll:

Siehe auch:

icon.png : Quelldatei im Repository.

Siehe auch

Dokumentation zu Chrome-Erweiterungen:

Quelldateien im Repository:

Feedback

War diese Seite hilfreich?

Last updated on 2026-06-13

Hinzufügen eines benutzerdefinierten Tools in Microsoft Edge DevTools

Einführung

Übersicht über Dateien

Interagieren zwischen der Webseite und DevTools

Code für das benutzerdefinierte DevTools-Tool

manifest.json

panel.html

devtools.html

devtools.js

content_script.js

icon.png

Siehe auch

Feedback

Zusätzliche Ressourcen

`manifest.json`

`panel.html`

`devtools.html`

`devtools.js`

`content_script.js`

`icon.png`