Chrome MCP Server

Expone la funcionalidad del navegador Chrome a asistentes de IA para automatización, análisis de contenido y búsqueda semántica a través de una extensión de Chrome.

GitHub
12.3k
Prueba este MCPPatrocinado

Documentación

Chrome MCP Server 🚀

Stars License: MIT TypeScript Chrome Extension Release

🌟 Convierte tu navegador Chrome en tu asistente inteligente - Deja que la IA tome el control de tu navegador, transformándolo en una poderosa herramienta de automatización controlada por IA.

📖 Documentación: English | 中文

El proyecto aún se encuentra en sus primeras etapas y está en desarrollo intensivo. Se agregarán más funciones, mejoras de estabilidad y otras mejoras.

🎯 ¿Qué es Chrome MCP Server?

Chrome MCP Server es un servidor de Protocolo de Contexto de Modelo (MCP) basado en una extensión de Chrome que expone las funcionalidades de tu navegador Chrome a asistentes de IA como Claude, permitiendo automatización compleja del navegador, análisis de contenido y búsqueda semántica. A diferencia de las herramientas tradicionales de automatización de navegador (como Playwright), Chrome MCP Server utiliza directamente tu navegador Chrome diario, aprovechando los hábitos, configuraciones y estados de inicio de sesión existentes del usuario, permitiendo que varios modelos grandes o chatbots tomen el control de tu navegador y se conviertan verdaderamente en tu asistente diario.

✨ Nuevas Funciones (2025/12/30)

  • Un nuevo editor visual para Claude Code y Codex, para más detalles aquí: VisualEditor

✨ Funciones Principales

  • 😁 Independiente del Chatbot/Modelo: Deja que cualquier LLM, cliente de chatbot o agente que prefieras automatice tu navegador
  • ⭐️ Usa tu Navegador Original: Integración perfecta con tu entorno de navegador existente (tus configuraciones, estados de inicio de sesión, etc.)
  • 💻 Totalmente Local: Servidor MCP puramente local que garantiza la privacidad del usuario
  • 🚄 HTTP Transmisible: Método de conexión HTTP transmisible
  • 🏎 Entre Pestañas: Contexto entre pestañas
  • 🧠 Búsqueda Semántica: Base de datos vectorial integrada para el descubrimiento inteligente de contenido en pestañas del navegador
  • 🔍 Análisis Inteligente de Contenido: Extracción de texto y coincidencia de similitud impulsadas por IA
  • 🌐 Más de 20 Herramientas: Soporte para capturas de pantalla, monitoreo de red, operaciones interactivas, gestión de marcadores, historial de navegación y más de 20 otras herramientas
  • 🚀 IA Acelerada por SIMD: Optimización SIMD personalizada de WebAssembly para operaciones vectoriales 4-8 veces más rápidas

🆚 Comparación con Proyectos Similares

Dimensión de ComparaciónServidor MCP basado en PlaywrightServidor MCP basado en Extensión de Chrome
Uso de Recursos❌ Requiere lanzar un proceso de navegador independiente, instalar dependencias de Playwright, descargar binarios del navegador, etc.✅ No es necesario lanzar un proceso de navegador independiente, utiliza directamente el navegador Chrome ya abierto del usuario
Reutilización de Sesión de Usuario❌ Requiere volver a iniciar sesión✅ Utiliza automáticamente el estado de inicio de sesión existente
Entorno del Navegador❌ El entorno limpio carece de configuraciones de usuario✅ Preserva completamente el entorno del usuario
Acceso a la API⚠️ Limitado a la API de Playwright✅ Acceso completo a las APIs nativas de Chrome
Velocidad de Inicio❌ Requiere lanzar el proceso del navegador✅ Solo necesita activar la extensión
Velocidad de Respuesta50-200ms de comunicación entre procesos✅ Más rápida

🚀 Inicio Rápido

Requisitos Previos

  • Node.js >= 20.0.0 y pnpm/npm
  • Navegador Chrome/Chromium

Pasos de Instalación

  1. Descarga la última extensión de Chrome desde GitHub

