Chrome : lui faire manipuler le navigateur
📚 Navigation de la série : L'article précédent 39 Prise en main par la pratique a assemblé pour la première fois les briques étudiées dans un flux de travail complet. Cet article ouvre une nouvelle porte à Claude Code — lui permettre de manipuler directement votre navigateur Chrome : ouvrir des pages web, lire les erreurs de la console, remplir des formulaires, extraire des données, le tout sans quitter votre terminal.
⚠️ Fonctionnalité expérimentale, sujette à des modifications selon les versions. L'intégration Chrome présentée ici est actuellement en version bêta. Les commandes, les versions requises et les navigateurs pris en charge se réfèrent à la documentation officielle et peuvent être ajustés dans les versions ultérieures.
Aujourd'hui, nous allons parler d'une fonctionnalité qui permet à Claude Code de « se doter de mains » — manipuler le navigateur.
Dans les trente-neuf premiers chapitres, le travail de Claude s'est limité au périmètre des « fichiers + ligne de commande » : lire votre code, modifier vos fichiers, exécuter vos scripts. Pourtant, dans le développement réel, une multitude de tâches dépendent directement du navigateur — tester manuellement un formulaire de connexion après modification, examiner les erreurs de la console en cas de bug, ou ajuster les styles au pixel près par rapport à une maquette. Auparavant, vous deviez basculer manuellement sur Chrome, effectuer ces actions, puis copier-coller les informations obtenues pour les transmettre à Claude.
Ce n'est plus nécessaire. En activant l'intégration Chrome, il vous suffit de saisir dans votre terminal : « Ouvre localhost:3000, soumets ce formulaire avec des données erronées et vérifie si le message d'erreur s'affiche correctement ». Claude ouvrira le navigateur, remplira le formulaire, lira l'erreur et vous fera un retour. « Modifier le code » et « tester le code dans le navigateur » peuvent enfin être enchaînés du début à la fin au sein d'une même conversation, sans avoir à changer continuellement de fenêtre.
Le jour où j'ai connecté cette fonctionnalité pour la première fois, je suis resté un moment à observer Chrome ouvrir un nouvel onglet, cliquer sur la barre de recherche et saisir les caractères un à un — cette sensation de le voir physiquement agir à ma place est radicalement différente du lancement de commandes dans un bac à sable.
Pour le dire simplement : le protocole MCP (détails au chapitre 22) connecte Claude à des sources de données comme des bases de données ou Jira. L'intégration Chrome, elle, le relie au navigateur que vous utilisez quotidiennement, avec l'ensemble de vos sessions actives. Cet article détaille ses possibilités, sa configuration, ses pièges et les limites de sécurité de cette interaction directe.
À la fin de cet article, vous obtiendrez :
- Une explication simple de ce qu'est l'intégration Chrome et comment elle se positionne par rapport au protocole MCP et au computer use
- La procédure complète pour l'activer (installation de l'extension, démarrage avec
--chrome, prérequis de version et d'abonnement) ainsi que les environnements et navigateurs non compatibles - Six cas d'usage fréquents (débogage en direct, validation de design, saisie de formulaires, extraction de données..., issus des flux de travail types officiels) avec des exemples d'instructions concrètes
- Les risques liés à la manipulation d'un navigateur réel par rapport à un bac à sable, les barrières intégrées par défaut et les règles de sécurité à appliquer
- Un exercice pratique minimal guidé avec résultats attendus : connecter Chrome et lui faire lire une page
01 Comprendre le concept : qu'est-ce que c'est et que peut-il faire ?
Pour faire simple : l'intégration Chrome permet à Claude Code de s'appuyer sur votre instance Chrome active (où vos sessions sont déjà ouvertes) pour ouvrir des pages, cliquer sur des boutons, remplir des formulaires et analyser le contenu web à votre place.
Le terme clé est « votre instance active ». La documentation officielle l'explique sans détour :
Claude ouvre de nouveaux onglets pour les tâches du navigateur et partage l'état de connexion de votre navigateur, lui permettant ainsi d'accéder à tous les sites où vous êtes connecté. Les manipulations du navigateur s'exécutent dans une fenêtre Chrome visible en temps réel.
Trois points essentiels sont à retenir :
- Il ouvre de nouveaux onglets au sein de votre instance active de Chrome, et non un processus de navigateur distinct.
- Il partage vos sessions actives — si vous êtes connecté à Gmail, Notion ou votre console d'administration, il y accède directement, sans configuration d'API ni de token.
- La fenêtre est visible en temps réel — vous observez chacun de ses clics et saisies, les opérations ne sont pas masquées en arrière-plan.
Analogie : faire appel à un chauffeur. Si vous avez bu un verre et faites appel à un chauffeur pour rentrer chez vous, celui-ci ne conduit pas son propre véhicule, mais le vôtre. Votre badge de télépéage est actif, vos cartes de parking sont dans la boîte à gants et votre adresse est enregistrée dans le GPS. Le chauffeur les utilise directement sans que vous ayez à lui fournir de nouvelles autorisations. Cependant, vous pouvez reprendre le contrôle à tout moment : s'il faut passer un contrôle d'accès avec reconnaissance faciale que le chauffeur ne peut pas franchir, il s'arrêtera et vous laissera faire. Claude agissant dans le navigateur se comporte exactement comme ce chauffeur — il manipule votre navigateur avec ses sessions actives, effectue les tâches à sa portée et s'interrompt pour vous solliciter face à des formulaires de connexion ou des codes de vérification (CAPTCHA) qu'il ne peut pas franchir.
Quelles sont ses applications concrètes ? La documentation liste plusieurs cas d'usage. Voici les scénarios les plus parlants pour un développeur, accompagnés d'exemples d'instructions :
- Débogage en direct : Lire directement les erreurs de la console du navigateur et l'état du DOM de la page, puis corriger directement le code à l'origine de l'anomalie — c'est sa grande différence avec le protocole MCP, il a la capacité de « voir » ce qui se produit dans le navigateur.
- Validation de design : Comparer l'intégration UI réalisée avec la maquette Figma en ouvrant le rendu dans le navigateur (en lien avec le chapitre 17 sur l'intégration graphique).
- Tests d'applications web : Valider la conformité des formulaires, vérifier l'affichage visuel ou tester le parcours utilisateur complet.
- Interaction avec des applications connectées : Rédiger ou modifier des éléments directement dans Gmail, Notion ou Google Docs, sans avoir besoin de connecteurs d'API.
- Extraction de données : Récupérer des listes d'éléments sur une page (noms, prix, états des stocks) sous forme de données structurées et les enregistrer dans un fichier CSV local.
- Enregistrement de GIF : Enregistrer une séquence d'actions dans le navigateur sous forme de fichier GIF pour documenter ou partager un flux d'utilisation.
Voici le scénario qui m'a le plus marqué : je devais résoudre un bug d'intégration délicat où la console renvoyait une erreur undefined au chargement de la page. J'avais passé près d'une demi-heure à scruter le code sans succès. Une fois Chrome connecté, j'ai simplement demandé : « Ouvre la page du tableau de bord, décris-moi l'erreur présente dans la console au chargement, puis identifie le bloc de code concerné » — il a analysé l'erreur, remonté la pile d'exécution et ciblé une variable non initialisée, le tout en moins de deux minutes. Auparavant, j'aurais dû ouvrir les outils de développement (F12), copier l'erreur, la coller dans mon terminal et rédiger une description, ce qui prenait bien plus de temps.
💡 Résumé en une phrase : L'intégration Chrome permet à Claude de s'appuyer sur votre navigateur avec ses sessions actives pour charger des pages, lire la console, remplir des formulaires et extraire des données — « modifier le code » et « valider dans le navigateur » s'exécutent enfin au sein d'une seule et même conversation.
02 Comparatif : rôles respectifs de MCP, Chrome et computer use
Avant de procéder à la configuration, clarifions un point sujet à confusion : Claude dispose de plusieurs canaux pour interagir avec l'extérieur, l'intégration Chrome n'est que l'un d'eux. Il convient de bien distinguer ces trois méthodes pour choisir la plus adaptée à vos besoins.
La documentation officielle présente un ordre de priorité — pour les tâches externes, Claude privilégiera les outils les plus précis avant de recourir à des méthodes plus lourdes :
如果您有该服务的 MCP server,Claude 会使用它。如果任务是 shell 命令,Claude 会使用 Bash。如果任务是浏览器工作且您已设置 Claude in Chrome,Claude 会使用它。如果以上都不适用,Claude 会使用 computer use。
Analogie : ne vous déplacez pas si un simple appel suffit. Pour une même démarche, si un message écrit suffit, vous l'envoyez (le plus rapide). Sinon, vous passez un coup de fil (un peu plus long). Si cela ne suffit toujours pas, vous vous déplacez en personne (la méthode la plus lourde et chronophage). Claude applique la même logique — tenter d'abord la méthode la plus directe, et ne monter en complexité que si nécessaire.
Voici un tableau comparatif pour cibler le domaine d'application de chaque solution :
| Solution | Rôle principal | Conditions d'utilisation | Traité dans cet article |
|---|---|---|---|
| MCP (détails au chapitre 22) | Interagir avec des services disposant d'interfaces (bases de données, Jira, Slack) | Un serveur MCP existe pour le service concerné (méthode privilégiée car la plus précise) | Non |
| Chrome (intégration) | Manipuler des pages web dans le navigateur : clics, saisie de formulaires, lecture de console, extraction de données | Tâches sur navigateur web avec l'intégration activée | Oui |
| computer use | Contrôler des applications natives du système : clics, capture d'écran, navigation générale | Cas non couverts par les autres outils (applications natives, émulateurs, outils sans API) | Non (voir précisions ci-dessous) |
La fonctionnalité computer use (autoriser Claude à interagir avec votre système) est une solution connexe. Elle s'avère plus étendue mais plus lente que l'intégration Chrome — alors que l'intégration Chrome se cantonne au navigateur, le computer use peut manipuler l'ensemble du bureau macOS : lancer des applications natives, interagir avec les boutons ou effectuer des captures d'écran. La documentation officielle précise :
屏幕控制保留用于其他工具无法到达的事物:原生应用、模拟器和没有 API 的工具。
Voici les différences majeures à retenir (conformément à la documentation officielle) :
- Le computer use est actuellement en version d'évaluation (Research Preview) et restreint à la CLI sur macOS (sous Windows, il faut passer par l'application de bureau, voir chapitre 10). Il nécessite un abonnement Pro/Max et ne prend pas en charge le mode non interactif
-p. - Il apparaît sous la forme d'un serveur intégré nommé
computer-usedans le menu/mcp; il est désactivé par défaut et doit être activé manuellement. - Il s'exécute sur votre bureau réel et requiert les autorisations d'accessibilité et d'enregistrement de l'écran de macOS.
En résumé : privilégiez le protocole MCP si des API existent, passez par l'intégration Chrome pour les interactions web, et recourez au computer use uniquement s'il est nécessaire de manipuler le bureau natif. Cet article se concentre sur la deuxième voie — Chrome.
💡 Résumé en une phrase : L'interaction de Claude avec l'extérieur se décline en trois niveaux, du plus précis au plus large — MCP (services avec API) → Chrome (pages web du navigateur) → computer use (bureau macOS) ; cet article se concentre sur l'intégration Chrome, dédiée aux actions au sein du navigateur.
03 Configuration : installer l'extension et démarrer avec --chrome
Activer l'intégration Chrome est plus simple que de configurer un serveur MCP standard — la procédure repose sur deux étapes : installer une extension Chrome et ajouter l'argument --chrome au lancement. Cependant, certains prérequis techniques sont indispensables.
Vérification des quatre prérequis
La documentation officielle liste quatre exigences strictes ; assurez-vous de toutes les valider :
| Prérequis | Exigence spécifique | Méthode de vérification |
|---|---|---|
| Navigateur | Google Chrome ou Microsoft Edge | Les autres navigateurs ne sont pas supportés (voir la liste de non-compatibilité ci-dessous) |
| Extension Chrome | Extension « Claude in Chrome », version v1.0.36 ou supérieure | À vérifier dans chrome://extensions |
| Version de Claude Code | Version v2.0.73 ou supérieure | Exécuter claude --version dans le terminal |
| Abonnement | Formule payante Anthropic en direct (Pro / Max / Team / Enterprise) | Exécuter /status pour voir l'abonnement |
Le prérequis concernant l'abonnement est le plus souvent source d'erreur, attardons-nous-y un instant. La documentation officielle stipule :
Chrome 集成不可通过 Amazon Bedrock、Google Cloud Vertex AI 或 Microsoft Foundry 等第三方提供商获得。如果您仅通过第三方提供商访问 Claude,则需要单独的 claude.ai 账户来使用此功能。
En clair : si vous utilisez des accès tiers comme Bedrock / Vertex / Foundry (abordés au chapitre 05) ou une simple clé API, cette fonctionnalité sera indisponible. Elle requiert un abonnement direct auprès d'Anthropic. C'est la même contrainte que pour l'application de bureau ou le computer use.
Liste des navigateurs et environnements non compatibles
Prenez le temps de consulter cette liste de non-compatibilité, pour vous éviter des blocages inexpliqués :
- Navigateurs : Seuls Chrome et Edge sont supportés actuellement. Brave, Arc et les autres navigateurs basés sur Chromium ne sont pas compatibles — ne supposez pas qu'ils fonctionnent sous prétexte qu'ils partagent le même moteur de rendu.
- Environnements : WSL (Windows Subsystem for Linux) n'est pas supporté. Exécuter Claude Code sous WSL en tentant de cibler l'instance Chrome de votre système hôte Windows n'est pas possible pour le moment.
J'ai fait les frais de cette incompatibilité avec Arc. Arc étant mon navigateur principal (également basé sur Chromium), j'ai supposé à tort qu'il me suffirait d'y installer l'extension. Résultat : la commande /chrome refusait de se connecter, malgré une version d'extension et de CLI correctes. Après vingt minutes de tâtonnements, je suis tombé sur la ligne de documentation indiquant que « Brave, Arc et les autres navigateurs basés sur Chromium ne sont pas encore supportés ». Du temps perdu. J'ai finalement dû installer une instance standard de Chrome dédiée à cet usage pour que la connexion s'établisse instantanément.
Installation de l'extension et démarrage
Une fois les prérequis validés, passez à la configuration :
Étape 1 : Installer l'extension « Claude in Chrome ». Recherchez « Claude » sur le Chrome Web Store et installez l'extension (la procédure est identique sous Edge via le Chrome Web Store).
装扩展、访问 Chrome 应用商店在国内一般需要「魔法上网」;扩展本身要连 Anthropic,网络不通时也连不上。
Étape 2 : Démarrer Claude Code avec l'option --chrome. Dans votre terminal :
claude --chromeSi vous êtes déjà dans une session active, saisissez simplement /chrome pour l'activer sans relancer le processus.
Ces deux étapes suffisent. Une fois configuré, la saisie de /chrome à tout moment vous permet de : vérifier l'état de connexion, gérer les permissions, reconnecter l'extension ou choisir le navigateur cible actif. Si plusieurs navigateurs sont connectés en même temps, Claude vous demandera lequel utiliser au début de l'action.
Éviter de saisir l'option --chrome à chaque démarrage
Pour éviter de devoir spécifier --chrome à chaque session, vous pouvez configurer ce comportement par défaut : exécutez /chrome et choisissez l'option « Activer par défaut ».
Notez cependant le coût en ressources souligné par la documentation officielle :
在 CLI 中默认启用 Chrome 会增加上下文使用,因为浏览器工具始终被加载。如果您注意到上下文消耗增加,请禁用此设置,仅在需要时使用
--chrome。
En clair : l'activer par défaut charge en permanence la suite d'outils du navigateur, ce qui ampute une portion de votre fenêtre de contexte (le chapitre 19 rappelait qu'encombrer l'espace de travail nuit à la pertinence). Il est généralement plus sage de ne pas définir ce comportement par défaut et de spécifier --chrome ponctuellement — la majorité des tâches d'édition de code n'exigeant pas d'accès au navigateur, il est inutile d'encombrer le contexte de manière systématique.
顺带一提起:如果你主力在 VS Code 扩展(第 08 篇)里干活,只要装了 Chrome 扩展,浏览器自动化就直接可用,不用加任何标志——这点比 CLI 省心。
Gestion des permissions d'accès aux sites
Un autre détail : les sites sur lesquels Claude peut naviguer, cliquer et saisir des informations sont hérités des permissions de l'extension Chrome. La documentation indique :
网站级权限从 Chrome 扩展程序继承。在 Chrome 扩展程序设置中管理权限,以控制 Claude 可以浏览、点击和输入的网站。
En d'autres termes, la restriction des sites autorisés s'effectue dans les options de l'extension Chrome, et non depuis Claude Code. C'est la première barrière de protection, que nous aborderons plus en détail dans la section sécurité.
💡 Résumé en une phrase : La configuration de Chrome s'effectue en deux étapes — installer l'extension « Claude in Chrome » + démarrer avec l'option
--chrome(ou saisir/chromeen cours de session) ; validez au préalable les quatre prérequis (navigateur officiel, versions d'extension et de CLI, abonnement payant) et gardez à l'esprit que Brave, Arc, les variantes basées sur Chromium et WSL ne sont pas compatibles.
04 Exemples concrets : six cas d'usage à reproduire
Une fois connecté, il faut savoir en tirer parti. La documentation propose différents flux de travail. Voici les six scénarios les plus courants, chacun accompagné d'un exemple d'instruction type à adapter. Ces commandes s'expriment en langage naturel : il vous suffit de remplacer les valeurs par celles de votre projet.
Cas 1 : Tester une application web locale
Après avoir apporté des modifications à un composant en cours de développement, demandez-lui de tester le rendu directement dans le navigateur :
我刚改了登录表单的校验逻辑。打开 localhost:3000,
用一组无效数据提交表单,看看错误提示有没有正确出现。Il se connectera sur votre serveur de développement local, interagira avec le formulaire et vous décrira ses observations. C'est probablement l'usage le plus courant — vous évitez ainsi d'avoir à basculer manuellement sur le navigateur pour tester chaque modification de l'interface.
Cas 2 : Déboguer en analysant la console
Laissez-le analyser les logs de la console pour cibler un problème. La documentation officielle donne une astuce ici : ne lui demandez pas d'extraire l'intégralité des logs (ce qui saturerait la console), mais spécifiez le motif de recherche cible :
打开 dashboard 页面,检查页面加载时控制台里有没有报错。Il parcourra les messages de la console et filtrera les résultats selon le type d'erreur spécifié, évitant ainsi d'encombrer la session avec des journaux d'activité inutiles.
Cas 3 : Saisir des formulaires en masse
C'est la solution idéale pour automatiser des tâches de saisie répétitives :
我有一个客户联系人表格在 contacts.csv 里。对每一行,
打开 crm.example.com 的 CRM,点「添加联系人」,
把姓名、邮箱、电话填进去。Il lira votre fichier local, interagira avec l'interface web et saisira les informations ligne par ligne. Soyons clairs, ce genre de tâche répétitive et sans valeur ajoutée est le domaine où l'outil brille le plus — il vous suffit de lui fournir le fichier de données propre pour qu'il s'occupe de la saisie.
Cas 4 : Rédiger du contenu dans vos applications connectées
C'est ici que le partage des sessions actives se montre le plus appréciable :
根据最近的几个 commit 起草一份项目进展更新,
加到我那份 Google Doc(docs.google.com/document/d/abc123)里。Il ouvrira le document, activera l'éditeur et rédigera le texte. Gmail, Notion, Sheets — toutes les applications web sur lesquelles vous êtes identifié sont accessibles directement, sans nécessiter de jeton d'API ou de connecteur externe.
Cas 5 : Extraire des données structurées depuis une page web
Extraire des informations éparses pour les organiser proprement :
打开商品列表页,把每件商品的名称、价格、库存状态抽出来,
存成一个 CSV 文件。Il chargera la page cible, lira les données et les enregistrera localement sous un format structuré.
Cas 6 : Enregistrer une démonstration au format GIF
Pour illustrer le fonctionnement d'une fonctionnalité auprès de vos collaborateurs :
录一个 GIF,展示怎么走完整个结账流程,
从把商品加进购物车一直到确认页。Il enregistrera la séquence d'actions et l'exportera en fichier GIF. Intégrer une animation dans une documentation ou un ticket de bug est bien plus efficace qu'une longue explication textuelle.
Voici un comparatif rapide pour illustrer le gain de temps par rapport aux méthodes manuelles :
| Scénario | ❌ Sans l'intégration Chrome | ✅ Avec l'intégration Chrome |
|---|---|---|
| Vérifier des modifications front-end | Basculer sur le navigateur, exécuter les clics manuellement, observer et décrire le résultat | Une simple consigne pour lui faire ouvrir la page et remonter le résultat du test |
| Analyser des erreurs en console | Ouvrir la console de dev (F12), copier l'erreur, la coller dans le terminal | L'outil analyse directement les messages de la console en appliquant un filtre |
| Saisir des données en masse | Copier-coller manuellement chaque ligne de données dans l'interface web | Fournir le fichier CSV pour qu'il procède à la saisie séquentielle |
| Rédiger sous Notion / Docs | Rédiger le texte localement puis aller le coller dans l'application web | L'outil accède directement au document et y écrit (via les sessions actives) |
Note : Le menu /mcp sous l'entrée claude-in-chrome liste l'ensemble des actions disponibles pour le navigateur. C'est l'endroit idéal pour découvrir toute la variété de ses manipulations physiques. La documentation mentionne également des scénarios de « flux de travail multisites » ; nous ne les aborderons pas ici, mais vous êtes libre de les étudier sous /mcp → claude-in-chrome.
💡 Résumé en une phrase : Six applications concrètes — tester des projets locaux, lire les erreurs en console, saisir des données, rédiger dans des applications web connectées, extraire des données web et exporter des GIF de démonstration — s'activent par de simples consignes en langage naturel, avec pour objectif principal de vous éviter les allers-retours manuels vers le navigateur.
05 Sécurité : les risques inhérents à la manipulation d'un navigateur réel
Cette section est d'une importance capitale — l'outil manipulant votre navigateur de travail avec ses connexions actives, et non un environnement isolé temporaire. La frontière de confiance est ici très différente de l'exécution de commandes dans un bac à sable (abordée au chapitre 21).
Nature des risques
Reprenons l'analogie du chauffeur : celui-ci conduit votre véhicule équipé de votre badge de télépéage et de vos abonnements. C'est extrêmement pratique, mais cela comporte un risque réel — l'intervenant se trouve à bord de votre espace et dispose de vos accès. Il en va de même pour l'intégration Chrome : le partage de session active signifie que l'outil peut interagir avec tous les sites sur lesquels vous êtes connecté — messageries professionnelles, consoles d'administration ou comptes bancaires.
Vous devez être conscient de deux risques majeurs :
- La session active comme trousseau de clés : L'accès aux sites s'effectue sans étape d'authentification supplémentaire, l'outil dispose des mêmes accès que vous. Avant de le diriger sur une page, gardez à l'esprit la liste des comptes sensibles connectés sur cette instance de navigateur.
- Les injections de prompts (prompt injections) : Ce mécanisme (détaillé au chapitre 21) repose sur des instructions malveillantes dissimulées dans les pages web à l'attention des IA. Lorsqu'il charge une page, des portions de texte invisibles ou ambiguës peuvent tenter de détourner ses actions. Ce risque est très concret lors des interactions sur le navigateur, l'outil analysant des contenus web externes sur lesquels vous n'avez aucun contrôle.
Barrières de protection intégrées
Heureusement, l'intégration n'accorde pas les pleins pouvoirs par défaut. Des verrous de sécurité sont en place :
- Interruption face aux connexions et CAPTCHA : Devant une page d'identification ou un CAPTCHA, l'outil s'interrompt et requiert une intervention manuelle ; il ne tentera pas de contourner ces protections par lui-même.
- Rendu visible des manipulations : L'exécution s'opère dans une fenêtre Chrome visible sous vos yeux ; vous contrôlez chaque clic et pouvez stopper le processus instantanément en cas de dérive.
- Gestion des permissions de sites : Comme abordé précédemment, les options de l'extension Chrome vous permettent de restreindre son périmètre d'action aux seuls sites de votre choix — c'est le levier de protection le plus efficace pour encadrer ses activités.
Règles de sécurité recommandée
Au-delà des verrous par défaut, appliquez ces principes simples de précaution :
| Situation | Règle de conduite |
|---|---|
| Avant d'autoriser l'accès au navigateur | Identifier la liste des comptes et sessions sensibles actifs sur ce navigateur |
| Opérations financières ou irréversibles (paiements, virements, suppressions massives) | ⚠️ Effectuez-les vous-même sans les déléguer, ou supervisez chaque étape sans relâche |
| Restriction du domaine d'action | ✅ Utilisez les réglages de l'extension pour limiter son accès aux seules plateformes requises |
| Consultation de sites inconnus ou suspects | ⚠️ Restez vigilant face aux injections de prompts ; ne le laissez pas appliquer aveuglément les consignes trouvées sur ces pages |
Le principe fondamental est simple : each clic effectué par l'outil dans le navigateur a une portée réelle — à la différence d'un bac à sable où une erreur s'efface en réinitialisant un conteneur, cliquer sur « Confirmer le paiement » dans le navigateur valide réellement la transaction. Gardez donc fermement le contrôle des actions financières ou irréversibles ; déléguez-lui de préférence les tâches dont les erreurs restent faciles à corriger.
Cela s'inscrit dans la même logique de sécurité abordée tout au long de ce guide : le niveau de commodité est proportionnel au niveau de risque. L'intégration Chrome offrant un confort d'usage maximal (utilisation directe des sessions actives), il vous appartient de veiller avec rigueur à la définition de ses accès.
💡 Résumé en une phrase : L'intégration Chrome interagit avec votre navigateur réel actif, pas avec un bac à sable — le risque réside dans l'utilisation de vos sessions d'identification et les injections de prompts sur les pages web ; les protections incluent l'arrêt devant les CAPTCHA, la visibilité des clics et les restrictions de l'extension ; à vous de limiter son périmètre de navigation et de conserver l'exclusivité des opérations sensibles ou financières.
06 Prique : connecter Chrome et analyser une page
Rien ne remplace la pratique. Voici un exercice minimal : connecter Chrome, ouvrir un site web et en extraire des informations. Cette manipulation s'effectue sans accès à vos sessions personnelles, dans l'unique but de valider le bon fonctionnement de la liaison.
Prérequis : Vous devez posséder un abonnement payant direct (Pro / Max / Team / Enterprise, hors Bedrock / Vertex ou clés API simples) et disposer d'une installation de Chrome ou Edge. L'accès au Web Store et la navigation peuvent requérir une liaison réseau configurée.
Étape 1 : Installer l'extension « Claude in Chrome »
Recherchez l'extension officielle « Claude » sur le Chrome Web Store et installez-la. Ouvrez ensuite chrome://extensions pour valider qu'elle est active et présente une version supérieure ou égale à v1.0.36.
✅ Autotest : L'extension « Claude » est visible et active dans la liste de vos extensions.
Étape 2 : Vérifier la version de Claude Code
claude --versionAttendu : La version affichée doit être supérieure ou égale à v2.0.73. Si ce n'est pas le cas, procédez à sa mise à jour (npm update -g @anthropic-ai/claude-code ou via la procédure décrite au chapitre 02), sous peine de ne pas pouvoir initier la connexion.
Étape 3 : Démarrer avec l'option --chrome
claude --chromeUne fois la session ouverte, saisissez /chrome pour interroger l'état :
/chromeAttendu : L'état indique que Chrome est connecté et que l'extension est opérationnelle. Si le système signale que l'extension est introuvable, appliquez la routine de dépannage officielle : vérifier l'activation de l'extension → valider la mise à jour de Claude Code → s'assurer que Chrome est en cours d'exécution → sélectionner « Reconnect extension » sous /chrome. Lors du premier lancement, un utilitaire de messagerie native est configuré sur votre système, nécessitant le redémarrage de Chrome pour être détecté — en cas d'échec initial, relancez simplement Chrome.
Étape 4 : Lui faire charger une page et lire des informations
La connexion établie, transmettez-lui une consigne de consultation neut (le site de documentation officiel sert ici de support) :
打开 code.claude.com/docs,点一下搜索框,
输入「hooks」,把出现的结果告诉我。Attendu : Vous observerez l'ouverture d'un nouvel onglet dans votre navigateur Chrome, la navigation vers l'URL spécifiée, le clic dans la zone de recherche et la saisie de texte — les actions s'affichant sous vos yeux (le principe de visibilité des actions abordé à la section 05). Les résultats de la recherche sont ensuite affichés dans le terminal. Ce comportement physique du navigateur et le retour d'information confirment le succès de la configuration.
如果操作到一半浏览器没反应了,官方提示先查有没有弹出的对话框(alert / confirm)挡着页面——JavaScript 对话框会卡住浏览器事件;手动关掉再让它继续。长时间不动后断连,就
/chrome选「重新连接扩展程序」(扩展的后台 service worker 会进空闲状态)。
La validation de ces quatre étapes confirme que vous maîtrisez le cycle « installation → démarrage → vérification → interaction web ». Toutes ses futures interventions sur le navigateur suivront ce même schéma, il vous suffira d'adapter la consigne de l'étape 4 à vos besoins réels.
💡 Résumé en une phrase : La mise en pratique se résume en quatre étapes — installer l'extension, démarrer avec
claude --chrome, vérifier la connexion avec/chrome, et lui confier une tâche de lecture pour observer l'action ; les difficultés initiales proviennent généralement de l'extension ou d'une absence de redémarrage de Chrome, suivez les étapes de dépannage recommandées.
07 Conclusion
Cet article a connecté Claude Code au navigateur que vous utilisez quotidiennement. Dépassant le simple cadre des fichiers et des commandes locales, il est désormais capable de charger des pages, d'analyser la console, de remplir des formulaires et d'extraire des données. Les étapes de modification du code et de test dans le navigateur sont désormais intégrées au sein d'un flux de travail unique.
Récapitulons les points clés à retenir :
| Objectif | Point clé |
|---|---|
| Comprendre son principe | Il s'appuie sur votre navigateur Chrome actif et connecté ; les actions s'exécutent dans de nouveaux onglets visibles en direct. |
| Distinguer ses usages | Trois options selon le besoin : MCP (services avec API) → Chrome (pages web) → computer use (bureau système), de la plus précise à la plus lourde. |
| L'activer | Installer l'extension « Claude in Chrome » + démarrer avec --chrome ; valider les versions requises et disposer d'un abonnement direct auprès d'Anthropic. |
| Identifier les limites | Brave, Arc, les autres navigateurs basés sur Chromium et WSL ne sont pas compatibles. Seuls Chrome et Edge sont supportés. |
| Exploiter ses fonctions | Tester des projets locaux, analyser les erreurs de la console, saisir des données, rédiger dans des applications web connectées, extraire des données, exporter des GIF. |
| Garantir la sécurité | L'outil manipule un navigateur de travail réel (non isolé) : restreindre les sites accessibles, superviser les opérations critiques ou financières et se méfier des injections de prompts. |
Vous êtes désormais en mesure de : définir précisément ce qu'est l'intégration Chrome, la situer par rapport aux serveurs MCP et au computer use, l'activer de manière autonome (installation de l'extension et démarrage avec --chrome), lui confier par de simples instructions les six catégories de tâches sur le navigateur et appliquer les règles de sécurité indispensables face à un navigateur réel. Avec cette configuration, Claude Code franchit une nouvelle étape : il n'est plus un simple assistant de code local, il interagit directement avec l'application sur laquelle vous passez le plus de temps.