Chrome Debug MCP Server

Controla Chrome con capacidades de depuración, inyección de usuarioscripts y soporte de extensiones.

Documentación

Chrome Debug MCP Playwright

Una implementación del Protocolo de Contexto de Modelo (MCP) para la automatización de navegadores usando Playwright, con soporte completo de la API de Greasemonkey.

Características

Funciones principales del navegador

Inicio y gestión del navegador
Soporte de múltiples pestañas con capacidades de crear/cambiar/cerrar
Navegación e interacción con páginas
Captura de pantalla

Soporte de API de Greasemonkey

GM_addStyle para inyección de CSS
GM_getValue/GM_setValue para almacenamiento de datos
GM_deleteValue para limpieza de almacenamiento
GM_notification para notificaciones de escritorio
GM_setClipboard para operaciones de portapapeles
GM_xmlhttpRequest para solicitudes de origen cruzado

Gestión de recursos

Intercepción de solicitudes de red
Bloqueo, modificación y registro de solicitudes
Filtrado por tipo de recurso

Funciones de depuración

Sistema de registro detallado
Organización de archivos de registro
Salida de interfaz limpia

Instalación

npm install chrome-debug-mcp-playwright

Inicio rápido

// Launch browser
tool browser launch_browser --url "https://example.com" --browserType "chromium"

// Use GM functions
tool browser gm_setValue --key "setting" --value "test"
tool browser gm_getValue --key "setting"

// Intercept requests
tool browser intercept_requests --patterns ["*.jpg", "*.css"] --action "block"

Documentación

Comandos - Documentación detallada de comandos con ejemplos
Lista completa de comandos con ejemplos de uso disponible en COMMANDS.md

Funciones principales

Gestión del navegador

// Launch browser
tool browser launch_browser --url "https://example.com"

// Create new tab
tool browser create_tab --url "https://example.com"

// Switch between tabs
tool browser switch_tab --index 1

API de Greasemonkey

// Add custom styles
tool browser gm_addStyle --css "body { background: #f0f0f0; }"

// Store data
tool browser gm_setValue --key "setting" --value "test"

// Make cross-origin requests
tool browser gm_xmlhttpRequest --url "https://api.example.com/data" --method "GET"

Intercepción de recursos

// Block image loading
tool browser intercept_requests --patterns ["*.jpg", "*.png"] --action "block"

// Log all CSS requests
tool browser intercept_requests --patterns ["*.css"] --action "log"

Detalles de implementación

Sistema de registro

Todo el resultado de depuración se redirige a archivos de registro
Entradas con marca de tiempo
Organizado en el directorio de registros
Salida de interfaz limpia

Manejo de errores

Registro de errores detallado
Limpieza adecuada en errores
Gestión de recursos

Dependencias

Playwright: Automatización de navegador
@modelcontextprotocol/sdk: Implementación de MCP

Desarrollo

Requisitos previos

Node.js 16 o superior
npm 7 o superior

Configuración

git clone https://github.com/yourusername/chrome-debug-mcp-playwright.git
cd chrome-debug-mcp-playwright
npm install

Licencia

Licencia MIT - Consulte el archivo LICENSE para más detalles.

Contribuciones

¡Agradecemos las contribuciones! Consulte nuestra Guía de contribución para más detalles.

Agradecimientos

Basado en el chrome-debug-mcp original de Robert Headley.

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Chrome Debug MCP Server

Un servidor del Protocolo de Contexto de Modelo (MCP) para controlar Chrome con capacidades de depuración, inyección de usuarioscripts y soporte de extensiones.

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Características

Control de Chrome

Iniciar Chrome con configuraciones personalizadas
Soporte para rutas personalizadas del ejecutable de Chrome
Gestión de perfiles de usuario (directorio de datos de usuario predeterminado o personalizado)
Soporte y gestión de extensiones
Deshabilitar el banner de "Controlado por automatización" de Chrome

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Automatización de páginas

Hacer clic, escribir e interactuar con elementos de la página
Manejar listas desplegables y entradas de formulario
Pasar el cursor y esperar elementos
Tomar capturas de pantalla de la página completa o de elementos
Navegar entre páginas
Establecer el tamaño de la ventana gráfica y la emulación de dispositivos
Extraer texto y atributos de elementos

Gestión de pestañas

Listar todas las pestañas abiertas con sus IDs y URLs
Abrir nuevas pestañas con URLs especificadas
Cerrar pestañas por ID
Cambiar entre pestañas
Rastrear y gestionar múltiples estados de pestañas

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Capacidades de depuración

