Erstellen von Erweiterungen mit Coding-Agents

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

In diesem Leitfaden wird beschrieben, wie Sie die richtigen Tools in Ihren KI-Agenten für die Programmierung einrichten und wie Sie damit schneller bessere Erweiterungen erstellen können.

Wir haben einen Skill für Programmier-Agenten erstellt, der speziell für die Entwicklung von Erweiterungen gedacht ist. Diese Fähigkeit ist Teil unserer umfassenderen Initiative Modern Web Guidance, die KI-Coding-Agents mit Fachwissen zur Webplattform, Best Practices und modernen API-Mustern versorgt.

Das Erstellen der Erweiterung ist jedoch nur der erste Schritt. Damit Sie prüfen können, ob Ihr Code wie erwartet funktioniert, können KI-Coding-Assistenten mit den Chrome-Entwicklertools für KI-Agenten Erweiterungen direkt in Chrome debuggen und von den Debugging-Funktionen und Leistungsstatistiken der Entwicklertools profitieren.

Einrichtung

Modern Web Guidance

Wenn Sie das Skill Pack verwenden möchten, installieren Sie Modern Web Guidance in Ihrer bevorzugten Umgebung und fügen Sie den Erweiterungs-Skill hinzu. Hier finden Sie Anleitungen für einige der gängigen Tools.

Befehlszeile

Für die meisten Coding-Agents (einschließlich Gemini CLI, Claude Code und Codex) wird die Installation über die vom Chrome-Team entwickelte modern-web-guidance-Befehlszeile empfohlen. Wenn Sie die Skills ü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 Skills nach Ihren Wünschen installieren können. Wählen Sie aus den angezeigten Optionen Ihre KI-Coding-Agenten sowie chrome-extensions und modern-web-guidance aus.

Prompt zur Auswahl der Modern Web Guidance-CLI.
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 den Skill „Erweiterungen“ enthält. Alternativ können Sie es über Anpassungen > Build with Google-Plug-ins > Modern Web Guidance hinzufügen.

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

Modern Web Guidance unter „Build with Google“-Plug-ins in Antigravity-Anpassungen.
Modern Web Guidance nach der Installation über Anpassungen hinzufügen

Chrome-Entwicklertools für KI-Agenten, die Code schreiben

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

