Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Entwicklertools erweitern

Entwicklertools-Erweiterungen fügen den Chrome-Entwicklertools Funktionen hinzu, indem sie über eine Entwicklertools-Seite, die der Erweiterung hinzugefügt wurde, auf Entwicklertools-spezifische Erweiterungs-APIs zugreifen.

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

Die Entwicklertools-Seite

Wenn ein Entwicklertools-Fenster geöffnet wird, erstellt eine Entwicklertools-Erweiterung eine Instanz ihrer Entwicklertools-Seite, die so lange vorhanden ist, wie das Fenster geöffnet ist. Diese Seite hat Zugriff auf die Entwicklertools-APIs und Erweiterungs-APIs und kann Folgendes tun:

Mit den devtools.panels-APIs können Sie Bereiche erstellen und mit ihnen interagieren. Außerdem können Sie andere Erweiterungsseiten als Bereiche oder Seitenleisten zum Entwicklertools-Fenster hinzufügen.
Mit den devtools.inspectedWindow-APIs können Sie Informationen zum untersuchten Fenster abrufen und Code im untersuchten Fenster auswerten.
Mit den devtools.network-APIs können Sie Informationen zu Netzwerkanfragen abrufen.
Mit den devtools.recorder-APIs können Sie den Bereich „Recorder“ erweitern.
Mit den devtools.performance-APIs können Sie Informationen zum Aufzeichnungsstatus des Bereichs „Leistung“ abrufen.

Die Entwicklertools-Seite kann direkt auf Erweiterungs-APIs zugreifen. Dazu gehört auch die Möglichkeit, über die Nachrichtenübermittlung mit dem Service Worker zu kommunizieren.

Entwicklertools-Erweiterung erstellen

Wenn Sie eine Entwicklertools-Seite für Ihre Erweiterung erstellen möchten, fügen Sie das Feld devtools_page im Erweiterungsmanifest hinzu:

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

Das Feld devtools_page muss auf eine HTML-Seite verweisen. Da sich die Entwicklertools-Seite lokal in Ihrer Erweiterung befinden muss, empfehlen wir, sie mit einer relativen URL anzugeben.

Die Elemente der chrome.devtools-API sind nur für die Seiten verfügbar, die im Entwicklertools-Fenster geladen werden, solange dieses Fenster geöffnet ist. Inhaltskripte und andere Erweiterungsseiten haben keinen Zugriff auf diese APIs.

Der Browser-Namespace und Entwicklertools-Erweiterungen

Der browser Namespace der in Chrome 148 eingeführt wurde, ist für Erweiterungen deaktiviert, die devtools_page deklarieren. Die Deaktivierung gilt für die gesamte Erweiterung, nicht nur für die Entwicklertools-Seite, sondern für jeden Skriptkontext, in dem Erweiterungs-APIs ausgeführt werden. Verwenden Sie in diesen Erweiterungen weiterhin chrome.*.

Der Grund dafür ist eine Kompatibilitätslücke mit webextension-polyfill. Die chrome.devtools.*-APIs sind nur für Callbacks verfügbar. Sie geben noch keine nativen Promises zurück. Daher verwenden Entwicklertools-Erweiterungen häufig das Polyfill, um sie zu umschließen. Das Polyfill überspringt das Umschließen, wenn browser definiert ist, da davon ausgegangen wird, dass der Host die Arbeit bereits erledigt hat. Wenn Chrome browser für diese Erweiterungen aktiviert, würde das Polyfill keine Aktion ausführen und chrome.devtools.*-Aufrufe würden keine Promises mehr zurückgeben. Wenn browser deaktiviert bleibt, kann das Polyfill weiterhin umschließen.

Durch dieselbe Deaktivierung werden auch die anderen Änderungen an der Messaging-API von Chrome 148 für diese Erweiterungen deaktiviert, einschließlich Promise-Antworten in runtime.onMessage. Die Einschränkung wird aufgehoben, sobald die Entwicklertools-APIs Promises nativ unterstützen.

UI-Elemente der Entwicklertools: Bereiche und Seitenleistenbereiche

Neben den üblichen UI-Elementen von Erweiterungen wie Browserschaltflächen, Kontextmenüs und Pop-ups kann eine Entwicklertools-Erweiterung dem Entwicklertools-Fenster UI-Elemente hinzufügen:

