Erstellen von Erweiterungen mit Coding-Agents

KI-basierte Programmieragenten wie Antigravity können jetzt Erweiterungscode mit beeindruckender Genauigkeit generieren. Um ihr Potenzial jedoch voll auszuschöpfen und qualitativ hochwertige Ergebnisse zu erzielen, müssen Sie ihnen den richtigen Kontext und die richtigen Tools zur Verfügung stellen.

In diesem Leitfaden wird erläutert, wie Sie die richtigen Tools in Ihren Programmieragenten einrichten und wie sie Ihnen helfen können, schneller bessere Erweiterungen zu entwickeln.

Wir haben eine Fertigkeit für Programmieragenten entwickelt, die speziell für die Erweiterungsentwicklung konzipiert wurde. Diese Fertigkeit ist Teil unserer umfassenderen Initiative Modern Web Guidance, die KI-Programmieragenten mit dem Fachwissen der Webplattform, Best Practices und modernen API-Mustern versorgt.

Das Erstellen der Erweiterung ist jedoch nur der erste Schritt. Damit Sie überprüfen können, ob Ihr Code wie erwartet funktioniert, können Sie mit Chrome-Entwicklertools für Agenten Erweiterungen direkt in Chrome debuggen und die Debugging-Funktionen und Leistungsstatistiken der Entwicklertools nutzen.

Einrichtung

Modern Web Guidance

Wenn Sie das Fertigkeitenpaket verwenden möchten, installieren Sie Modern Web Guidance in Ihrer bevorzugten Umgebung und fügen Sie die Erweiterungsfertigkeit hinzu. Hier finden Sie eine Anleitung für einige der beliebtesten Tools.

CLI

Die empfohlene Installation für die meisten Programmieragenten (einschließlich Gemini CLI, Claude Code und Codex) erfolgt über die modern-web-guidance-Befehlszeile, die vom Chrome-Team entwickelt wurde. Wenn Sie die Fertigkeiten über die modern-web-guidance-Befehlszeile installieren, werden sie automatisch auf dem neuesten Stand gehalten.

  npx modern-web-guidance@latest install --choose

Dadurch wird ein interaktiver Assistent ausgeführt, mit dem Sie die Fertigkeiten nach Ihren Vorlieben installieren können. Wählen Sie bei der Auswahl der Optionen Ihre Programmieragenten aus und wählen Sie sowohl chrome-extensions als auch modern-web-guidance aus.

Aufforderung zur Auswahl der CLI für Modern Web Guidance.
Auswahl von „chrome-extensions“ und „modern-web-guidance“ im Installationsassistenten

Antigravity

Bei der Installation von Antigravity können Sie das Plug‑in Modern Web Guidance auswählen, das die Erweiterungsfertigkeit enthält. Alternativ können Sie es über Anpassungen > Mit Google-Plug‑ins entwickeln > Modern Web Guidance hinzufügen.

Das Plug-in „Modern Web Guidance“ auf dem Installationsbildschirm von Antigravity.
Auswahl des Plug‑ins „Modern Web Guidance“ während der Installation von Antigravity

„Modern Web Guidance“ unter „Build With Google Plugins“ in den Antigravity-Anpassungen.
Hinzufügen von „Modern Web Guidance“ über „Anpassungen“ nach der Installation.

Chrome-Entwicklertools für Programmieragenten

Sie können Chrome-Entwicklertools für Agenten entweder als Plug‑in, Erweiterung oder als MCP-Server zu Ihrem bevorzugten Programmieragenten hinzufügen.

Hier finden Sie eine Anleitung für einige der beliebtesten Agenten.

