Freigeben über

Erstellen einer Erweiterung zum Anpassen der DevTools-Benutzeroberfläche

  • Artikel

In diesem Tutorial erfahren Sie, wie Sie Ihre eigene DevTools-Erweiterung von Grund auf neu erstellen. Es ist eine gute Möglichkeit, alles zu erleben, was für die typische Entwicklung benötigt wird. Am Ende des Tutorials verfügen Sie über eine funktionierende Erweiterung, die einen eigenen Bereich erstellt und mit den DevTools-APIs interagiert.

Überprüfen Sie zunächst die Voraussetzungen. Laden Sie dann die endgültige Erweiterung aus dem Abschnitt Projektmappe herunter, und führen Sie sie aus, um zu sehen, was Sie in diesem Tutorial erstellen werden. Beginnen Sie andernfalls mit Schritt 1: Erstellen einer einfachen DevTools-Erweiterung , um die Erweiterung von Grund auf neu zu erstellen.

Voraussetzungen

Lösung

In diesem Abschnitt laden Sie den endgültigen Zustand der Erweiterung herunter und führen sie aus, die Sie im rest dieses Tutorials erstellen. Später beginnen Sie von Grund auf neu und lernen, den Code zu schreiben, um Ihre eigene Erweiterung zu erstellen.

  1. Rufen Sie den endgültigen Erweiterungscode ab, indem Sie diese ZIP-Datei herunterladen und den Inhalt in einen Ordner auf Ihrem Computer extrahieren.

  2. Öffnen Sie Microsoft Edge, und wechseln Sie zu edge://extensions/.

  3. Aktivieren Sie die Umschaltfläche Entwicklermodus .

  4. Klicken Sie auf Entpackt laden , und navigieren Sie zu dem Ordner, in den Sie die ZIP-Datei extrahiert haben. Wählen Sie in diesem Ordner Demos-main>devtools-extension>sample 4 aus, und klicken Sie dann auf Ordner auswählen.

Die seite edge://extensions in Microsoft Edge mit den Schaltflächen

Ihre DevTools-Erweiterung sollte jetzt geladen werden. Öffnen Sie eine neue Registerkarte in Microsoft Edge, und öffnen Sie dann DevTools, indem Sie F12 drücken.

Die Erweiterung erstellt im Fenster DevTools eine Registerkarte Beispielbereich :

Microsoft Edge mit DevTools auf der Seite, wobei der Beispielbereich der Erweiterung ausgewählt ist

Schritt 1: Erstellen einer grundlegenden DevTools-Erweiterung

Eine grundlegende DevTools-Erweiterung besteht aus zwei Dateien, wie in Schritt 1 Code gezeigt:

  1. Eine Manifestdatei.

    {
    "name": "DevTools Sample Extension",
    "description": "A Basic DevTools Extension",
    "manifest_version": 3,
    "version": "1.0",
    "devtools_page": "devtools.html"
}
    Eigenschaft 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. Servicemitarbeiter oder Änderungen an Netzwerkanforderungen. Die aktuelle Version ist Version 3. Weitere Informationen zu dieser Version und den Unterschieden zur Version 2finden 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 die DevTools-Benutzeroberfläche geöffnet wird. Obwohl die Seite nicht in DevTools gerendert wird, wird sie verwendet, um die erforderlichen JavaScript-Dateien für die Erweiterung zu laden.

  2. Eine HTML-Datei, die mit dem devtools_page Feld in der Manifestdatei übereinstimmt.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    A Basic DevTools Extension.
  </body>
</html>

Verwenden Sie zum Laden und Testen Ihrer DevTools-Erweiterung in Microsoft Edge den Entwicklermodus:

  1. Navigieren Sie in Microsoft Edge zu edge://extensions/.

  2. Aktivieren Sie die Umschaltfläche Entwicklermodus .

  3. Klicken Sie auf Entpackt laden, navigieren Sie zu dem Ordner, in dem Sie den Code für Ihre Erweiterung geschrieben haben, und klicken Sie auf Ordner auswählen.

Ihre DevTools-Erweiterung ist jetzt geladen. Öffnen Sie eine neue Registerkarte, und öffnen Sie dann DevTools (F12).

Ihre Erweiterung ist geladen, wird aber noch nicht in DevTools angezeigt, da Sie kein Panel für die Erweiterung erstellt haben.

Schritt 2: Hinzufügen eines DevTools-Bereichs

In diesem Schritt erstellen Sie ein neues Panel in DevTools. Sie finden den Code für diesen Schritt in Schritt 2 Code, oder schreiben Sie ihn selbst, indem Sie die folgenden Anweisungen befolgen.