Ein Bereich ist ein Tab der obersten Ebene, z. B. die Bereiche „Elemente“, „Quellen“ und „Netzwerk“.
Ein Seitenleistenbereich enthält zusätzliche UI-Elemente, die sich auf einen Bereich beziehen. Die Bereiche „Stile“, „Berechnete Stile“ und „Ereignis-Listener“ im Bereich „Elemente“ sind Beispiele für Seitenleistenbereiche. Je nach Chrome-Version und Dockingposition des Entwicklertools-Fensters können Ihre Seitenleistenbereiche wie im folgenden Beispielbild aussehen:

DevTools-Fenster mit dem Bereich „Elemente“ und dem Seitenbereich „Stile“ — Entwicklertools-Fenster mit dem Bereich „Elemente“ und dem Seitenleistenbereich „Stile“

Jeder Bereich ist eine eigene HTML-Datei, die andere Ressourcen enthalten kann (JavaScript, CSS, Bilder usw.). Verwenden Sie den folgenden Code, um einen einfachen Bereich zu erstellen:

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

JavaScript, das in einem Bereich 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-Inhalte: Rufen Sie setPage() auf, um eine HTML-Seite anzugeben, die im Bereich angezeigt werden soll.
JSON-Daten: Übergeben Sie ein JSON-Objekt an setObject().
JavaScript-Ausdruck: Übergeben Sie einen Ausdruck an setExpression(). Die Entwicklertools werten den Ausdruck im Kontext der untersuchten Seite aus und zeigen dann den Rückgabewert an.

Sowohl für setObject() als auch für setExpression() wird der Wert im Bereich so angezeigt, wie er in der Entwicklertools-Konsole zu sehen wäre. Mit setExpression() können Sie jedoch DOM-Elemente und beliebige JavaScript-Objekte anzeigen, während setObject() nur JSON-Objekte unterstützt.

Zwischen Erweiterungskomponenten kommunizieren

In den folgenden Abschnitten werden einige hilfreiche Möglichkeiten beschrieben, mit denen Entwicklertools-Erweiterungskomponenten miteinander kommunizieren können.

Inhalts-Script einschleusen

Verwenden Sie scripting.executeScript(), um ein Inhalts-Script einzuschleusen:

// 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 inspectedWindow.tabId Eigenschaft abrufen.

Wenn bereits ein Inhaltskript eingefügt wurde, können Sie Messaging-APIs verwenden, um damit zu kommunizieren.

JavaScript im untersuchten Fenster auswerten

Mit der inspectedWindow.eval() Methode können Sie JavaScript Code im Kontext der untersuchten Seite ausführen. Sie können die Methode eval() von einer Entwicklertools-Seite, einem Bereich oder einem Seitenleistenbereich aufrufen.

Achtung:Verwenden Sie eval() nur, wenn Sie Zugriff auf die JavaScript-Inhalte einer untersuchten Seite benötigen. Andernfalls empfehlen wir, Skripts mit der scripting.executeScript() Methode auszuführen. Weitere Informationen finden Sie unter inspectedWindow.

Standardmäßig wird der Ausdruck im Kontext des Hauptframes der Seite ausgewertet. inspectedWindow.eval() verwendet denselben Skriptausführungskontext und dieselben Optionen wie Code der in der Entwicklertools-Konsole eingegeben wurde. Dadurch ist der Zugriff auf die Funktionen der Entwicklertools Konsolenhilfsprogramm API möglich, wenn eval() verwendet wird. Verwenden Sie sie beispielsweise, um das erste Skriptelement im Abschnitt <head> des HTML-Dokuments zu untersuchen:

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

Sie können auch useContentScriptContext auf true setzen, wenn Sie inspectedWindow.eval() aufrufen, um den Ausdruck im selben Kontext wie die Inhaltskripte auszuwerten. Wenn Sie diese Option verwenden möchten, müssen Sie vor dem Aufrufen von eval() eine statische Inhaltskriptdeklaration verwenden, entweder durch Aufrufen von executeScript() oder durch Angabe eines Inhaltsskripts in der Datei manifest.json. Nachdem der Inhaltskriptkontext geladen wurde, können Sie diese Option auch verwenden, um zusätzliche Inhaltskripte einzufügen.

Ausgewähltes Element an ein Inhaltskript übergeben

