Entwicklertools erweitern

Mit Entwicklertools-Erweiterungen werden Chrome-Entwicklertools neue Funktionen hinzugefügt, indem sie auf die Entwicklertools-spezifischen Funktionen zugreifen. Erweiterungs-APIs über eine Entwicklertools-Seite, die der Erweiterung hinzugefügt wurde.

Zu den Entwicklertools-spezifischen Erweiterungs-APIs gehören:

• devtools.inspectedWindow
• devtools.network
• devtools.panels
• devtools.recorder
• devtools.performance

Seite „Entwicklertools“

Wenn ein Entwicklertools-Fenster geöffnet wird, erstellt eine Entwicklertools-Erweiterung eine Instanz der zugehörigen Entwicklertools-Seite, die solange das Fenster geöffnet ist. Diese Seite hat Zugriff auf die Entwicklertools und Erweiterungs-APIs und kann Folgendes tun:

• Mit den devtools.panels APIs kannst du Bereiche erstellen und mit ihnen interagieren. Du kannst auch andere Erweiterungsseiten als Steuerfelder oder Seitenleisten im Entwicklertools-Fenster hinzufügen.
• Rufen Sie Informationen über das untersuchte Fenster ab und bewerten Sie den Code im untersuchten Fenster mithilfe der Funktion devtools.inspectedWindow APIs
• Rufen Sie mit den devtools.network APIs Informationen zu Netzwerkanfragen ab.
• Erweitern Sie das Rekorder-Feld mithilfe der devtools.recorder APIs.
• Mit den devtools.performance APIs können Sie Informationen zum Aufzeichnungsstatus des Steuerfelds „Leistung“ abrufen.

Über die Seite „Entwicklertools“ kann direkt auf Erweiterungs-APIs zugegriffen werden. Dazu gehört auch, um mit dem Service Worker zu kommunizieren, Nachrichtenweitergabe.

Entwicklertools-Erweiterung erstellen

Um eine Entwicklertools-Seite für deine Erweiterung zu erstellen, füge das Feld devtools_page in die Erweiterung ein Manifest:

{
  "name": ...
  "version": "1.0",
  "devtools_page": "devtools.html",
  ...
}

Das Feld devtools_page muss auf eine HTML-Seite verweisen. Da die Entwicklertools Seite muss lokal zu deiner Erweiterung sein, empfehlen wir, sie mit einer relativen URL anzugeben.

Die Mitglieder der chrome.devtools API sind nur für die Seiten verfügbar, die in den Entwicklertools geladen werden während dieses Fenster geöffnet ist. Content-Skripts und andere Erweiterungsseiten haben keinen Zugriff für diese APIs.

UI-Elemente der Entwicklertools: Steuerfelder und Seitenleistenbereiche

Zusätzlich zu den üblichen Benutzeroberflächenelementen der Erweiterung, wie Browseraktionen, Kontextmenüs und Pop-ups, gibt es ein Mit der Entwicklertools-Erweiterung können UI-Elemente zum Entwicklertools-Fenster hinzugefügt werden:

• Ein Steuerfeld ist ein Tab auf oberster Ebene, z. B. die Bereiche „Elemente“, „Quellen“ und „Netzwerk“.
• Ein Seitenleistenbereich enthält eine ergänzende UI für einen Bereich. Mit den Stilen, berechneten Stilen und Die Bereiche Ereignis-Listener im Steuerfeld „Elemente“ sind Beispiele für Bereiche in der Seitenleiste. Je nach und bei der das Entwicklertools-Fenster angedockt ist, können Ihre Seitenleistenbereiche wie das folgende Beispielbild:

Jedes Steuerfeld verfügt über eine eigene HTML-Datei, die weitere Ressourcen enthalten kann (JavaScript, CSS, Bilder usw.). aktiviert). Verwenden Sie den folgenden Code, um einen Basisbereich zu erstellen:

chrome.devtools.panels.create("My Panel",
    "MyPanelIcon.png",
    "Panel.html",
    function(panel) {
      // code invoked on panel creation
    }
);

JavaScript, das in einem Steuerfeld oder Seitenleistenbereich ausgeführt wird, hat Zugriff auf dieselben APIs wie die Entwicklertools-Seite.

Verwenden Sie den folgenden Code, um einen einfachen Seitenleistenbereich zu erstellen:

chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
    function(sidebar) {
        // sidebar initialization code here
        sidebar.setObject({ some_data: "Some data to show" });
});

Es gibt mehrere Möglichkeiten, Inhalte in einem Seitenleistenbereich anzuzeigen:

• HTML-Inhalt: Rufen Sie setPage() auf, um eine HTML-Seite anzugeben, die im Fenster angezeigt werden soll.
• JSON-Daten: Übergeben Sie ein JSON-Objekt an setObject().
• JavaScript-Ausdruck: Übergeben Sie einen Ausdruck an setExpression(). DevTools wertet den Ausdruck im Kontext der untersuchten Seite aus und zeigt dann den Rückgabewert an.

Für setObject() und setExpression() wird der Wert im Bereich so angezeigt, wie er im Feld Entwicklertools-Konsole. Mit setExpression() können Sie jedoch DOM-Elemente und beliebiges JavaScript anzeigen. -Objekte, während setObject() nur JSON-Objekte unterstützt.

Kommunikation zwischen Erweiterungskomponenten

In den folgenden Abschnitten werden einige hilfreiche Möglichkeiten beschrieben, wie Sie mit den Erweiterungskomponenten der Entwicklertools folgende Aktionen ausführen können: miteinander kommunizieren können.

Inhaltsskript einfügen

Verwenden Sie scripting.executeScript(), um ein Inhaltsskript einzufügen:

// DevTools page -- devtools.js
chrome.scripting.executeScript({
  target: {
    tabId: chrome.devtools.inspectedWindow.tabId
  },
  files: ["content_script.js"]
});

Sie können die Tab-ID des untersuchten Fensters mit der Methode inspectedWindow.tabId-Property.

Wenn bereits ein Inhaltsskript eingefügt wurde, können Sie Messaging-APIs verwenden, um mit ihr kommunizieren können.

JavaScript im geprüften Fenster auswerten

Sie können die Methode inspectedWindow.eval() verwenden, um JavaScript auszuführen. im Kontext der untersuchten Seite. Du kannst die Methode eval() über eine Entwicklertools-Seite aufrufen, oder Seitenleistenbereich.

Standardmäßig wird der Ausdruck im Kontext des Hauptframes der Seite ausgewertet. inspectedWindow.eval() verwendet denselben Kontext und dieselben Optionen für die Skriptausführung wie der Code in der DevTools-Konsole eingegeben werden, mit der der Zugriff auf DevTools Console Utilities API-Funktionen bei Verwendung von eval(). Beispielsweise wird er von SOAK zur Überprüfung eines Elements verwendet:

chrome.devtools.inspectedWindow.eval(
  "inspect($$('head script[data-soak=main]')[0])",
  function(result, isException) { }
);

Sie können die useContentScriptContext auch auf true setzen, wenn Sie inspectedWindow.eval() für den Ausdruck im selben Kontext wie die Inhaltsskripte auswerten. Wenn Sie diese Option verwenden möchten, müssen Sie vor dem Aufruf von eval() eine Deklaration des statischen Content-Skripts verwenden. Rufen Sie dazu entweder executeScript() auf oder geben Sie einen Inhalt an. in der Datei manifest.json. Nachdem der Kontext des Kontextskripts geladen wurde, können Sie diese Option auch verwenden, um zusätzliche Inhaltsskripte einfügen.

Ausgewähltes Element an ein Content-Skript übergeben

Das Content-Skript hat keinen direkten Zugriff auf das aktuell ausgewählte Element. Jeglicher Code, den Sie Mit inspectedWindow.eval() ausführen hat Zugriff auf die Entwicklertools Console und Console Utilities APIs. In ausgewertetem Code können Sie beispielsweise $0 verwenden, um auf die ausgewähltes Element.

So übergeben Sie das ausgewählte Element an ein Content-Skript:

1. Erstellen Sie im Content-Skript eine Methode, die das ausgewählte Element als Argument verwendet.

   function setSelectedElement(el) {
       // do something with the selected element
   }
   

2. Rufen Sie die Methode über die Entwicklertools-Seite mit inspectedWindow.eval() auf. mit der Option useContentScriptContext: true.

   chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
       { useContentScriptContext: true });
   

Die Option useContentScriptContext: true gibt an, dass der Ausdruck im denselben Kontext wie die Inhaltsskripte, damit sie auf die Methode setSelectedElement zugreifen kann.

window eines Referenzbereichs abrufen

Sie benötigen einen Verweis auf das window-Objekt, um postMessage() über einen Entwicklertools-Bereich aufzurufen. Holen Sie sich iFrame-Fenster des Steuerfelds im Event-Handler panel.onShown:

extensionPanel.onShown.addListener(function (extPanelWindow) {
    extPanelWindow instanceof Window; // true
    extPanelWindow.postMessage( // …
});

Nachrichten von eingefügten Skripts an die Entwicklertools-Seite senden

Code wird ohne Inhaltsskript direkt in die Seite eingeschleust, z. B. durch Anfügen eines <script>-Objekts. oder inspectedWindow.eval() aufrufen, können keine Nachrichten an das der Entwicklertools-Seite mit runtime.sendMessage(). Stattdessen empfehlen wir, Kombinieren Sie Ihr eingefügtes Skript mit einem Inhaltsskript, das als Vermittler fungieren kann, und verwenden Sie Methode window.postMessage() Im folgenden Beispiel wird das Hintergrundskript verwendet. aus dem vorherigen Abschnitt:

// injected-script.js

window.postMessage({
  greeting: 'hello there!',
  source: 'my-devtools-extension'
}, '*');

// content-script.js

window.addEventListener('message', function(event) {
  // Only accept messages from the same frame
  if (event.source !== window) {
    return;
  }

  var message = event.data;

  // Only accept messages that we know are ours. Note that this is not foolproof
  // and the page can easily spoof messages if it wants to.
  if (typeof message !== 'object' || message === null ||
      message.source !== 'my-devtools-extension') {
    return;
  }

  chrome.runtime.sendMessage(message);
});

Andere alternative Techniken zur Nachrichtenweitergabe finden Sie auf GitHub.

Erkennen, wenn die Entwicklertools geöffnet und geschlossen werden

Füge einen onConnect-Listener hinzu, um nachzuverfolgen, ob das Entwicklertools-Fenster geöffnet ist. an den Service Worker und rufen Sie connect() über die Entwicklertools-Seite auf. Weil auf jedem Tab ein eigenes Entwicklertools-Fenster geöffnet sein kann, erhalten Sie möglicherweise mehrere Verbindungsereignisse. Wenn du verfolgen möchtest, ob ein Entwicklertools-Fenster geöffnet ist, musst du die Ereignisse zum Herstellen und Trennen der Verbindung wie unten gezeigt zählen im folgenden Beispiel:

// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
    if (port.name == "devtools-page") {
      if (openCount == 0) {
        alert("DevTools window opening.");
      }
      openCount++;

      port.onDisconnect.addListener(function(port) {
          openCount--;
          if (openCount == 0) {
            alert("Last DevTools window closing.");
          }
      });
    }
});

Die Seite „Entwicklertools“ erstellt eine Verbindung wie diese:

// devtools.js

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

// Send a periodic heartbeat to keep the port open.
setInterval(() => {
  port.postMessage("heartbeat");
}, 15000);

Beispiele für Entwicklertools-Erweiterungen

Die Beispiele auf dieser Seite stammen von den folgenden Seiten:

• Polymer-Entwicklertools-Erweiterung: Verwendet viele Hilfsprogramme, die auf der Hostseite ausgeführt werden, um Abfragen durchzuführen. DOM/JS-Status, der an das benutzerdefinierte Steuerfeld zurückgesendet wird.
• React DevTools-Erweiterung: Verwendet ein Submodul des Renderers, um die Entwicklertools-UI wiederzuverwenden Komponenten.
• Ember Inspector: Freigegebener Erweiterungskern mit Adaptern für Chrome und Firefox.
• Coquette-Inspect – eine saubere React-basierte Erweiterung mit eingefügtem Debugging-Agent in die Hostseite einfügen.
• Beispielerweiterungen bieten weitere lohnenswerte Erweiterungen, die Sie installieren, ausprobieren und lernen können. aus.

Weitere Informationen

Informationen zu den Standard-APIs, die Erweiterungen verwenden können, finden Sie unter chrome.* APIs und Web APIs

Geben Sie uns Feedback. Ihre Kommentare und Vorschläge helfen uns, die APIs zu verbessern.

Beispiele

Beispiele für die Verwendung von DevTools APIs finden Sie unter Beispiele.