Hier finden Sie Anleitungen für einige der gängigsten KI-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 > Build with Google die Option Chrome-Entwicklertools. Dadurch wird nur der Chrome-Entwicklertools-Skill installiert, nicht der MCP-Server.

    Kästchen für Entwicklertools und Modern Web Guidance in der Antigravity-Einrichtungsoberfläche.
    Modern Web Guidance und Chrome-Entwicklertools beim Start oder bei Anpassungen aktivieren.

  3. Wenn Sie den MCP-Server der Chrome-Entwicklertools hinzufügen möchten, rufen Sie die Einstellungen > Anpassung auf, klicken Sie auf MCP-Server hinzufügen und suchen Sie nach „Chrome-Entwicklertools“.

    Das Suchdialogfeld „MCP-Server hinzufügen“ in Antigravity mit den Chrome-Entwicklertools in den Suchergebnissen.
    Im Fenster „MCP-Server hinzufügen“ nach Chrome-Entwicklertools suchen
    Installation des Chrome-Entwicklertools-MCP-Servers in der Antigravity-Oberfläche.
    MCP-Server der Chrome-Entwicklertools installieren
    Die Anpassungsliste mit den Chrome-Entwicklertools, die den aktiven MCP-Servern hinzugefügt wurden.
    Der MCP-Server der Chrome-Entwicklertools wird unter „Anpassungen“ aufgeführt.

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

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

  5. Fügen Sie die folgenden beiden Konfigurationsparameter hinzu: --categoryExtensions (um die Erweiterungstools zu aktivieren) und --autoConnect (um die Verbindung zu einem vorhandenen Chrome-Profil zu aktivieren, was erforderlich ist, wenn Sie die integrierten KI-APIs von Chrome verwenden oder eine 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.
    In Chrome die Einstellung „Remote-Debugging für diese Browserinstanz zulassen“ aktivieren.

  7. Starten Sie die Antigravity IDE neu.

  8. Erstellen Sie einen neuen Arbeitsbereich und einen Test-Prompt: „Erstelle eine Chrome-Erweiterung, die ‚Hello World‘ ausgibt. Testen Sie die Website mit den Chrome-Entwicklertools.“ Wenn der KI-Agent die Erweiterung im Browser testet, wird in Chrome ein Dialogfeld angezeigt, in dem Sie um die Erlaubnis zum Remote-Debugging gebeten werden. Wähle hierfür Zulassen aus. Während die Remote-Debugging-Sitzung aktiviert ist, wird in Chrome das Banner „Chrome wird 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 KI-Agenten finden Sie in der Dokumentation zu Chrome-Entwicklertools MCP auf GitHub.

Anweisungen für den Agenten in CHROMEWEBSTORE.md

Ein wichtiger Teil der Veröffentlichung einer Erweiterung ist das Ausfüllen des Entwickler-Dashboards. In diesem Skill wird dieses Problem behoben, indem Ihr Coding-Agent eine CHROMEWEBSTORE.md-Datei erstellt und pflegt, in der die erforderlichen Informationen erfasst werden, einschließlich der Begründungen für jede im Code angeforderte Berechtigungsanfrage.

Der Skill wird ausgelöst, wenn Sie Formulierungen wie „Lass uns das veröffentlichen“ oder „Bereite diese Erweiterung für den Store vor“ verwenden. Um Ihre Agentic Workflows 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 Coding-Agenten erstellen und testen

Der in Modern Web Guidance enthaltene Erweiterungsskill unterstützt Agenten auf drei wichtige Arten:

  • Aktuelles API-Wissen: Agenten werden über die neuesten APIs informiert, die möglicherweise nach dem Training des von Ihnen 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 gesammelt hat.
  • Bereit für die Einreichung:Es werden Informationen erfasst, die Sie möglicherweise benötigen, um Ihre Erweiterung im Chrome Web Store einzureichen. Das erleichtert die Verteilung.

Modern Web Guidance umfasst auch Skills, die alles abdecken, was Sie für eine hervorragende Nutzererfahrung benötigen, z. B. Leistung, Barrierefreiheit im Internet und moderne APIs. Integrierte KI-API-Skills sorgen beispielsweise dafür, dass KI-Coding-Agents immer die aktuelle Version der API verwenden, zusammen mit zusätzlichen Informationen zu expliziten Architekturregeln und Hardwareeinschränkungen für die Verwendung dieser APIs. So können Modelldownloads effizient verwaltet, Sicherheitsaspekte berücksichtigt und geeignete Fallback-Strategien implementiert werden.

Der Skill hilft Ihrem Agenten auch dabei, die für die Veröffentlichung erforderlichen Informationen zu erfassen, einschließlich der Begründungen für jede im Code angeforderte Berechtigung. Wenn Sie Ihren Coding-Agenten beispielsweise bitten, eine Erweiterung mit der Side Panel API zu erstellen und 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 Begründung einzureichen, können Sie sie überprüfen, bei Bedarf Anpassungen vornehmen und sie direkt in das Entwickler-Dashboard kopieren.

Mit den Chrome-Entwicklertools für KI-Agenten können KI-Coding-Assistenten Erweiterungen in einer laufenden Chrome-Instanz installieren und debuggen. Das umfasst Folgendes:

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

Hier ist ein Prompt und ein Video, das zeigt, 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 er Daten speichern muss. Der KI-Agent kann jetzt eine Erweiterung erstellen, installieren, ihre Ausführung beobachten und ihre Stabilität prüfen, ohne dass Sie die Chatoberflä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 zum Prompt Engineering.

Prompt-Beispiele zur Optimierung der Bereitstellung mit CHROMEWEBSTORE.md

Die Installation des Erweiterungs-Skills und das Hinzufügen von Anweisungen für Ihren Agenten erledigen den Großteil der Arbeit. Wenn Sie jedoch in Ihren Prompts spezifisch sind, können Sie bessere Ergebnisse für die jeweilige Entwicklungsphase erzielen. Hier finden Sie eine Kurzanleitung dazu, wie Sie Ihren KI-Agenten auffordern können, Ihre CHROMEWEBSTORE.md-Datei zu erstellen, zu aktualisieren und zu pflegen.

  • Erstmalige Veröffentlichung: Wenn Ihre Erweiterung alle Funktionen enthält und Sie Ihre erste Präsenz im Store erstellen möchten.
Prepare the extension for publication on the Chrome Web Store.
  • Berechtigungen und Begründungen aktualisieren: Im Chrome Web Store wird die Richtlinie bezüglich der Verwendung für einen einzigen Zweck durchgesetzt. Für jede Berechtigungsanfrage, die in Ihrer manifest.json angefordert wird, ist eine detaillierte Begründung erforderlich.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
  • Umgang mit einer Ablehnung im Store: Wenn Ihre Erweiterung während der Überprüfung abgelehnt oder gekennzeichnet wird, können Sie den Grund für die Ablehnung direkt an den KI-Agenten weitergeben 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

Wenn Sie die Fähigkeiten von Modern Web Guidance mit den Chrome-Entwicklertools für KI-Agenten kombinieren, können Sie hochwertige Funktionen schneller entwickeln und gleichzeitig dafür sorgen, dass Ihre Erweiterung stabil und bereit für die Einreichung im Chrome Web Store ist.

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