Das Inhaltskript hat keinen direkten Zugriff auf das aktuell ausgewählte Element. Jeder Code, den Sie mit inspectedWindow.eval() ausführen, hat jedoch Zugriff auf die Entwicklertools-Konsole und die Konsolenhilfsprogramm-APIs. Im ausgewerteten Code können Sie beispielsweise mit $0 auf das ausgewählte Element zugreifen.

So übergeben Sie das ausgewählte Element an ein Inhaltskript:

Erstellen Sie im Inhaltskript eine Methode, die das ausgewählte Element als Argument verwendet.
```
function setSelectedElement(el) {
    // do something with the selected element
}
```
Rufen Sie die Methode von der Entwicklertools-Seite mit inspectedWindow.eval() und der Option useContentScriptContext: true auf.
```
chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });
```

Die Option useContentScriptContext: true gibt an, dass der Ausdruck im selben Kontext wie die Inhaltskripte ausgewertet werden muss, damit auf die Methode setSelectedElement zugegriffen werden kann.

`window` eines Referenzbereichs abrufen

Wenn Sie postMessage() von einem Entwicklertools-Bereich aufrufen möchten, benötigen Sie einen Verweis auf das zugehörige window-Objekt. Rufen Sie das Iframe-Fenster eines Bereichs über den panel.onShown Event-Handler ab:

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

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

Code, der direkt in die Seite eingefügt wurde, ohne ein Inhaltskript, z. B. durch Anhängen eines <script> Tags oder Aufrufen von inspectedWindow.eval(), kann keine Nachrichten mit runtime.sendMessage() an die Entwicklertools-Seite senden. Stattdessen empfehlen wir, das eingefügte Skript mit einem Inhaltskript zu kombinieren, das als Vermittler fungieren kann, und die Methode window.postMessage() zu verwenden. Im folgenden Beispiel wird das Hintergrundskript aus dem vorherigen Abschnitt verwendet:

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

Weitere alternative Techniken zur Nachrichtenübermittlung finden Sie auf GitHub.

Erkennen, wenn die Entwicklertools geöffnet und geschlossen werden

Wenn Sie nachverfolgen möchten, ob das Entwicklertools-Fenster geöffnet ist, fügen Sie dem Service Worker einen onConnect Listener hinzu und rufen Sie connect() von der Entwicklertools-Seite auf. Da für jeden Tab ein eigenes Entwicklertools-Fenster geöffnet sein kann, erhalten Sie möglicherweise mehrere connect-Ereignisse. Wenn Sie nachverfolgen möchten, ob ein Entwicklertools-Fenster geöffnet ist, zählen Sie die connect- und disconnect-Ereignisse, wie im folgenden Beispiel gezeigt:

// 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 Entwicklertools-Seite erstellt eine Verbindung so:

// 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 Devtools Extension: Verwendet viele Hilfsprogramme, die auf der Hostseite ausgeführt werden, um den DOM-/JS-Status abzufragen und an den benutzerdefinierten Bereich zurückzusenden.
React DevTools Extension: Verwendet ein Untermodul des Renderers, um UI-Komponenten der Entwicklertools wiederzuverwenden.
Ember Inspector: Gemeinsamer Erweiterungskern mit Adaptern für Chrome und Firefox.
Coquette-inspect: Eine saubere React-basierte Erweiterung mit einem Debugging-Agent, der in die Hostseite eingefügt wird.
Sample Extensions: Enthält weitere nützliche Erweiterungen, die Sie installieren, ausprobieren und von denen Sie lernen können.

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, in denen Entwicklertools-APIs verwendet werden, finden Sie unter Beispiele.

Entwicklertools erweitern Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Die Entwicklertools-Seite

Entwicklertools-Erweiterung erstellen

Der Browser-Namespace und Entwicklertools-Erweiterungen

UI-Elemente der Entwicklertools: Bereiche und Seitenleistenbereiche

Zwischen Erweiterungskomponenten kommunizieren

Inhalts-Script einschleusen

JavaScript im untersuchten Fenster auswerten

Ausgewähltes Element an ein Inhaltskript übergeben

window eines Referenzbereichs abrufen

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

Erkennen, wenn die Entwicklertools geöffnet und geschlossen werden

Beispiele für Entwicklertools-Erweiterungen

Weitere Informationen

Beispiele

Entwicklertools erweitern

`window` eines Referenzbereichs abrufen