Chrome MCP Server

Chrome MCP Server

Un servidor de Model Context Protocol (MCP) que proporciona control granular sobre una instancia del navegador Chrome a través del Protocolo de Herramientas de Desarrollo de Chrome (CDP).

Requisitos previos

• Bun (recomendado) o Node.js (v14 o superior)
• Navegador Chrome con depuración remota habilitada

Configuración

Instalación de Bun

1. Instalar Bun (si no está instalado):

# macOS, Linux, or WSL
curl -fsSL https://bun.sh/install | bash

# Windows (using PowerShell)
powershell -c "irm bun.sh/install.ps1 | iex"

# Alternatively, using npm
npm install -g bun

2. Iniciar Chrome con depuración remota habilitada:

   # macOS
   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   
   # Windows
   start chrome --remote-debugging-port=9222
   
   # Linux
   google-chrome --remote-debugging-port=9222
   

3. Instalar dependencias:

bun install

4. Iniciar el servidor:

bun start

Para desarrollo con recarga en caliente:

bun dev

El servidor se iniciará en el puerto 3000 por defecto. Puedes cambiar esto estableciendo la variable de entorno PORT.

Configurar Roo Code para usar este servidor MCP

Para usar este servidor Chrome MCP con Roo Code:

1. Abre la configuración de Roo Code

2. Navega al archivo de configuración de ajustes MCP en:

   • macOS: ~/Library/Application Support/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.json
   • Windows: %APPDATA%\Code\User\globalStorage\rooveterinaryinc.roo-cline\settings\cline_mcp_settings.json
   • Linux: ~/.config/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.json

3. Añade la siguiente configuración al objeto mcpServers:

{
  "mcpServers": {
    "chrome-control": {
      "url": "http://localhost:3000/sse",
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

4. Guarda el archivo y reinicia Roo Code para aplicar los cambios.

5. Ahora puedes usar las herramientas Chrome MCP en Roo Code para controlar el navegador.

Herramientas disponibles

El servidor proporciona las siguientes herramientas para el control del navegador:

navigate

Navegar a una URL específica.

Parámetros:

• url (cadena): La URL a la que navegar

click

Hacer clic en coordenadas específicas.

Parámetros:

• x (número): Coordenada X
• y (número): Coordenada Y

type

Escribir texto en el foco actual.

Parámetros:

• text (cadena): Texto a escribir

clickElement

Hacer clic en un elemento por su índice en la información de la página.

Parámetros:

• selector (cadena): Índice del elemento (por ejemplo, "0" para el primer elemento)

getText

Obtener el contenido de texto de un elemento usando un selector CSS.

Parámetros:

• selector (cadena): Selector CSS para encontrar el elemento

getPageInfo

Obtener información semántica de la página, incluyendo elementos interactivos y nodos de texto.

getPageState

Obtener el estado actual de la página, incluyendo URL, título, posición de desplazamiento y tamaño de la ventana gráfica.

Uso

El servidor implementa el Model Context Protocol con transporte SSE. Conéctate al servidor en:

• Endpoint SSE: http://localhost:3000/sse
• Endpoint de mensajes: http://localhost:3000/message?sessionId=...

Cuando uses Roo Code, la configuración en el archivo de ajustes MCP manejará la conexión automáticamente.

Desarrollo

Para ejecutar el servidor en modo desarrollo con recarga en caliente:

bun dev

Esto usa el modo de observación integrado de Bun para reiniciar automáticamente el servidor cuando los archivos cambien.

Licencia

MIT