Ein Bereich ist eine Registerkarte auf der Hauptsymbolleiste in DevTools, ähnlich wie die unten gezeigten Tools Elemente, Konsole und Quellen :

DevTools-Bereiche und -Randleisten

In diesem Schritt erstellen wir eine grundlegende DevTools-Erweiterung mit einem Beispielbereich.

  1. Erstellen Sie eine devtools.js Datei mit dem folgenden Code:

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

    Die create -Methode erfordert vier Parameter: title, iconpath, pagePathund eine Rückruffunktion. Beachten Sie, dass das Panelsymbol zwar ein erforderlicher Parameter ist, es aber derzeit nicht in Microsoft Edge DevTools angezeigt wird.

    Weitere Informationen zur Erweiterungs-API chrome.devtools.panels finden Sie in der API-Referenz zu chrome.devtools.panels.

  2. Laden Sie die Datei von der HTML-Seite, die devtools_page zuvor im Manifestfeld angegeben wurde (die devtools.html Datei), indem Sie im Quellcode ein script -Element hinzufügen.

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

  3. Erstellen Sie die panel.html Datei, auf die Sie im vorherigen chrome.devtools.panels.create Methodenaufruf verwiesen haben. Diese Webseite enthält die Benutzeroberfläche des Bereichs, den Ihre Erweiterung zu DevTools hinzufügt.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>A Basic DevTools Extension with Panel</h1>
  </body>
</html>

Laden Sie Ihre Erweiterung von der edge://extensions/ Seite neu, um Ihre Änderungen in Microsoft Edge zu testen:

  1. Navigieren Sie zu der edge://extensions/ Seite (oder wechseln Sie zurück).

  2. Suchen Sie den ausgepackten Erweiterungseintrag, den Sie in Schritt 1 geladen haben.

  3. Klicken Sie auf Neu laden.

    Die Microsoft Edge-Erweiterungsseite, auf der angezeigt wird, wo sich die Schaltfläche

Ihre DevTools-Erweiterung sollte jetzt neu geladen werden. Öffnen Sie eine neue Registerkarte in Microsoft Edge, und öffnen Sie dann DevTools (F12). Ihr DevTools-Erweiterungsbereich sollte in DevTools angezeigt werden:

Microsoft Edge, mit DevTools an der Seite, zeigt den neuen Erweiterungsbereich an

Schritt 3: Aufrufen von Erweiterungs-APIs aus einer DevTools-Erweiterung

In diesem Schritt verwenden Sie Erweiterungs-APIs, um Speicherinformationen im DevTools-Bereich anzuzeigen. Dazu müssen wir die in der permissions Manifestdatei, der Panelschnittstelle und dem DevTools-Skript aktualisieren. Den Quellcode für diesen Schritt finden Sie in Schritt 3 Code, oder schreiben Sie ihn selbst, indem Sie die folgenden Anweisungen befolgen.

  1. Verwenden Sie das permissions Manifestelement in Ihrer manifest.json Datei. Dieses Mitglied definiert, welche Berechtigungen Ihre Erweiterung vom Benutzer benötigt. Für die Verwendung bestimmter Erweiterungs-APIs sind einige Berechtigungen erforderlich.

    "permissions": [
  "system.memory",
]

    Die system-memory Berechtigung ist erforderlich, um Erweiterungs-APIs zu verwenden, die wir später in diesem Tutorial verwenden werden. Weitere Informationen zu den verfügbaren APIs und den zugehörigen Berechtigungen finden Sie in der API-Referenz.

  2. Fügen Sie dem Textkörper in der panel.html Datei Folgendes hinzu, um die Daten im Bereich anzuzeigen.

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

  3. Aktualisieren Sie die devtools.js Datei mit dem folgenden Code.

    let availableMemoryCapacity;
let totalMemoryCapacity;

chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
    panel.onShown.addListener((extPanelWindow) => {
        availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
        totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
    });
});

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

Der obige Codeausschnitt führt Folgendes aus:

  1. Es wird ein neues Panel Sample Panel in DevTools erstellt.

  2. Wenn das Panel (Listener) angezeigtpanel.onShown wird, werden die availableMemoryCapacity Elemente und totalMemoryCapacity aus dem DOM abgerufen.

  3. Als Nächstes wird ein Timer so festgelegt, dass code jede Sekunde ausgeführt wird, nachdem das Panel angezeigt wird.

  4. 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.

