Présentation détaillée du projet Chrome MCP Server

Aperçu du projet

Chrome MCP Server est un serveur de protocole de contexte de modèle (MCP) basé sur une extension Chrome, qui expose les fonctionnalités de votre navigateur Chrome à des assistants IA (tels que Claude), permettant une automatisation complexe du navigateur, une analyse de contenu et des fonctions de recherche sémantique.

Adresse du projet: https://github.com/hangwin/mcp-chrome

Caractéristiques principales

🌟 Points forts

• Transformez votre navigateur Chrome en un assistant intelligent - Permettez à l'IA de contrôler votre navigateur, le transformant en un puissant outil d'automatisation contrôlé par l'IA.
• Utilisez directement votre navigateur quotidien - Contrairement aux outils d'automatisation de navigateur traditionnels (tels que Playwright), Chrome MCP Server utilise directement votre navigateur Chrome quotidien.
• Conservez les habitudes et configurations utilisateur existantes - Tirez parti des configurations utilisateur existantes, des états de connexion, etc., pour faire de divers grands modèles ou chatbots de véritables assistants quotidiens.

🚀 Principales caractéristiques fonctionnelles

• 😁 Indépendance du chatbot/modèle: Automatisez votre navigateur avec n'importe quel LLM, client de chatbot ou agent que vous préférez.
• ⭐️ Utilisez votre navigateur d'origine: Intégration transparente avec votre environnement de navigateur existant (vos configurations, états de connexion, etc.).
• 💻 Entièrement localisé: Serveur MCP purement local, garantissant la confidentialité des utilisateurs.
• 🚄 HTTP transmissible en flux: Méthode de connexion HTTP transmissible en flux.
• 🏎 Inter-onglets: Prise en charge du contexte inter-onglets.
• 🧠 Recherche sémantique: Base de données vectorielle intégrée pour la découverte intelligente du contenu des onglets du navigateur.
• 🔍 Analyse de contenu intelligente: Extraction de texte et correspondance de similarité basées sur l'IA.
• 🌐 Plus de 20 outils: Prise en charge de plus de 20 outils tels que la capture d'écran, la surveillance du réseau, les opérations interactives, la gestion des signets, l'historique de navigation, etc.
• 🚀 IA accélérée par SIMD: Optimisation WebAssembly SIMD personnalisée, vitesse des opérations vectorielles multipliée par 4 à 8.

Comparaison technique

Dimension de comparaison	Serveur MCP basé sur Playwright	Serveur MCP basé sur l'extension Chrome
Utilisation des ressources	❌ Nécessite le lancement d'un processus de navigateur indépendant, l'installation des dépendances Playwright, le téléchargement des fichiers binaires du navigateur, etc.	✅ Pas besoin de lancer un processus de navigateur indépendant, utilise directement le navigateur Chrome déjà ouvert par l'utilisateur.
Réutilisation de la session utilisateur	❌ Nécessite une nouvelle connexion	✅ Utilise automatiquement l'état de connexion existant
Environnement du navigateur	❌ Environnement propre sans paramètres utilisateur	✅ Conserve entièrement l'environnement utilisateur
Accès à l'API	✅ Accès complet à l'API native de Chrome	✅ Accès complet à l'API native de Chrome
Vitesse de démarrage	❌ Nécessite le lancement d'un processus de navigateur	✅ Nécessite uniquement l'activation de l'extension
Vitesse de réponse	50-200ms communication inter-processus	✅ Plus rapide

Configuration requise

• Node.js 18+ et pnpm
• Navigateur Chrome/Chromium

Installation et configuration

1. Télécharger l'extension Chrome

Téléchargez la dernière extension Chrome depuis GitHub :

Lien de téléchargement: https://github.com/hangwin/mcp-chrome/releases

2. Installer globalement mcp-chrome-bridge

Utiliser npm:

npm install -g mcp-chrome-bridge

Utiliser pnpm:

pnpm install -g mcp-chrome-bridge

3. Charger l'extension Chrome

Chargez le fichier d'extension téléchargé dans le navigateur Chrome.

4. Configurer Claude Desktop

Ajoutez la configuration suivante à la configuration MCP de Claude Desktop :

{
  "mcpServers": {
    "streamable-mcp-server": {
      "type": "streamable-http",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

Explication détaillée de la classification des outils

📊 Gestion du navigateur (4 outils)

• get_windows_and_tabs: Liste toutes les fenêtres et onglets du navigateur.
• chrome_navigate: Navigue vers une URL et contrôle la fenêtre d'affichage.
• chrome_close_tabs: Ferme des onglets ou des fenêtres spécifiques.
• chrome_go_back_or_forward: Contrôle de la navigation du navigateur.

📸 Capture d'écran et visuel (1 outil)

• chrome_screenshot: Capture d'écran avancée, prend en charge la localisation des éléments, la prise en charge de la page entière et les dimensions personnalisées.

🌐 Surveillance du réseau (4 outils)

• chrome_network_capture_start/stop: Capture réseau de l'API webRequest.
• chrome_network_debugger_start/stop: API de débogueur avec corps de réponse.
• chrome_network_request: Envoie des requêtes HTTP personnalisées.

🔍 Analyse de contenu (3 outils)

• search_tabs_content: Recherche sémantique basée sur l'IA dans les onglets du navigateur.
• chrome_get_web_content: Extrait le contenu HTML/texte d'une page.
• chrome_get_interactive_elements: Recherche les éléments cliquables.

🎯 Interaction (3 outils)

• chrome_click_element: Clique sur un élément à l'aide d'un sélecteur CSS.
• chrome_fill_or_select: Remplit les formulaires et sélectionne les options.
• chrome_keyboard: Simule la saisie au clavier et les raccourcis clavier.

📚 Gestion des données (5 outils)

• chrome_history: Recherche dans l'historique du navigateur à l'aide de filtres temporels.
• chrome_bookmark_search: Recherche des signets par mots-clés.
• chrome_bookmark_add: Ajoute de nouveaux signets avec prise en charge des dossiers.
• chrome_bookmark_delete: Supprime les signets.

Exemples d'utilisation

Exemples de requêtes

Voici quelques démonstrations de scénarios d'utilisation réels :

1. Requête d'analyse d'API: "Je veux savoir quelle est l'API de recherche de Xiaohongshu et quelle est la structure de la réponse".
2. Analyse de l'historique: "Analyse mon historique de navigation du mois dernier".
3. Traitement du contenu: "Traduire et résumer la page web actuelle".
4. Fonction de capture d'écran: "Prendre une capture d'écran de la page d'accueil de Hugging Face".
5. Capture d'éléments: "Capturer l'icône de la page d'accueil de Hugging Face".
6. Gestion des signets: "Ajouter la page actuelle aux signets et la placer dans le dossier approprié".
7. Gestion des onglets: "Fermer toutes les pages web liées à shadcn".

Documentation connexe

• Document de conception de l'architecture: Documentation technique détaillée de l'architecture.
• Documentation de l'API des outils: Documentation complète de l'API des outils.
• Guide de dépannage: Solutions aux problèmes courants.

Résumé

Chrome MCP Server est un projet innovant qui brise les limites des outils d'automatisation de navigateur traditionnels, en utilisant directement l'environnement de navigateur quotidien de l'utilisateur, offrant ainsi aux assistants IA de puissantes capacités de contrôle du navigateur. Grâce à son riche ensemble d'outils et à sa conception de sécurité localisée, les utilisateurs peuvent faire de l'IA un véritable assistant de navigation quotidien, améliorant considérablement l'efficacité du travail et l'expérience utilisateur.