Antigravity

  1. Laden Sie die Antigravity IDE herunter. Antigravity wird nicht empfohlen, da Sie die MCP-Serverkonfiguration nicht manuell bearbeiten können.

  2. Aktivieren Sie beim Start oder unter Einstellungen > Anpassungen unter Mit Google entwickeln die Option Chrome-Entwicklertools. Dadurch wird nur die Chrome-Entwicklertools-Fertigkeit installiert, nicht der MCP-Server.

    Kästchenoptionen für Entwicklertools und Modern Web Guidance in der Antigravity-Einrichtungsoberfläche.
    Aktivieren von „Modern Web Guidance“ und „Chrome-Entwicklertools“ beim Start oder unter „Anpassungen“

  3. Wenn Sie den MCP-Server für Chrome-Entwicklertools hinzufügen möchten, gehen Sie zu Einstellungen > Anpassung, klicken Sie auf die Schaltfläche MCP-Server hinzufügen und suchen Sie nach „Chrome-Entwicklertools“.

    Das Dialogfeld „MCP-Server hinzufügen“ in Antigravity, in dem die Chrome-Entwicklertools in den Suchergebnissen angezeigt werden.
    Suche nach „Chrome-Entwicklertools“ im Fenster „MCP-Server hinzufügen“
    Installieren des Chrome-Entwicklertools-MCP-Servers in der Antigravity-Oberfläche
    Installation des MCP-Servers für Chrome-Entwicklertools
    Die Liste der Anpassungen, in der die Chrome-Entwicklertools zu aktiven MCP-Servern hinzugefügt wurden.
    MCP-Server für Chrome-Entwicklertools unter „Anpassungen“ aufgeführt

  4. Klicken Sie auf MCP-Konfiguration öffnen , um die MCP-Serverkonfiguration zu öffnen. Sie müssen die Einstellungen schließen, damit die Konfigurationsdatei in der IDE angezeigt wird.

    Das Fenster „Anpassungseinstellungen“ mit der Schaltfläche „MCP-Konfiguration öffnen“.
    Schaltfläche „MCP-Konfiguration öffnen“ in den Einstellungen suchen

  5. Fügen Sie die folgenden beiden Konfigurationsparameter hinzu: --categoryExtensions (zum Aktivieren der Erweiterungstools) und --autoConnect (zum Aktivieren der Verbindung zu einem vorhandenen Chrome-Profil, das bei Verwendung der integrierten KI-APIs von Chrome oder bei der Anmeldung erforderlich ist).

    {
 "mcpServers": {
   "chrome-devtools-mcp": {
     "args": [
       "-y",
       "chrome-devtools-mcp@latest",
       "--categoryExtensions",
       "--autoConnect"
     ],
     "command": "npx"
   }
 }
}

  6. Wenn Sie das Remote-Debugging aktivieren möchten, öffnen Sie Chrome, rufen Sie chrome://inspect/#remote-debugging auf und wählen Sie Remote-Debugging für diese Browserinstanz zulassen aus.

    Die Seite „chrome://inspect“ mit den Kästchen für das Remote-Debugging.
    Aktivieren der Einstellung „Remote-Debugging für diese Browserinstanz zulassen“ in Chrome.

  7. Starten Sie die Antigravity IDE neu.

  8. Erstellen Sie einen neuen Arbeitsbereich und einen Test-Prompt: „Erstelle eine Hello-World-Chrome-Erweiterung. Test mit Chrome-Entwicklertools.“ Wenn der Agent den Test der Erweiterung im Browser startet, wird in Chrome ein Dialogfeld angezeigt, in dem Sie um die Berechtigung für das Remote-Debugging gebeten werden. Wählen Sie Zulassen aus. Während die Remote-Debugging-Sitzung aktiviert ist, wird in Chrome ein Banner mit der Meldung „Chrome wird derzeit von automatisierter Testsoftware gesteuert“ angezeigt.

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

Andere KI-Agenten

Eine Anleitung zum Einrichten anderer Agenten finden Sie in der Dokumentation zu Chrome-Entwicklertools MCP auf GitHub.

Anweisungen für den CHROMEWEBSTORE.md-Agenten

Ein wichtiger Schritt beim Veröffentlichen einer Erweiterung ist das Ausfüllen des Entwickler-Dashboards. Die Fertigkeit behebt dieses Problem, indem Ihr Programmieragent eine CHROMEWEBSTORE.md-Datei erstellt und verwaltet, in der die erforderlichen Informationen erfasst werden, einschließlich der Begründungen für jede im Code angeforderte Berechtigung.

Die Fertigkeit wird ausgelöst, wenn Sie Formulierungen wie „Veröffentlichen wir das“ oder „Erweiterung für den Store vorbereiten“ verwenden. Um Ihre agentengesteuerten Arbeitsabläufe zu optimieren, fügen Sie den Systemanweisungen Ihres Agenten Folgendes hinzu (z. B. ~/.gemini/GEMINI.md für Antigravity oder ~/.claude/CLAUDE.md für Claude):

Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.

Erweiterung mit Programmieragenten erstellen und testen

Die in Modern Web Guidance enthaltene Erweiterungsfertigkeit unterstützt Agenten auf drei wichtige Arten:

  • Aktuelles API-Wissen:Agenten werden über die neuesten APIs informiert, die möglicherweise nach dem Training des verwendeten Modells veröffentlicht wurden.
  • Best Practices:Agenten haben Zugriff auf alle Best Practices, die unser Team im Laufe der Jahre bei der Entwicklung von Chrome-Erweiterungen gelernt hat.
  • Bereitschaft zur Einreichung:Informationen, die Sie zum Einreichen Ihrer Erweiterung im Chrome Web Store benötigen, werden erfasst, um die Verteilung zu erleichtern.