Laden Sie Ihre Erweiterung von der edge://extensions/ Seite neu, um Ihre Änderungen in Microsoft Edge zu testen:

  1. Navigieren Sie zu der edge://extensions/ Seite (oder wechseln Sie zurück).

  2. Suchen Sie den ausgepackten Erweiterungseintrag, den Sie in Schritt 1 geladen haben.

  3. Klicken Sie auf Neu laden.

Ihre DevTools-Erweiterung sollte jetzt neu geladen werden. Öffnen Sie eine neue Registerkarte, und öffnen Sie dann DevTools (F12). Ihr DevTools-Erweiterungsbereich sollte jetzt die verfügbaren und gesamten Arbeitsspeicherkapazitäten anzeigen.

Der neue Erweiterungsbereich in DevTools mit Speicherinformationen

Weitere Erweiterungs-APIs finden Sie auf der Seite API-Referenz .

Schritt 4: Interagieren mit der überprüften Webseite

In diesem Schritt des Tutorials fügen Sie Code hinzu, der mit der überprüften Webseite interagiert. Dieser Code führt Folgendes aus:

  1. Lauschen Sie auf Klickereignisse, die auf der Webseite auftreten, und melden Sie sie beim DevTools-Konsolentool an.
  2. Zeigen Sie die Position des Mausklicks im DevTools-Erweiterungsbereich an.
  3. Zeigen Sie eine Begrüßungswarnung auf der überprüften Seite an, wenn der Benutzer im Bereich der DevTools-Erweiterung auf eine Schaltfläche klickt.

Den Quellcode für diesen Schritt finden Sie unter Code in Schritt 4, oder schreiben Sie ihn selbst, indem Sie die folgenden Anweisungen befolgen.

Leider hat das soeben erstellte DevTools-Panel keinen direkten Zugriff auf die überprüfte Webseite und wird erst ausgeführt, wenn DevTools geöffnet ist. Dazu verwenden Sie ein Inhaltsskript und einen Hintergrunddienst-Worker.

  • Ein Inhaltsskript wird im Kontext der überprüften Webseite ausgeführt, und auf die gleiche Weise, wie andere Skripts von der Seite geladen werden, haben sie Zugriff auf das DOM und können es ändern.
  • Ein Hintergrunddienst-Worker ist ein Skript, das der Browser in einem separaten Thread ausführt und Zugriff auf Erweiterungs-APIs hat.

Das folgende Diagramm bietet eine Übersicht darüber, wie die DevTools-Seite, die überprüfte Seite, das Inhaltsskript und der Hintergrunddienstmitarbeiter in einer Erweiterung zusammenpassen.

Die Anatomie einer DevTools-Erweiterung

In diesem Teil des Tutorials erkennen Sie, dass der Benutzer mithilfe eines Inhaltsskripts auf eine Webseite klickt. Das Inhaltsskript leitet diese Informationen an die devtools.js Datei weiter, in der die Daten sowohl in der Konsole als auch im DevTools-Erweiterungsbereich angezeigt werden.

  1. Fügen Sie Folgendes an die manifest.json Datei an:

    "content_scripts": [{
  "matches": [
    "http://*/*",
    "https://*/*"
  ],
  "run_at": "document_idle",
  "js": [
    "content_script.js"
  ]
}],
"background": {
    "service_worker": "background.js"
}
    Eigenschaft Wert
    Streichhölzer 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.

  2. Erstellen Sie die Datei content_script.js mit dem folgenden Inhalt:

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

    Der obige Codeausschnitt gibt eine Nachricht an die Konsole aus, wenn das Skript auf der Seite eingefügt wird. Außerdem wird der Seite ein Klickereignislistener hinzugefügt, der mithilfe chrome.runtime.sendMessage der API eine Nachricht mit Mausklickposition auf der überprüften Seite sendet.

  3. Fügen Sie in der panel.html Datei eine sayHello Schaltfläche und eine Bezeichnung hinzu youClickedOn . Diese beiden Elemente werden verwendet, um die Interaktion zwischen der überprüften Seite, dem DevTools-Panel und dem Hintergrunddienst-Worker zu veranscheinen. Wenn der Benutzer in der DevTools-Erweiterung auf die sayHello Schaltfläche klickt, wird eine Begrüßungsnachricht im überprüften Fenster angezeigt. Wenn der Benutzer auf eine beliebige Stelle auf der überprüften Seite klickt, wird eine Meldung angezeigt, in der die Position des Mausklicks im DevTools-Erweiterungsbereich angezeigt wird.

    <button id="sayHello">Say Hello to the inspected page!</button>
