Erstellen von Erweiterungen mit Coding-Agents

KI-basierte Coding-Agents wie Antigravity können jetzt Erweiterungscode mit beeindruckender Genauigkeit generieren. Damit sie ihr Potenzial jedoch wirklich entfalten und hochwertige Ergebnisse liefern können, 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 Coding-Agents einrichten und wie sie Ihnen helfen können, bessere Erweiterungen schneller zu entwickeln.

Wir haben einen Skill für die Programmierung von KI-Agenten entwickelt, der speziell für die Entwicklung von Erweiterungen konzipiert ist. Diese Funktion ist Teil unserer umfassenderen Initiative Modern Web Guidance, die KI-Coding-Agents mit dem Fachwissen der Webplattform, Best Practices und modernen API-Mustern ausstattet.

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

Einrichtung

Leitfaden für moderne Webanwendungen

Wenn Sie das Skill-Paket verwenden möchten, installieren Sie Modern Web Guidance in Ihrer bevorzugten Umgebung und fügen Sie das Erweiterungs-Skill hinzu. Hier finden Sie Anleitungen für einige beliebte Tools.

Befehlszeile

Die empfohlene Installation für die meisten Programmier-Agents (einschließlich Gemini CLI, Claude Code und Codex) erfolgt über die modern-web-guidance CLI, die vom Chrome-Team entwickelt wurde. 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 gestartet, mit dem Sie die Skills nach Ihren Wünschen installieren können. Wählen Sie bei der Auswahl der Optionen Ihre Coding-Agenten sowie chrome-extensions und modern-web-guidance aus.

Antigravity

Bei der Installation von Antigravity können Sie das Plug-in Modern Web Guidance auswählen, das die Erweiterungsfunktion enthält. Alternativ können Sie es über Customizations > Build With Google Plugins > Modern Web Guidance hinzufügen.

Chrome-Entwicklertools für Coding-Agents

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

Hier finden Sie Anleitungen für einige der beliebtesten Kundenservicemitarbeiter.

Antigravity

Wenn Sie den MCP-Server der Chrome-Entwicklertools verwenden möchten, folgen Sie der Anleitung von Antigravity zum Installieren eines benutzerdefinierten MCP-Servers. Fügen Sie der MCP-Serverkonfiguration 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 Agents finden Sie in der Dokumentation auf Chrome-Entwicklertools MCP GitHub.

CHROMEWEBSTORE.md-Agentenanweisungen

Ein wichtiger Teil der Veröffentlichung einer Erweiterung ist das Ausfüllen des Entwickler-Dashboards. Der Skill löst dieses Problem, indem Ihr Coding-Agent eine CHROMEWEBSTORE.md-Datei erstellt und verwaltet, in der erforderliche Informationen erfasst werden, einschließlich Begründungen für jede im Code angeforderte Berechtigung.

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 agentenbasierten 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 Coding-Agents erstellen und testen

Die in Modern Web Guidance enthaltene Erweiterung unterstützt Kundenservicemitarbeiter auf drei wichtige Arten:

• Aktuelles API-Wissen:Agents werden über die neuesten APIs informiert, die möglicherweise nach dem Training des von Ihnen verwendeten Modells veröffentlicht wurden.
• Best Practices:Agents haben Zugriff auf alle Best Practices, die unser Team im Laufe der Jahre beim Erstellen von Chrome-Erweiterungen gelernt hat.
• Einreichungsbereitschaft:Hier werden Informationen erfasst, die Sie möglicherweise benötigen, um Ihre Erweiterung im Chrome Web Store einzureichen. So wird die Verteilung erleichtert.

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-Skills sorgen beispielsweise dafür, dass KI-Coding-Agents 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 Modelldownloads effizient verwaltet werden, der Fokus liegt auf der Sicherheit und es gibt elegante Fallback-Strategien.

Der Skill hilft Ihrem Agent 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-Agent 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, den Einspruch einzureichen, können Sie diese Begründung prüfen, bei Bedarf anpassen und direkt in das Entwickler-Dashboard kopieren.

Mit Chrome-Entwicklertools für Agents können KI-basierte Coding-Assistenten Erweiterungen in einer laufenden Chrome-Instanz installieren und debuggen. Konkret sind folgende Aktionen möglich:

• Erweiterungen installieren und deinstallieren
• Alle installierten Erweiterungen auflisten und neu laden
• Erweiterungsaktionen auslösen.
• Prüfen Sie jede Oberfläche 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 Agent kann jetzt eine Erweiterung erstellen, installieren, ausführen und ihre Stabilität überprü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 funktioniert, finden Sie in unserem Leitfaden zum Prompt Engineering.

Prompt-Beispiele zur Optimierung der Verteilung mit CHROMEWEBSTORE.md

Die Installation des Erweiterungs-Skills und das Hinzufügen von Anweisungen zu Ihrem Agent erledigen zwar den Großteil der Arbeit, aber wenn Sie in Ihren Prompts genauer werden, können Sie bessere Ergebnisse für die jeweilige Entwicklungsphase erzielen. Hier finden Sie eine Kurzanleitung dazu, wie Sie Ihren KI-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: Im Chrome Web Store wird die Richtlinie bezüglich der Verwendung für einen einzigen Zweck durchgesetzt. Für jede in Ihrem manifest.json angeforderte Berechtigung sind detaillierte Begründungen erforderlich.

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 Ablehnungsgrund 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 Chrome-Entwicklertools für Agents kombinieren, können Sie hochwertige Funktionen schneller entwickeln. Außerdem wird so sichergestellt, 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.