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 Fähigkeit für Programmieragenten entwickelt, die speziell für die Erweiterungsentwicklung konzipiert wurde. Diese Fähigkeit 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 den 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 Fähigkeitenpaket verwenden möchten, installieren Sie Modern Web Guidance in Ihrer bevorzugten Umgebung und fügen Sie die Erweiterungsfähigkeit hinzu. Hier finden Sie die 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 Fähigkeiten ü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 Vorlieben installieren können. Wählen Sie bei der Aufforderung 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 Erweiterungsfähigkeit enthält. Alternativ können Sie es über Anpassungen > Mit Google-Plug‑ins entwickeln > 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

Anleitung für das moderne Web 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 die Anleitung für einige der beliebtesten Agenten.

Antigravity

Wenn Sie den Chrome-Entwicklertools-MCP-Server verwenden möchten, folgen Sie der Anleitung in der Antigravity-Dokumentation, um einen benutzerdefinierten MCP-Server zu installieren. Fügen Sie der Konfiguration der MCP-Server Folgendes hinzu:

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

Claude Code

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

Andere KI-Agenten

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

Anweisungen für den Agenten CHROMEWEBSTORE.md

Ein wichtiger Teil der Veröffentlichung einer Erweiterung ist das Ausfüllen des Entwickler-Dashboards. Die Fähigkeit befasst sich damit, 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 Fähigkeit wird ausgelöst, wenn Sie Formulierungen wie „Veröffentlichen wir das“ oder „Diese 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 Erweiterungsfähigkeit in Modern Web Guidance unterstützt Kundenservicemitarbeiter 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, wodurch die Verteilung erleichtert wird.

Modern Web Guidance umfasst auch Fähigkeiten, die alles abdecken, was Sie für eine hervorragende Nutzererfahrung benötigen, z. B. Leistung, Barrierefreiheit und moderne APIs. Integrierte KI-API-Fähigkeiten 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 Fähigkeit 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 Seitenleisten-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 den Chrome-Entwicklertools für Agenten können KI-Programmierassistenten Erweiterungen in einer ausgeführten Chrome-Instanz installieren und debuggen. Konkret können sie Folgendes tun:

  • Erweiterungen installieren und deinstallieren
  • Alle installierten Erweiterungen auflisten und neu laden
  • Erweiterungsaktionen auslösen
  • Jede Oberfläche 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 Erweiterungsfähigkeit installieren und Ihrem Agenten Anweisungen hinzufügen, 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 auffordern, 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.
  • Mit einer Ablehnung im Store umgehen: Wenn Ihre Erweiterung während des Überprüfungsprozesses 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

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

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