Chrome Tools MCP Server

Servidor MCP de Chrome Tools

Un servidor MCP que proporciona herramientas para interactuar con Chrome mediante su protocolo DevTools. Este servidor permite el control remoto de las pestañas de Chrome, incluyendo la ejecución de JavaScript, la captura de pantallas, la monitorización del tráfico de red y mucho más.

¿Por qué utilizar un servidor MCP como este?

Este tipo de servidor MCP es útil cuando necesitas configurar manualmente tu navegador para que esté en un estado determinado antes de permitir que una herramienta de IA como Cline lo analice. También puedes usar esta herramienta para escuchar y extraer eventos de red en su contexto.

Características

• Lista de pestañas de Chrome
• Ejecutar JavaScript en pestañas
• Capturar capturas de pantalla
• Monitorear el tráfico de la red
• Navegar por las pestañas hasta las URL
• Consultar elementos DOM
• Haga clic en elementos con captura de salida de consola

Instalación

Configuración

El servidor se puede configurar a través de variables de entorno en la configuración de MCP:

Variables de entorno

• CHROME_DEBUG_URL : La URL donde está disponible la interfaz de depuración remota de Chrome (predeterminado: http://localhost:9222 )
• CHROME_CONNECTION_TYPE : Identificador del tipo de conexión para el registro (por ejemplo, "directo", "ssh-tunnel", "docker")
• CHROME_ERROR_HELP : Mensaje de error personalizado que se muestra cuando falla la conexión

Guía de configuración

Configuración nativa (Windows/Mac/Linux)

1. Inicie Chrome con la depuración remota habilitada:
   # Windows "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 # Mac /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 # Linux google-chrome --remote-debugging-port=9222
2. Configurar los ajustes de MCP:
   { "env": { "CHROME_DEBUG_URL": "http://localhost:9222", "CHROME_CONNECTION_TYPE": "direct" } }

Configuración de WSL

Al ejecutar en WSL, necesitará configurar un túnel SSH para conectarse a Chrome que se ejecuta en Windows:

1. Inicie Chrome en Windows con la depuración remota habilitada
2. Crear un túnel SSH:
   ssh -N -L 9222:localhost:9222 windowsuser@host
3. Configurar los ajustes de MCP:
   { "env": { "CHROME_DEBUG_URL": "http://localhost:9222", "CHROME_CONNECTION_TYPE": "ssh-tunnel", "CHROME_ERROR_HELP": "Make sure the SSH tunnel is running: ssh -N -L 9222:localhost:9222 windowsuser@host" } }

Configuración de Docker

Al ejecutar Chrome en Docker:

1. Iniciar contenedor de Chrome:
   docker run -d --name chrome -p 9222:9222 chromedp/headless-shell
2. Configurar los ajustes de MCP:
   { "env": { "CHROME_DEBUG_URL": "http://localhost:9222", "CHROME_CONNECTION_TYPE": "docker" } }

Herramientas

lista_de_pestañas

Enumera todas las pestañas de Chrome disponibles.

ejecutar_script

Ejecuta código JavaScript en una pestaña específica. Parámetros:

• tabId : ID de la pestaña de Chrome
• script : código JavaScript para ejecutar

capturar_captura_de_pantalla

Captura una captura de pantalla de una pestaña específica y la optimiza automáticamente para el uso del modelo de IA. Parámetros:

• tabId : ID de la pestaña de Chrome
• format : Formato de imagen (jpeg/png). Nota: Esto es solo para la captura inicial. El resultado final usa WebP con formato PNG como alternativa.
• quality : Calidad JPEG (1-100) - Nota: Solo para captura inicial
• fullPage : Capturar página completa desplazable

Procesamiento de imágenes:

1. Optimización de WebP (formato principal):
   • Primer intento: WebP con calidad 80 y alto esfuerzo de compresión
   • Segundo intento: WebP con calidad 60 y compresión casi sin pérdida si el primer intento supera 1 MB
2. PNG de respaldo:
   • Sólo se utiliza si falla el procesamiento de WebP
   • Incluye máxima compresión y optimización de la paleta de colores.
3. Restricciones de tamaño:
   • Dimensiones máximas: 900x600 (mantiene la relación de aspecto)
   • Tamaño máximo de archivo: 1 MB
   • Reducción progresiva del tamaño si es necesario

capturar eventos de red

Monitorea y captura eventos de red desde una pestaña específica. Parámetros:

• tabId : ID de la pestaña de Chrome
• duration : Duración en segundos de la captura.
• filters : filtros de tipo y patrón de URL opcionales

cargar_url

Navega por una pestaña a una URL específica. Parámetros:

• tabId : ID de la pestaña de Chrome
• url : URL para cargar

elementos del dominio de consulta

Consulta y recupera información detallada sobre los elementos DOM que coinciden con un selector CSS. Parámetros:

• tabId : ID de la pestaña de Chrome
• selector : Selector CSS para buscar elementos Devuelve:
• Matriz de elementos DOM con propiedades que incluyen:
  • nodeId : identificador único del nodo
  • tagName : nombre de la etiqueta HTML
  • textContent : Contenido de texto del elemento
  • attributes : Objeto que contiene todos los atributos del elemento
  • boundingBox : Posición y dimensiones del elemento
  • isVisible : Si el elemento es visible
  • ariaAttributes : atributos ARIA para accesibilidad

elemento_clic

Hace clic en un elemento DOM y captura la salida de consola generada por el clic. Parámetros:

• tabId : ID de la pestaña de Chrome
• selector : selector CSS para encontrar el elemento en el que hacer clic. Devuelve:
• Objeto que contiene:
  • message : Mensaje de éxito/fracaso
  • consoleOutput : Matriz de mensajes de consola activados por el clic

Licencia

Instituto Tecnológico de Massachusetts (MIT)