Les agents de codage IA, comme Antigravity, peuvent désormais générer du code d'extension avec une précision impressionnante. Toutefois, pour exploiter pleinement leur potentiel et garantir des résultats de haute qualité, vous devez leur fournir le contexte et les outils appropriés.
Ce guide explique comment configurer les bons outils dans vos agents de codage et comment ils peuvent vous aider à créer plus rapidement de meilleures extensions.
Nous avons créé une compétence pour les agents de codage spécialement conçue pour le développement d'extensions. Cette compétence fait partie de notre initiative plus large, Modern Web Guidance, qui fournit aux agents de codage IA l'expertise de la plate-forme Web, les bonnes pratiques et les modèles d'API modernes.
Mais la création de l'extension n'est que la première étape. Pour vous aider à vérifier que votre code fonctionne comme prévu, Outils pour les développeurs Chrome pour les agents permet aux assistants de codage IA de déboguer les extensions directement dans Chrome et de bénéficier des fonctionnalités de débogage et des insights sur les performances de DevTools.
Configuration
Modern Web Guidance
Pour utiliser le pack de compétences, installez Modern Web Guidance dans l'environnement de votre choix et ajoutez-y la compétence d'extension. Vous trouverez ci-dessous les instructions pour certains des outils les plus courants.
CLI
L'installation recommandée pour la plupart des agents de codage (y compris la CLI Gemini, Claude Code et Codex) s'effectue via la CLI modern-web-guidance créée par l'équipe Chrome. L'installation des compétences via la CLI modern-web-guidance les maintiendra automatiquement à jour.
npx modern-web-guidance@latest install --choose
Un assistant interactif s'exécute pour installer les compétences selon vos préférences. Lorsque des options s'affichent, sélectionnez vos agents de codage et choisissez chrome-extensions et modern-web-guidance.
Antigravity
Lors de l'installation d'Antigravity, vous pouvez sélectionner le plug-in Modern Web Guidance qui inclut la compétence d'extension, ou l'ajouter via Customizations > Build With Google Plugins > Modern Web Guidance.
Outils pour les développeurs Chrome pour les agents de codage
Vous pouvez ajouter les Outils pour les développeurs Chrome pour les agents à l'agent de codage de votre choix en tant que plug-in, extension ou serveur MCP.
Vous trouverez ci-dessous les instructions pour certains des agents les plus courants.
Antigravity
Pour utiliser le serveur MCP des Outils pour les développeurs Chrome, suivez les instructions de la documentation d'Antigravity pour installer un serveur MCP personnalisé. Ajoutez ce qui suit à la configuration des serveurs MCP :
{
"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
Autres agents
Pour obtenir des instructions sur la configuration d'autres agents, consultez la documentation sur Chrome DevTools MCP GitHub.
Instructions pour l'agent CHROMEWEBSTORE.md
Une étape importante de la publication d'une extension consiste à remplir le tableau de bord du développeur. La compétence résout ce problème en demandant à votre agent de codage de créer et de gérer un fichier CHROMEWEBSTORE.md qui suit les informations nécessaires, y compris les justifications de chaque autorisation demandée dans le code.
La compétence est déclenchée lorsque vous utilisez des expressions telles que "Publions ceci" ou "Préparons cette extension pour le Store". Toutefois, pour simplifier vos workflows d'agent, ajoutez ce qui suit aux instructions système de votre agent (par exemple, ~/.gemini/GEMINI.md pour Antigravity ou ~/.claude/CLAUDE.md pour 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.
Créer et tester votre extension avec des agents de codage
La compétence d'extension incluse dans Modern Web Guidance aide les agents de trois manières principales :
- Connaissances à jour sur les API : elle permet aux agents de se familiariser avec les dernières API, qui ont peut-être été publiées après l'entraînement du modèle que vous utilisez.
- Bonnes pratiques : elle permet aux agents d'accéder à toutes les bonnes pratiques que notre équipe a apprises au fil des années en créant des extensions Chrome.
- Préparation de l'envoi : elle suit les informations dont vous pourriez avoir besoin pour envoyer votre extension au Chrome Web Store, ce qui facilite la distribution.
Modern Web Guidance inclut également des compétences qui couvrent tout ce dont vous avez besoin pour offrir une excellente expérience utilisateur, comme les performances, l'accessibilité et les API modernes. Par exemple, les compétences d'API d'IA intégrées garantissent que les agents de codage IA utilisent toujours la dernière version de l'API, ainsi que des informations supplémentaires sur les règles d'architecture explicites et les contraintes matérielles liées à l'utilisation de ces API. Cela permet de gérer efficacement les téléchargements de modèles, de se concentrer sur la sécurité et d'appliquer des stratégies de repli efficaces.
La compétence aide également votre agent à suivre les informations nécessaires à la publication, y compris les justifications de chaque autorisation demandée dans le code. Par exemple, si vous demandez à votre agent de codage de créer une extension à l'aide de l'API Side Panel et de la publier sur le Chrome Web Store, l'agent reconnaîtra qu'il a besoin de l'autorisation sidePanel. Il créera ensuite un fichier CHROMEWEBSTORE.md avec une justification. Lorsque vous êtes prêt à envoyer votre extension, vous pouvez examiner cette justification, apporter des modifications si nécessaire et la copier directement dans le tableau de bord du développeur.
Les outils pour les développeurs Chrome pour les agents permettent aux assistants de codage IA d'installer et de déboguer des extensions dans une instance Chrome en cours d'exécution, en particulier :
- Installer et désinstaller des extensions
- Répertorier toutes les extensions installées et les recharger
- Déclencher des actions d'extension
- Inspecter chaque surface de votre extension (pop-up, panneau latéral, service worker)
Voici une requête et une vidéo qui montrent comment cela fonctionne en pratique :
Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.
Dans ce cas, l'agent doit créer un fichier Manifest V3 et demander l'autorisation storage, car il sait qu'il doit conserver les données. L'agent peut désormais créer une extension, l'installer, la regarder s'exécuter et vérifier sa stabilité sans que vous ayez à quitter l'interface de chat.
Il s'agit d'un exemple de requête simple. Pour en savoir plus sur les différentes techniques de prompt engineering et trouver celle qui convient le mieux à votre cas d'utilisation, consultez notre guide sur le prompt engineering.
Exemples de requêtes pour simplifier la distribution avec CHROMEWEBSTORE.md
Bien que l'installation de la compétence d'extension et l'ajout d'instructions à votre agent fassent la majeure partie du travail, être précis dans vos requêtes peut produire de meilleurs résultats pour l'étape de développement dans laquelle vous vous trouvez. Voici un guide rapide sur la façon de demander à votre agent de créer, de mettre à jour et de gérer votre fichier CHROMEWEBSTORE.md.
- Première publication : lorsque votre extension est complète et que vous souhaitez générer votre présence initiale dans le Store.
Prepare the extension for publication on the Chrome Web Store.
- Mise à jour des autorisations et des justifications : le Chrome Web Store applique le règlement d'objectif unique et exige des justifications précises pour chaque autorisation demandée dans votre
manifest.json.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
- Gestion d'un refus du Store : si votre extension est refusée ou signalée lors du processus d'examen, vous pouvez indiquer directement le motif du refus à l'agent et lui demander de mettre à jour vos métadonnées de conformité.
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.
Conclusion
La combinaison des compétences Modern Web Guidance et des Outils pour les développeurs Chrome pour les agents vous permet de créer plus rapidement des fonctionnalités de haute qualité, mais aussi de vous assurer que votre extension est stable et prête à être envoyée au Chrome Web Store.
Commencez à tester ces outils dans votre prochain projet pour découvrir comment ils peuvent simplifier le développement de votre extension, du prototype initial à la publication.