Enlace de descarga: https://github.com/hangwin/mcp-chrome/releases

  1. Instala mcp-chrome-bridge globalmente

npm

npm install -g mcp-chrome-bridge

pnpm

# Method 1: Enable scripts globally (recommended)
pnpm config set enable-pre-post-scripts true
pnpm install -g mcp-chrome-bridge

# Method 2: Manual registration (if postinstall doesn't run)
pnpm install -g mcp-chrome-bridge
mcp-chrome-bridge register

Nota: pnpm v7+ deshabilita los scripts postinstall por defecto por seguridad. El ajuste enable-pre-post-scripts controla si los scripts pre/post de instalación se ejecutan. Si el registro automático falla, usa el comando de registro manual anterior.

  1. Cargar la Extensión de Chrome
    • Abre Chrome y ve a chrome://extensions/
    • Habilita el "Modo de desarrollador"
    • Haz clic en "Cargar descomprimida" y selecciona your/dowloaded/extension/folder
    • Haz clic en el ícono de la extensión para abrir el complemento, luego haz clic en conectar para ver la configuración de MCP Screenshot 2025-06-09 15 52 06

Uso con Clientes de Protocolo MCP

Usando Conexión HTTP Transmisible (👍🏻 Recomendado)

Agrega la siguiente configuración a la configuración de tu cliente MCP (usando CherryStudio como ejemplo):

Se recomienda el método de conexión HTTP transmisible

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

Usando Conexión STDIO (Alternativa)

Si tu cliente solo admite el método de conexión stdio, usa el siguiente enfoque:

  1. Primero, verifica la ubicación de instalación del paquete npm que acabas de instalar
# npm check method
npm list -g mcp-chrome-bridge
# pnpm check method
pnpm list -g mcp-chrome-bridge

Suponiendo que el comando anterior genera la ruta: /Users/xxx/Library/pnpm/global/5 Entonces tu ruta final sería: /Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js

  1. Reemplaza la configuración a continuación con la ruta final que acabas de obtener
{
  "mcpServers": {
    "chrome-mcp-stdio": {
      "command": "npx",
      "args": [
        "node",
        "/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
      ]
    }
  }
}

ej: configuración en augment:

截屏2025-06-22 22 11 25

🛠️ Herramientas Disponibles

Lista completa de herramientas: Lista Completa de Herramientas

📊 Gestión del Navegador (6 herramientas)
  • get_windows_and_tabs - Lista todas las ventanas y pestañas del navegador
  • chrome_navigate - Navega a URLs y controla la ventana gráfica
  • chrome_switch_tab - Cambia la pestaña activa actual
  • chrome_close_tabs - Cierra pestañas o ventanas específicas
  • chrome_go_back_or_forward - Control de navegación del navegador
  • chrome_inject_script - Inyecta scripts de contenido en páginas web
  • chrome_send_command_to_inject_script - Envía comandos a scripts de contenido inyectados
📸 Capturas de Pantalla y Visual (1 herramienta)
  • chrome_screenshot - Captura de pantalla avanzada con selección de elementos, soporte de página completa y dimensiones personalizadas
🌐 Monitoreo de Red (4 herramientas)
  • chrome_network_capture_start/stop - Captura de red mediante la API webRequest
  • chrome_network_debugger_start/stop - API de depuración con cuerpos de respuesta
  • chrome_network_request - Envía solicitudes HTTP personalizadas
🔍 Análisis de Contenido (4 herramientas)
  • search_tabs_content - Búsqueda semántica impulsada por IA en pestañas del navegador
  • chrome_get_web_content - Extrae contenido HTML/texto de páginas
  • chrome_get_interactive_elements - Encuentra elementos clicables
  • chrome_console - Captura y recupera la salida de la consola de las pestañas del navegador
🎯 Interacción (3 herramientas)
  • chrome_click_element - Haz clic en elementos usando selectores CSS
  • chrome_fill_or_select - Rellena formularios y selecciona opciones
  • chrome_keyboard - Simula entrada de teclado y atajos
