Hinzufügen eines benutzerdefinierten Tools in Microsoft Edge DevTools

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

Einführung

Wie eine normale 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:

Eine gerenderte HTML-Datei, die im Bereich des Tools in DevTools angezeigt wird.
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 eines Bereichs, der mit der Registerkarte verbunden ist:

Benutzerdefinierte Registerkarte

Ein Bereich ist eine Toolseite in den Microsoft Edge DevTools sowie die Registerkarte des Tools in der Aktivitätsleiste.

Siehe auch:

Übersicht über Dateien

Das DevTools-Erweiterungsbeispiel 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 einen Klickereignis-Listener hinzu, der eine Nachricht mit der Mausklickposition sendet. `devtools.js` hört diese Meldung ab 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 wird.
`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 unterschiedlichen 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 untersuchten 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 mit der Anatomie einer DevTools-Erweiterung

Das 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 Datei weiter, in der devtools.js die Daten in DevTools, im Tool "Benutzerdefiniert" und " Konsole " angezeigt werden.

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

Code für benutzerdefiniertes DevTools-Tool

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

Zeigt Speicherinformationen im benutzerdefinierten DevTools-Tool an.
Zeigt die Mausklickposition im benutzerdefinierten DevTools-Tool an, wenn auf die Webseite geklickt wird.
Zeigt eine Begrüßungsbenachrichtigung auf der überprüften Webseite an, wenn im benutzerdefinierten DevTools-Tool auf die Schaltfläche "Hallo" 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 Mitglieder 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, die 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 die Gruppe von Features, die von der Erweiterung verwendet werden, z. B. die Änderung von Netzwerkanforderungen. Die aktuelle Version ist Version `3`. Weitere Informationen zu dieser Version und den Unterschieden zur Version `2`finden Sie unter Zeitachse 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 bestimmte Webseiten öffnet. Siehe Inhaltsskripts in der Chrome-Dokumentation.
`permissions`	Da das Skript dafür die API aufruft, benötigt das lokale Gerät Berechtigungen zur Anzeige seiner Systemspeicherkapazität.

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"
    ]
}

Das permissions Manifestelement definiert manifest.json , 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 Elements:

Schlüssel	Wert
`matches`	Gibt an, in welche Seiten dieses Inhaltsskript eingefügt wird.
`run_at`	Gibt an, wann der Browser das Skript auf der 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.jsreferenziert. Die panel.html Webseite enthält die Benutzeroberfläche des Bereichs des benutzerdefinierten Tools.

Die obigen Elemente veranschaulichen die Interaktion zwischen der überprüften Seite und dem DevTools-Bedienfeld.

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

Wenn der Benutzer auf eine beliebige Stelle auf der überprüften Seite klickt, werden die Mausklickkoordinaten 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 Folgendes 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 folgende Aktionen aus:

Erstellt eine neue benutzerdefinierte Toolregisterkarte und einen Bereich in DevTools mithilfe von chrome.devtools.panels.create().
Wenn das Tool angezeigt wird (panel.onShown Listener), werden die availableMemoryCapacitytotalMemoryCapacity and-Elemente aus dem DOM abgerufen.
Legt einen Timer zum Ausführen des Codes jede Sekunde fest, nachdem der Bereich angezeigt wurde.
Wenn der Timer ausgelöst wird, wird die chrome.system.memory.getInfo Methode verwendet, um die verfügbare und die 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 hat die folgende Signatur:

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, werden der Schaltfläche und youClickedOn der Bezeichnung, die sayHello in der panel.html Datei definiert sind, devtools.js Ereignis-Listener hinzugefügt.

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

Wenn der Benutzer an einer beliebigen Stelle im untersuchten Fenster klickt, erhalten die DevTools-Erweiterungen eine Meldung mit den Informationen zur request.click == true Mausposition.

Siehe auch:

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

`content_script.js`

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

Diese Datei bewirkt Folgendes:

Fügt der untersuchten Webseite einen Klickereignis-Listener hinzu, der eine Nachricht sendet, die die Position des Mausklicks enthält, indem chrome.runtime.sendMessageer
Überwacht das Seitenklick-Ereignis über einen Ereignis-Listener.

Das Inhaltsskript leitet die Mausklickkoordinaten an die devtools.js Datei weiter, in der 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 wird.

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

Siehe auch:

icon.png – Quelldatei im Repository.

Siehe auch

Dokumente zu Chrome-Erweiterungen:

Quelldateien im Repository:

Feedback

War diese Seite hilfreich?

Last updated on 2026-08-13

Hinzufügen eines benutzerdefinierten Tools in Microsoft Edge DevTools

Einführung

Übersicht über Dateien

Interagieren zwischen der Webseite und DevTools

Code für benutzerdefiniertes 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`