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 obtenir 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 de meilleures extensions plus rapidement.
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 de l'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, les Outils pour les développeurs Chrome pour les agents permettent 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 des outils pour les développeurs.
Configuration
Conseils pour le Web moderne
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 outils populaires.
CLI
L'installation recommandée pour la plupart des agents de codage (y compris Gemini CLI, Claude Code et Codex) se fait via la CLI modern-web-guidance créée par l'équipe Chrome. L'installation des compétences via la CLI modern-web-guidance permet de les maintenir automatiquement à jour.
npx modern-web-guidance@latest install --choose
Cela exécute un assistant interactif 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
Lorsque vous installez Antigravity, vous pouvez sélectionner le plug-in Modern Web Guidance (Conseils pour le Web moderne), qui inclut la compétence d'extension. Vous pouvez également l'ajouter en accédant à Personnalisations > Plug-ins Build With Google > Modern Web Guidance.
Outils pour les développeurs Chrome pour les agents de codage
Vous pouvez ajouter les outils pour les développeurs Chrome à l'agent de codage de votre choix, soit en tant que plug-in ou extension, soit en tant que serveur MCP.
Vous trouverez ci-dessous les instructions pour certains des agents les plus populaires.
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 savoir comment configurer d'autres agents, consultez la documentation sur Outils pour les développeurs Chrome 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. Pour résoudre ce problème, la compétence demande à votre agent de programmation de créer et de gérer un fichier CHROMEWEBSTORE.md qui suit les informations nécessaires, y compris les justifications pour chaque autorisation demandée dans le code.
La compétence sera déclenchée lorsque vous utiliserez des expressions telles que "Publions ceci" ou "Préparons cette extension pour le magasin". Toutefois, pour rationaliser vos workflows agentiques, ajoutez les éléments suivants 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 les consignes pour le Web moderne aide les agents de trois manières principales :
- Connaissances à jour sur les API : l'IA enseigne aux agents les dernières API, qui peuvent avoir été publiées après l'entraînement du modèle que vous utilisez.
- Bonnes pratiques : les agents ont accès à 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 permet de suivre les informations dont vous pourriez avoir besoin pour envoyer votre extension au Chrome Web Store, ce qui facilite la distribution.
Les conseils sur le Web moderne incluent é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 intégrées de l'API d'IA garantissent que les agents de codage d'IA utilisent toujours la dernière version de l'API, ainsi que des informations supplémentaires sur les règles architecturales explicites et les contraintes matérielles pour l'utilisation de ces API. Cela permet une gestion efficace des téléchargements de modèles, une attention particulière à la sécurité et des stratégies de repli élégantes.
La compétence aide également votre agent à suivre les informations nécessaires à la publication, y compris les justifications pour chaque autorisation demandée dans le code. Par exemple, si vous demandez à votre agent de programmation 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 demande, vous pouvez examiner cette justification, apporter les modifications nécessaires 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 basés sur l'IA d'installer et de déboguer des extensions dans une instance Chrome en cours d'exécution, plus précisément :
- Installez et désinstallez des extensions.
- Répertoriez toutes les extensions installées et rechargez-les.
- Déclenchez des actions d'extension.
- Inspectez chaque surface de votre extension (pop-up, panneau latéral, service worker).
Voici une requête et une vidéo montrant 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 manifeste 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 voir 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 l'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 l'essentiel du travail, le fait d'ê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 pour 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 première présence sur le Play 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.
- Gérer le refus d'une extension : si votre extension est refusée ou signalée lors de l'examen, vous pouvez indiquer directement la raison 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
En combinant les compétences liées aux consignes pour le Web moderne avec les Outils pour les développeurs Chrome pour les agents, vous pouvez créer des fonctionnalités de haute qualité plus rapidement, mais aussi 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 voir comment ils peuvent simplifier le développement de votre extension, du prototype initial à la publication.