📚 Gestión de Datos (5 herramientas)
  • chrome_history - Busca el historial del navegador con filtros de tiempo
  • chrome_bookmark_search - Encuentra marcadores por palabras clave
  • chrome_bookmark_add - Agrega nuevos marcadores con soporte de carpetas
  • chrome_bookmark_delete - Elimina marcadores

🧪 Ejemplos de Uso

La IA te ayuda a resumir el contenido de la página web y controla automáticamente Excalidraw para dibujar

prompt: excalidraw-prompt Instrucción: Ayúdame a resumir el contenido de la página actual, luego dibuja un diagrama para ayudar a mi comprensión. https://www.youtube.com/watch?v=3fBPdUBWVz0

https://github.com/user-attachments/assets/fd17209b-303d-48db-9e5e-3717141df183

Después de analizar el contenido de la imagen, el LLM controla automáticamente Excalidraw para replicar la imagen

prompt: excalidraw-prompt|content-analize Instrucción: Primero, analiza el contenido de la imagen, y luego replica la imagen combinando el análisis con el contenido de la imagen. https://www.youtube.com/watch?v=tEPdHZBzbZk

https://github.com/user-attachments/assets/60d12b1a-9b74-40f4-994c-95e8fa1fc8d3

La IA inyecta automáticamente scripts y modifica los estilos de la página web

prompt: modify-web-prompt Instrucción: Ayúdame a modificar el estilo de la página actual y eliminar los anuncios. https://youtu.be/twI6apRKHsk

https://github.com/user-attachments/assets/69cb561c-2e1e-4665-9411-4a3185f9643e

La IA captura automáticamente las solicitudes de red por ti

consulta: Quiero saber cuál es la API de búsqueda de Xiaohongshu y cómo es la estructura de la respuesta

https://youtu.be/1hHKr7XKqnQ

https://github.com/user-attachments/assets/dc7e5cab-b9af-4b9a-97ce-18e4837318d9

La IA te ayuda a analizar tu historial de navegación

consulta: Analiza mi historial de navegación del último mes

https://youtu.be/jf2UZfrR2Vk

https://github.com/user-attachments/assets/31b2e064-88c6-4adb-96d7-50748b826eae

Conversación con la página web

consulta: Traduce y resume la página web actual https://youtu.be/FlJKS9UQyC8

https://github.com/user-attachments/assets/aa8ef2a1-2310-47e6-897a-769d85489396

La IA toma capturas de pantalla automáticamente por ti (capturas de pantalla de páginas web)

consulta: Toma una captura de pantalla de la página de inicio de Hugging Face https://youtu.be/7ycK6iksWi4

https://github.com/user-attachments/assets/65c6eee2-6366-493d-a3bd-2b27529ff5b3

La IA toma capturas de pantalla automáticamente por ti (capturas de pantalla de elementos)

consulta: Captura el ícono de la página de inicio de Hugging Face https://youtu.be/ev8VivANIrk

https://github.com/user-attachments/assets/d0cf9785-c2fe-4729-a3c5-7f2b8b96fe0c

La IA te ayuda a gestionar marcadores

consulta: Agrega la página actual a los marcadores y colócala en una carpeta apropiada

https://youtu.be/R_83arKmFTo

https://github.com/user-attachments/assets/15a7d04c-0196-4b40-84c2-bafb5c26dfe0

Cerrar páginas web automáticamente

consulta: Cierra todas las páginas web relacionadas con shadcn

https://youtu.be/2wzUT6eNVg4

https://github.com/user-attachments/assets/83de4008-bb7e-494d-9b0f-98325cfea592

🤝 Contribuciones

¡Damos la bienvenida a las contribuciones! Consulta CONTRIBUTING.md para obtener pautas detalladas.

🚧 Hoja de Ruta Futura

Tenemos planes emocionantes para el desarrollo futuro de Chrome MCP Server:

  • Autenticación
  • Grabación y Reproducción
  • Automatización de Flujos de Trabajo
  • Soporte Mejorado de Navegadores (Extensión de Firefox)

¿Quieres contribuir a alguna de estas funciones? ¡Consulta nuestra Guía de Contribución y únete a nuestra comunidad de desarrollo!

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT - consulta el archivo LICENSE para más detalles.

📚 Más Documentación