Les outils de développement Chrome pour les agents permettent à votre agent de démarrer une session de navigateur et d'installer des extensions Chrome ou d'interagir avec elles à l'aide d'un serveur MCP. Cela permet à votre agent de codage de contrôler le cycle de vie des extensions : installation, rechargement et déclenchement d'actions.
Au lieu de charger manuellement une extension non empaquetée, de cliquer sur le bouton "Actualiser" de la page de gestion des extensions chaque fois que vous modifiez le code et de déclencher manuellement l'extension pour la tester, demandez à votre agent IA de gérer l'ensemble du processus de manière autonome. Cela comble le fossé entre la génération de code statique et les tests d'extensions en direct.
Vous pouvez utiliser les outils d'extensions pour effectuer les opérations suivantes :
- Installer des extensions : installez une extension Chrome non empaquetée à partir d'un chemin d'accès de répertoire local.
- Lister les extensions : récupérez la liste de toutes les extensions Chrome installées, y compris leur nom, leur ID, leur version et leur état activé.
- Recharger les extensions : rechargez une extension Chrome non empaquetée par son ID pour appliquer instantanément les modifications de code.
- Déclencher des actions : déclenchez l'action par défaut d'une extension par son ID,
par exemple en ouvrant un menu ou en exécutant une action de script d'arrière-plan (voir chrome.action dans la documentation de l'API).
- Désinstaller des extensions : supprimez une extension Chrome de la session de navigateur par son ID.
Prérequis
Avant d'utiliser les outils d'extensions, assurez-vous de disposer des éléments suivants :
- Flag expérimental : la catégorie "Extensions" n'est pas active par défaut dans les outils de développement pour les agents. Vous devez configurer le serveur MCP avec le
--categoryExtensionsflag. - Extensions décompressées : les outils tels que
install_extensionnécessitent un chemin absolu vers le dossier d'extension décompressé, ce qui les rend idéaux pour le développement local.
Cas d'utilisation des outils d'extensions Chrome
Demandez à votre agent de gérer le cycle de vie de votre extension lors du développement et de la correction de bugs.
Remarque : Les étapes d'exécution de l'agent sont des exemples de comportement potentiel. Votre agent peut agir différemment.
Itérer et recharger rapidement une extension
Le rechargement manuel d'une extension après chaque modification de fichier ralentit le développement. Demandez à votre agent d'appliquer un correctif de code et de recharger immédiatement l'extension pour vérifier le nouveau comportement sans intervention manuelle.
Exemple de prompt :
Vous pouvez utiliser une approche générale :
Verify the extension has access to the active tab.
Vous pouvez aussi être plus précis :
Update the manifest.json to include the "activeTab" permission. Then, reload the extension with ID 'abc123xyz' and trigger its default action to ensure it works.
Exemple d'exécution de l'agent : votre agent modifie le fichier manifest.json sur votre système de fichiers. Il appelle ensuite l'outil reload_extension à l'aide de l'ID fourni.
Enfin, il appelle l'outil trigger_extension_action pour activer l'extension et vérifier qu'aucune erreur d'autorisation n'est générée dans la console.
Tester l'action par défaut d'une extension sur une page cible
Vous devez souvent tester l'interaction d'un script de contenu ou d'une action d'extension avec un site Web spécifique. Automatisez ce processus en demandant à votre agent d'accéder au site, d'installer l'extension et de la déclencher.
Exemple de prompt :
Vous pouvez utiliser une approche générale :
Test my extension on example.com and verify it works correctly.
Vous pouvez aussi être plus précis :
Navigate to example.com, install the unpacked extension located at '/Users/dev/my-extension', and trigger the extension action. Check the console logs to verify the content script executed correctly.
Exemple d'exécution de l'agent : votre agent accède à l'URL cible à l'aide de navigate_page. Il utilise ensuite install_extension avec le chemin absolu fourni. Une fois l'extension chargée, il exécute trigger_extension_action pour simuler un clic de l'utilisateur. Enfin, il utilise list_console_messages pour confirmer que le script de contenu s'est exécuté et a produit le résultat attendu.
Vérifier les extensions installées et nettoyer
Lors des tests automatisés, vous devrez peut-être vérifier si une extension est correctement chargée avec la bonne version ou la supprimer pour garantir un état propre pour le test suivant.
Exemple de prompt :
Uninstall 'My Test Extension' from the browser.
Exemple d'exécution de l'agent : votre agent utilise l'outil list_extensions pour récupérer la liste des extensions installées et leurs métadonnées. Il analyse la sortie pour identifier l'ID associé à "My Test Extension". Il utilise ensuite l'outil uninstall_extension avec cet ID pour le supprimer en toute sécurité du navigateur.
Créer une extension et la tester
Pour créer une extension Chrome à partir de zéro, vous devez généralement créer des fichiers standard et charger manuellement le répertoire non empaqueté dans le navigateur pour le tester. Évitez cette configuration manuelle en demandant à votre agent de générer le code initial, de charger l'extension et de vérifier sa fonctionnalité de base de bout en bout en une seule étape.
Exemple de prompt :
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to '/tmp/gray-bg-ext', navigate to example.com, load the extension, and verify that it works.
Exemple d'exécution de l'agent : votre agent crée un fichier manifest.json Manifest V3 de base et un service worker en arrière-plan qui écoute l'événement chrome.action.onClicked. Il accède ensuite à la page de test, appelle install_extension et utilise trigger_extension_action pour simuler un clic de l'utilisateur. Enfin, il inspecte le DOM ou prend une capture d'écran pour confirmer que l'arrière-plan est devenu gris, ce qui prouve que le code standard est fonctionnel.