Mit Chrome DevTools für Agenten kann Ihr Agent eine Browsersitzung starten und Chrome-Erweiterungen über einen MCP-Server installieren oder mit ihnen interagieren. So kann Ihr Coding-Agent den Lebenszyklus der Erweiterung steuern: Installation, Neuladen und Auslösen von Aktionen.
Anstatt eine entpackte Erweiterung manuell zu laden, jedes Mal auf der Seite zur Erweiterungsverwaltung auf die Schaltfläche „Neu laden“ zu klicken, wenn Sie den Code ändern, und die Erweiterung manuell auszulösen, um sie zu testen, können Sie Ihren KI-Agenten anweisen, den gesamten Prozess autonom zu verwalten. So wird die Lücke zwischen statischer Codegenerierung und Live-Erweiterungstests geschlossen.
Mit den Erweiterungstools können Sie Folgendes tun:
- Erweiterungen installieren:Installieren Sie eine entpackte Chrome-Erweiterung über einen lokalen Verzeichnispfad.
- Erweiterungen auflisten:Rufen Sie eine Liste aller installierten Chrome-Erweiterungen ab, einschließlich Name, ID, Version und aktiviertem Status.
- Erweiterungen neu laden:Laden Sie eine entpackte Chrome-Erweiterung anhand ihrer ID neu, um Codeänderungen sofort anzuwenden.
- Aktionen auslösen: Lösen Sie die Standardaktion einer Erweiterung anhand ihrer ID aus,
z. B. das Öffnen eines Menüs oder das Ausführen einer Hintergrundskriptaktion (siehe
chrome.action in der API
Dokumentation).
- Erweiterungen deinstallieren:Entfernen Sie eine Chrome-Erweiterung anhand ihrer ID aus der Browsersitzung.
Vorbereitung
Bevor Sie die Erweiterungstools verwenden, müssen Sie Folgendes haben:
- Experimentelles Flag:Die Kategorie „Erweiterungen“ ist in DevTools für Agenten standardmäßig nicht aktiv. Sie müssen den MCP-
Server mit dem
--categoryExtensionsFlag konfigurieren. - Entpackte Erweiterungen:Für Tools wie
install_extensionist ein absoluter Pfad zum entpackten Erweiterungsordner erforderlich. Sie eignen sich daher ideal für die lokale Entwicklung.
Anwendungsfälle für Chrome-Erweiterungstools
Weisen Sie Ihren Agenten an, den Lebenszyklus Ihrer Erweiterung während der Entwicklung und Fehlerbehebung zu verwalten.
Hinweis:Die Schritte zur Agentenausführung sind Beispiele für potenzielles Verhalten. Ihr Agent verhält sich möglicherweise anders.
Erweiterung schnell iterieren und neu laden
Das manuelle Neuladen einer Erweiterung nach jeder Dateiänderung verlangsamt die Entwicklung. Weisen Sie Ihren Agenten an, eine Codekorrektur anzuwenden und die Erweiterung sofort neu zu laden, um das neue Verhalten ohne manuellen Eingriff zu überprüfen.
Beispiel-Prompt :
Sie können einen allgemeinen Ansatz verwenden:
Verify the extension has access to the active tab.
Oder Sie können detaillierter vorgehen:
Update the manifest.json to include the "activeTab" permission. Then, reload the extension with ID 'abc123xyz' and trigger its default action to ensure it works.
Beispiel für die Agentenausführung:Ihr Agent bearbeitet die Datei manifest.json in Ihrem Dateisystem. Anschließend ruft er das Tool reload_extension mit der angegebenen ID auf.
Zum Schluss ruft er das Tool trigger_extension_action auf, um die Erweiterung zu aktivieren und zu prüfen, ob in der Konsole keine Berechtigungsfehler ausgegeben werden.
Standardaktion einer Erweiterung auf einer Zielseite testen
Oft müssen Sie testen, wie ein Inhaltsskript oder eine Erweiterungsaktion mit einer bestimmten Website interagiert. Automatisieren Sie diesen Prozess, indem Sie Ihren Agenten anweisen, zur Website zu navigieren, die Erweiterung zu installieren und sie auszulösen.
Beispiel-Prompt :
Sie können einen allgemeinen Ansatz verwenden:
Test my extension on example.com and verify it works correctly.
Oder Sie können detaillierter vorgehen:
Navigate to example.com, install the unpacked extension located at '/Users/dev/my-extension', and trigger the extension action. Check the console logs to verify the content script executed correctly.
Beispiel für die Agentenausführung:Ihr Agent navigiert mit navigate_page zur Ziel-URL. Anschließend verwendet er install_extension mit dem angegebenen absoluten Pfad. Nachdem die Erweiterung geladen wurde, führt er trigger_extension_action aus, um einen Nutzerklick zu simulieren. Zum Schluss verwendet er list_console_messages, um zu bestätigen, dass das Inhaltsskript ausgeführt wurde und die erwartete Ausgabe erzeugt hat.
Installierte Erweiterungen überprüfen und bereinigen
Bei automatisierten Tests müssen Sie möglicherweise prüfen, ob eine Erweiterung mit der richtigen Version korrekt geladen wurde, oder sie entfernen, um für den nächsten Test einen sauberen Zustand zu gewährleisten.
Beispiel-Prompt :
Uninstall 'My Test Extension' from the browser.
Beispiel für die Agentenausführung:Ihr Agent ruft mit dem Tool list_extensions die Liste der installierten Erweiterungen und ihre Metadaten ab. Er parst die Ausgabe, um die ID zu ermitteln, die mit „My Test Extension“ verknüpft ist. Anschließend verwendet er das Tool uninstall_extension mit dieser ID, um sie sicher aus dem Browser zu entfernen.
Neue Erweiterung erstellen und testen
Wenn Sie eine neue Chrome-Erweiterung von Grund auf erstellen, müssen Sie in der Regel Boilerplate-Dateien erstellen und das entpackte Verzeichnis manuell in den Browser laden, um es zu testen. Überspringen Sie diese manuelle Einrichtung, indem Sie Ihren Agenten anweisen, den ersten Code zu generieren, die Erweiterung zu laden und ihre grundlegenden Funktionen in einem einzigen Schritt zu überprüfen.
Beispiel-Prompt :
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to '/tmp/gray-bg-ext', navigate to example.com, load the extension, and verify that it works.
Beispiel für die Agentenausführung:Ihr Agent erstellt eine einfache manifest.json-Datei für Manifest V3 und einen Hintergrund-Service Worker, der auf das Ereignis chrome.action.onClicked wartet. Anschließend navigiert er zur Testseite, ruft install_extension auf und verwendet trigger_extension_action, um einen Nutzerklick zu simulieren. Zum Schluss prüft er das DOM oder macht einen Screenshot, um zu bestätigen, dass der Hintergrund grau geworden ist. So wird nachgewiesen, dass die Boilerplate-Datei funktioniert.