Modern Web Guidance enthält auch Fertigkeiten, die alles abdecken, was Sie für eine hervorragende Nutzererfahrung benötigen, z. B. Leistung, Barrierefreiheit und moderne APIs. Integrierte KI-API-Fertigkeiten sorgen beispielsweise dafür, dass KI-Programmieragenten immer die neueste Version der API zusammen mit zusätzlichen Informationen zu expliziten Architekturregeln und Hardwarebeschränkungen für die Verwendung dieser APIs verwenden. So können sie Modelldownloads effizient verwalten, den Fokus auf die Sicherheit legen und elegante Fallback-Strategien entwickeln.

Die Fertigkeit hilft Ihrem Agenten auch dabei, die erforderlichen Informationen für die Veröffentlichung zu erfassen, einschließlich der Begründungen für jede im Code angeforderte Berechtigung. Wenn Sie Ihren Programmieragenten beispielsweise bitten, eine Erweiterung mit der Side Panel API zu erstellen und sie im Chrome Web Store zu veröffentlichen, erkennt der Agent, dass er die Berechtigung sidePanel benötigt. Anschließend wird eine CHROMEWEBSTORE.md-Datei mit einer Begründung erstellt. Wenn Sie bereit sind, die Erweiterung einzureichen, können Sie diese Begründung überprüfen, bei Bedarf Anpassungen vornehmen und sie direkt in das Entwickler-Dashboard kopieren.

Mit Chrome-Entwicklertools für Agenten können KI-Programmierassistenten Erweiterungen in einer laufenden Chrome-Instanz installieren und debuggen, insbesondere:

  • Erweiterungen installieren und deinstallieren
  • Alle installierten Erweiterungen auflisten und neu laden
  • Erweiterungsaktionen auslösen
  • Alle Oberflächen Ihrer Erweiterung prüfen (Pop‑up, Seitenleiste, Service Worker)

Hier finden Sie einen Prompt und ein Video, die zeigen, wie das in der Praxis funktioniert:

Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.

In diesem Fall sollte der Agent eine Manifest V3-Datei erstellen und die Berechtigung storage anfordern, da er weiß, dass Daten beibehalten werden müssen. Der Agent kann jetzt eine Erweiterung erstellen, sie installieren, sie ausführen und ihre Stabilität überprüfen, ohne dass Sie die Chat-Oberfläche verlassen müssen.

Dies ist ein einfaches Prompt-Beispiel. Weitere Informationen zu verschiedenen Prompt-Techniken und dazu, was für Ihren Anwendungsfall am besten geeignet ist, finden Sie in unserem Leitfaden zu Prompt Engineering.

Prompt-Beispiele zur Optimierung der Verteilung mit CHROMEWEBSTORE.md

Wenn Sie die Erweiterungsfertigkeit installieren und Ihrem Agenten Anweisungen geben, wird der Großteil der Arbeit erledigt. Wenn Sie jedoch in Ihren Prompts spezifisch sind, können Sie bessere Ergebnisse für die jeweilige Entwicklungsphase erzielen. Hier finden Sie eine Kurzanleitung, wie Sie Ihren Agenten anweisen, Ihre CHROMEWEBSTORE.md-Datei zu erstellen, zu aktualisieren und zu verwalten.

  • Erste Veröffentlichung: Wenn Ihre Erweiterung alle Funktionen enthält und Sie Ihre erste Store-Präsenz erstellen möchten.
Prepare the extension for publication on the Chrome Web Store.
  • Berechtigungen und Begründungen aktualisieren: Der Chrome Web Store erzwingt die Richtlinie bezüglich der Verwendung für einen einzigen Zweck und erfordert detaillierte Begründungen für jede in Ihrer manifest.json angeforderte Berechtigung.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
  • Ablehnung im Store bearbeiten: Wenn Ihre Erweiterung während der Überprüfung abgelehnt oder gekennzeichnet wird, können Sie dem Agenten den Grund für die Ablehnung direkt mitteilen und ihn bitten, Ihre Compliance-Metadaten zu aktualisieren.
Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.

Fazit

Durch die Kombination von Modern Web Guidance-Fertigkeiten mit Chrome-Entwicklertools für Agenten können Sie schneller hochwertige Funktionen entwickeln und gleichzeitig sicherstellen, dass Ihre Erweiterung stabil ist und zur Einreichung im Chrome Web Store bereit ist.

Testen Sie diese Tools in Ihrem nächsten Projekt, um zu sehen, wie sie die Entwicklung Ihrer Erweiterung vom ersten Prototyp bis zur Veröffentlichung optimieren können.