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. Cependant, 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 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 de développement 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 de développement.

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'extensions. Voici les instructions pour certains des outils les plus populaires.

CLI

Pour la plupart des agents de codage (y compris Gemini CLI, Claude Code et Codex), il est recommandé d'installer l'extension 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 codage, puis 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'extensions, ou l'ajouter via Personnalisations > Plug-ins Build with Google > Modern Web Guidance.

Outils de développement Chrome pour les agents de codage

Vous pouvez ajouter les Outils de développement Chrome pour les agents à l'agent de codage de votre choix, sous forme de plug-in, d'extension ou de serveur MCP.

Voici les instructions pour certains des agents les plus populaires.

Antigravity

1. Téléchargez l'IDE Antigravity (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 Build with Google, activez Outils pour les développeurs Chrome. Cela n'installera que la compétence Outils pour les développeurs Chrome, et non 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 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'extensions) 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 de 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 et 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 : "Create a hello world Chrome extension. Testez-le à l'aide des outils pour les développeurs Chrome." Lorsque l'agent lance le test de 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 sur Chrome DevTools MCP GitHub.

Instructions pour l'agent CHROMEWEBSTORE.md

Pour publier une extension, il est important de 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 demande d'autorisation demandée dans le code.

La compétence sera déclenchée lorsque vous utiliserez des expressions telles que "Publions ceci" ou "Prépare cette extension pour le store". Toutefois, pour simplifier 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 Modern Web Guidance aide les agents de trois manières principales :

• Connaissances à jour sur les API : il enseigne aux agents les dernières API, qui ont peut-être été publiées après l'entraînement du modèle que vous utilisez.
• Bonnes pratiques : l'agent a accès à toutes les bonnes pratiques que notre équipe a apprises au fil des ans en créant des extensions Chrome.
• Préparation de l'envoi : il effectue le suivi des 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 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 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 de mettre en place des stratégies de remplacement 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 demande, vous pouvez examiner cette justification, l'ajuster si nécessaire et la copier directement dans le tableau de bord du développeur.

Les Outils de développement 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épertoriez toutes les extensions installées et rechargez-les.
• Déclencher des actions d'extension.
• Inspectez chaque surface de votre extension (pop-up, panneau latéral, service worker).

Voici un prompt 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 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, observer son exécution et vérifier sa stabilité sans que vous ayez à quitter l'interface de chat.

Voici un exemple de requête simple. Pour en savoir plus sur les différentes techniques de prompt et trouver celle qui convient le mieux à votre cas d'utilisation, consultez notre guide sur le prompt engineering.

Exemples de prompts pour simplifier la distribution avec CHROMEWEBSTORE.md

Même si l'installation de la compétence d'extension et l'ajout d'instructions à votre agent feront l'essentiel du travail, être précis dans vos prompts peut produire de meilleurs résultats pour l'étape de développement où vous vous trouvez. Voici un guide rapide pour demander à votre agent de créer, mettre à jour et 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 sur le Store.

Prepare the extension for publication on the Chrome Web Store.

• Mettre à jour les autorisations et les justifications : le Chrome Web Store applique le règlement d'objectif unique et exige des justifications précises pour chaque demande d'autorisation dans votre fichier manifest.json.

We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.

• Gérer un refus du Store : si votre extension est refusée ou signalée lors du processus d'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 de Modern Web Guidance 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.