<h2><span id="youClickedOn"></span></h2>

  4. Verwenden Sie in der devtools.js Datei die chrome.runtime.connect -Methode, um eine Verbindung mit dem Hintergrunddienst-Worker herzustellen, und senden Sie dann das überprüfte Fenster tabId mithilfe der -Methode an den backgroundPageConnection.postMessage Service Worker. Fügen Sie schließlich ereignislistener zu der sayHello Schaltfläche und youClickedOn Bezeichnung hinzu, die in der panel.html Datei definiert sind.

    let youClickedOn; 
chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
    panel.onShown.addListener( (extPanelWindow) => {
        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");');
        });             
    });
});

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 = `You clicked on position (${request.xPosition}, ${request.yPosition}) in the inspected page.`;
        }
        sendResponse({
            xPosition: request.xPosition,
            yPosition: request.yPosition
        });
    }
});

// Create a connection to the background service worker
const backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

// Relay the tab ID to the background service worker
backgroundPageConnection.postMessage({
    name: 'init',
    tabId: chrome.devtools.inspectedWindow.tabId
});

    Wenn der Benutzer auf die sayHello Schaltfläche klickt, führt die DevTools-Erweiterung einen Codeausschnitt von alert("Hello from the DevTools Extension"); im überprüften Fenster aus, indem die eval() -Methode des überprüften Fensters chrome.devtools.inspectedWindowaufgerufen wird.

    Wenn der Benutzer im überprüften Fenster auf eine beliebige Stelle klickt, erhält die DevTools-Erweiterung eine Nachricht vom Hintergrunddienstmitarbeiter mit request.click == true und den Mauspositionsinformationen.

  5. Erstellen Sie die background.js Datei, und fügen Sie ihr den folgenden Code hinzu:

    let id = null;
const connections = {};

chrome.runtime.onConnect.addListener(devToolsConnection => {
    // Assign the listener function to a variable so we can remove it later
    let devToolsListener = (message, sender, sendResponse) => {
        if (message.name == "init") {
            id = message.tabId;
            connections[id] = devToolsConnection;
            // Send a message back to DevTools
            connections[id].postMessage("Connected!");
        }
    };

    // Listen to messages sent from the DevTools page
    devToolsConnection.onMessage.addListener(devToolsListener);

    devToolsConnection.onDisconnect.addListener(() => {
        devToolsConnection.onMessage.removeListener(devToolsListener);
    });
});

    Der obige Codeausschnitt verbindet den Hintergrunddienst-Worker mit der DevTools-Seite. Es lauscht, wenn die DevTools-Seite eine Verbindung herstellt, speichert die Verbindung und sendet eine Antwort zurück an die DevTools-Seite.

    Dies ist nützlich, wenn Ihr Hintergrunddienstmitarbeiter Daten sammelt oder Aufgaben im Hintergrund ausführt, die in Ihrer DevTools-Erweiterung verfügbar sein sollen.

So testen Sie die neue sayHello Schaltfläche:

  1. Gehen Sie zu edge://extensions/.

  2. Suchen Sie den eintrag für die entpackte Erweiterung, den Sie in Schritt 1 geladen haben.

  3. Klicken Sie auf die Schaltfläche Neu laden .

  4. Öffnen Sie eine neue Browserregisterkarte, öffnen Sie DevTools (F12), und klicken Sie auf die Registerkarte Beispielbereich .

  5. Klicken Sie in Ihrem Bereich auf die "Say Hello to The Inspected Page!" Schaltfläche. Auf der überprüften Seite sollte eine Warnung angezeigt werden, wie unten gezeigt.

    Microsoft Edge mit dem neuen Erweiterungsbereich in DevTools auf der Seite und einem Warnungsdialogfeld

Weitere Informationen zu Inhaltsskripts finden Sie in der Dokumentation zu Inhaltsskripts.

So testen Sie die youClickedOn Bezeichnung

  1. Klicken Sie auf OK , um das im vorherigen Schritt geöffnete Warnungsfenster zu schließen.

  2. Klicken Sie auf eine beliebige Stelle auf der überprüften Seite. Die Meldung Sie haben auf die Position (x,y) in der überprüften Seite geklickt , sollte im Erweiterungsbereich angezeigt werden.

    Der Beispielbereich in DevTools mit der Meldung der angeklickten Position

  3. Öffnen Sie das Konsolentool . Eine Meldung ähnlich dem vorherigen Schritt sollte auch im Konsolentool angezeigt werden.

    Das DevTools-Konsolentool zeigt die Meldung der angeklickten Position an.

Siehe auch