Chrome MCP — Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Utilise votre Chrome connecté — pas de danse OAuth, pas de détection bot
Recherche sémantique sur tous les onglets ouverts
Extraction DOM complète + outils de capture d'écran
Fonctionne sur les sites bloquant Playwright/Puppeteer
Local — aucun intermédiaire cloud

Démo en direct

Aperçu en pratique

mcp-chrome.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "mcp-chrome",
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

{
  "context_servers": {
    "mcp-chrome": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-chrome-bridge"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add mcp-chrome -- npx -y mcp-chrome-bridge

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Chrome MCP

Faire de la recherche sur des sites requérant une connexion sans donner son mot de passe à Claude

👤 Chercheurs, analystes utilisant du contenu sur abonnement ⏱ ~20 min beginner

Quand l'utiliser : Vous êtes connecté à un site payant ou un tableau de bord sécurisé et voulez que Claude le lise.

Prérequis

Extension Chrome installée — Installez depuis le Chrome Web Store ; le MCP bridge se connecte automatiquement
Site cible déjà ouvert et authentifié dans Chrome — Connectez-vous manuellement dans un onglet normal d'abord

Déroulement

Vérifier les onglets

Liste mes onglets Chrome ouverts.✓ Copié

→ Titres et URLs de chaque onglet actif
Extraire

Depuis l'onglet Bloomberg, extrais le corps de l'article et le tableau de données latéral.✓ Copié

→ Contenu structuré récupéré ; aucune erreur « accès impossible »
Synthèse inter-onglets

Sur les 3 onglets de fournisseurs de recherche que j'ai ouverts, quelle est la vision consensuelle sur X ?✓ Copié

→ Synthèse avec citations par onglet

Résultat : Des réponses étayées par du contenu authentifié réel, sans scraping de pages de connexion.

Pièges

La session expire en cours de tâche — L'extension affiche une invite de rafraîchissement ; re-authentifiez-vous dans cet onglet et réessayez

Combiner avec : memory

Détecter les régressions UI en capturant des flux dans votre build de dev

👤 Ingénieurs frontend ⏱ ~30 min intermediate

Quand l'utiliser : Vous venez de livrer un refactor CSS et voulez un diff visuel sur 10 pages principales.

Déroulement

Ouvrir la référence

Ouvre les pages de mon site de dev listées dans /qa/flows.json et capture chacune dans /screenshots/before/.✓ Copié

→ Captures d'écran avec noms de fichiers correspondant aux URLs
Comparer

Après mon déploiement, prends de nouvelles captures et compare avec /screenshots/before/. Résume les changements visuels par page.✓ Copié

→ Rapport de diff par page avec observations concrètes

Résultat : Un rapport de régression visuelle en 5 minutes, avec votre vrai environnement navigateur.

Pièges

Les captures diffèrent à cause du chargement des polices — Ajoutez une pause ou un wait_for_selector avant la capture

Combiner avec : filesystem

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

mcp-chrome + filesystem

Sauvegarder les pages extraites sur disque pour indexation ultérieure

Extrais cet onglet et écris dans /research/ai-paper-notes.md.✓ Copié

mcp-chrome + memory

Retenir les découvertes clés entre les sessions de navigation

Résume ce que j'ai lu aujourd'hui et stocke-le en mémoire.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
list_tabs	none	Début de toute session pour voir ce qui est disponible	free
read_tab	tab_id: int	Récupérer le contenu d'un onglet spécifique	free
click	tab_id, selector: str	Interagir avec des éléments de la page	free
screenshot	tab_id, full_page?: bool	Capture visuelle pour diff ou revue	free
search_tabs	query: str	Trouver quel onglet traite de X	free

Coût et limites

Coût d'exécution

Quota d'API: Local — illimité
Tokens par appel: Les extractions DOM peuvent être volumineuses ; 5k–50k tokens
Monétaire: Gratuit
Astuce: Utilisez read_tab avec un sélecteur pour limiter l'extraction plutôt que de récupérer le DOM complet

Sécurité

Permissions, secrets, portée

Portées minimales : chrome.tabs chrome.scripting

Stockage des identifiants : Aucun — Chrome détient les sessions

Sortie de données : Le contenu des onglets transite par le client MCP vers votre fournisseur LLM

Ne jamais accorder : access to incognito without reason

L'extension a un accès étendu par conception — installez uniquement depuis la liste officielle du Chrome Web Store

Dépannage

Erreurs courantes et correctifs

Extension non détectée

Épinglez l'extension ; le binaire bridge a besoin que l'extension l'interroge

Vérifier : chrome://extensions shows it enabled

Contenu de l'onglet vide

La page utilise peut-être le shadow DOM — essayez read_tab avec include_shadow=true

Les clics ne s'enregistrent pas

Le site utilise une protection anti-automatisation (Cloudflare, etc). Essayez de faire défiler pour déclencher le chargement paresseux d'abord.

Alternatives

Chrome MCP vs autres

Alternative	Quand l'utiliser	Compromis
chrome-devtools MCP	Vous voulez le protocole devtools (console, réseau, perf) et non l'automatisation utilisateur	Le MCP DevTools n'actionne pas l'UI — il l'inspecte
playwright MCP	Vous voulez une automatisation headless en CI	Pas d'état d'auth ; sujet à la détection bot

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills