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.
![Architekturdiagramm, das die Kommunikation der Entwicklertools-Seite mit dem
das untersuchte Fenster und den Service Worker. Der Service Worker wird angezeigt
mit Inhaltsskripts kommunizieren und auf Erweiterungs-APIs zugreifen.
Die Seite „Entwicklertools“ hat Zugriff auf die Entwicklertools-APIs, z. B. zum Erstellen von Bereichen.](https://developer.chrome.com/static/docs/extensions/how-to/devtools/extend-devtools/image/architecture-diagram.png?authuser=6&hl=de)
Zu den Entwicklertools-spezifischen Erweiterungs-APIs gehören:
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:
![Das Entwicklertools-Fenster mit dem Bereich „Elemente“ und dem Seitenleistenbereich „Stile“.](https://developer.chrome.com/static/docs/extensions/how-to/devtools/extend-devtools/image/devtools-window-showing-e-9051f7f0347cd.png?authuser=6&hl=de)
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:
Erstellen Sie im Content-Skript eine Methode, die das ausgewählte Element als Argument verwendet.
function setSelectedElement(el) { // do something with the selected element }
Rufen Sie die Methode über die Entwicklertools-Seite mit
inspectedWindow.eval()
auf. mit der OptionuseContentScriptContext: 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.