Depuración remota mediante el Protocolo de DevTools de Chrome (CDP)
Captura y monitoreo de registros de consola
Evaluación de JavaScript en el contexto de la página
Transmisión de salida de consola en tiempo real

Soporte de Userscripts

Inyectar userscripts en páginas web
Soporte de API estilo Greasemonkey:
- GM_setValue/GM_getValue para almacenamiento persistente
- GM_addStyle para inyección de CSS
- GM_xmlhttpRequest para solicitudes de origen cruzado
- GM_openInTab para creación de nuevas pestañas
- GM_registerMenuCommand para comandos de menú

Integración de extensiones

Cargar extensiones desempaquetadas
Mantener estados y configuraciones de extensiones
Soporte para extensiones del perfil predeterminado de Chrome
Habilitación/deshabilitación selectiva de extensiones

Instalación

Requisitos previos

Node.js (v14 o superior)
Navegador Chrome instalado
Visual Studio Code
Extensión Roo Code

Instalación de la extensión Roo Code

Abra Visual Studio Code
Vaya a Extensiones (Ctrl+Shift+X)
Busque "Roo Code"
Haga clic en Instalar

Configuración de Chrome Debug MCP Server

Clone este repositorio:

git clone https://github.com/yourusername/chrome-debug-mcp.git
cd chrome-debug-mcp

Instale las dependencias:
```
npm install
```
Compile el proyecto:
```
npm run build
```

Configure en Roo Code: Agregue a cline_mcp_settings.json:

{
  "mcpServers": {
    "chrome-debug": {
      "command": "node",
      "args": ["path/to/chrome-debug-mcp/build/index.js"],
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

Uso

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

Para una referencia completa de todos los comandos, herramientas y funciones disponibles, consulte COMMANDS.md.

parent of 64acbb3 (Add files via upload) ======= Para una referencia completa de todos los comandos, herramientas y funciones disponibles, consulte COMMANDS.md.

parent of 64acbb3 (Add files via upload)

Inicio básico de Chrome

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    url: "https://example.com"
  }
})

Inicio con perfil personalizado

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    userDataDir: "path/to/chrome/profile",
    disableAutomationControlled: true
  }
})

Inyectar Userscript

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    url: "https://example.com",
    userscriptPath: "path/to/userscript.js"
  }
})

Evaluar JavaScript

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "evaluate",
  arguments: {
    expression: "document.title"
  }
})

Obtener registros de consola

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "get_console_logs",
  arguments: {
    clear: true
  }
})

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Ejemplos de interacción con páginas

Hacer clic en un elemento

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "click",
  arguments: {
    selector: "#submit-button",
    delay: 500
  }
})

Escribir en un campo de entrada

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "type",
  arguments: {
    selector: "#search-input",
    text: "search query",
    delay: 100
  }
})

Seleccionar de una lista desplegable

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "select",
  arguments: {
    selector: "#country-select",
    value: "US"
  }
})

Esperar un elemento

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "wait_for_selector",
  arguments: {
    selector: ".loading-complete",
    visible: true,
    timeout: 5000
  }
})

Tomar captura de pantalla

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "screenshot",
  arguments: {
    path: "screenshot.png",
    fullPage: true
  }
})

Establecer tamaño de ventana gráfica

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "set_viewport",
  arguments: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1
  }
})

Ejemplos de gestión de pestañas

Listar todas las pestañas

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "list_tabs",
  arguments: {}
})

Abrir nueva pestaña

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "new_tab",
  arguments: {
    url: "https://example.com"
  }
})

Cambiar a pestaña

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "switch_tab",
  arguments: {
    tabId: "tab-id-from-list-tabs"
  }
})

Cerrar pestaña

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "close_tab",
  arguments: {
    tabId: "tab-id-from-list-tabs"
  }
})

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Dependencias

Este proyecto utiliza los siguientes paquetes de código abierto:

Puppeteer - Biblioteca de automatización de Chrome
chrome-remote-interface - Cliente del Protocolo de DevTools de Chrome
@modelcontextprotocol/sdk - SDK de MCP para la implementación del servidor

Licencia

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

Contribuciones

Consulte nuestra Guía de contribución para más detalles sobre cómo realizar contribuciones.

Agradecimientos

Chrome DevTools Protocol
Greasemonkey API <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD
Model Context Protocol

parent of 8a57443 (Merge pull request #4 from robertheadley/feature/puppeteer-commands) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload)