Créer des extensions avec des agents de codage

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 basés sur 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

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 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

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 programmation et choisissez chrome-extensions et modern-web-guidance.

Antigravity

Lorsque vous installez Antigravity, vous pouvez sélectionner le plug-in Modern Web Guidance qui inclut la compétence d'extension. Vous pouvez également l'ajouter en accédant à 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, 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

1. Téléchargez Antigravity IDE (Antigravity n'est pas recommandé, car il ne vous permet pas de modifier manuellement la configuration du serveur MCP).

2. Au démarrage ou dans Paramètres > Personnalisations, sous Créer avec Google, activez Outils pour les développeurs Chrome. Cette opération n'installe que la compétence Outils pour les développeurs Chrome, mais pas le serveur MCP.

   

3. Pour ajouter le serveur MCP des Outils pour les développeurs Chrome, accédez à Paramètres > Personnalisation, cliquez sur le bouton Ajouter un serveur MCP, puis recherchez "Outils pour les développeurs Chrome".

   

   

   

4. Cliquez sur Open MCP Config (Ouvrir la configuration MCP) pour ouvrir la configuration du serveur MCP. Notez que vous devez fermer les paramètres pour voir le fichier de configuration dans l'IDE.

   

5. Ajoutez les deux paramètres de configuration suivants : --categoryExtensions (pour activer les outils d'extension) et --autoConnect (pour activer la connexion à un profil Chrome existant, ce qui est nécessaire lorsque vous utilisez les API d'IA intégrées à Chrome ou que vous devez vous connecter).

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

6. Pour activer le débogage à distance, ouvrez Chrome, accédez à chrome://inspect/#remote-debugging, puis sélectionnez Autoriser le débogage à distance pour cette instance de navigateur.

   

7. Redémarrez l'IDE Antigravity.

8. Créez un espace de travail et une requête de test : "Crée une extension Chrome Hello World. Testez à l'aide des outils pour les développeurs Chrome." Lorsque l'agent commence à tester l'extension dans le navigateur, Chrome affiche une boîte de dialogue vous demandant l'autorisation de débogage à distance. Sélectionnez Autoriser. Lorsque la session de débogage à distance est activée, Chrome affiche la bannière "Chrome est actuellement contrôlé par un logiciel de test automatisé".

<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

Autres agents

Pour savoir comment configurer d'autres agents, consultez la documentation 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 se déclenche lorsque vous utilisez des expressions telles que "Publie ça" ou "Prépare cette extension pour le magasin". Toutefois, pour rationaliser vos workflows agentiques, ajoutez les instructions système suivantes à 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'outil fournit aux agents des informations sur 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 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 demande, vous pouvez examiner cette justification, la modifier 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 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 :

• installer et désinstaller 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 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 de développement 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 découvrir comment ils peuvent simplifier le développement de votre extension, du prototype initial à la publication.