Depuración de Chrome MCP Playwright

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

Características

Características principales del navegador

Inicio y gestión del navegador
Compatibilidad con múltiples pestañas con capacidades de crear, cambiar y cerrar
Navegación e interacción de la página
Captura de pantalla

Compatibilidad con la API de Greasemonkey

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

Gestión de recursos

Interceptación de solicitudes de red
Bloqueo, modificación y registro de solicitudes
Filtrado de tipos de recursos

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 disponibles en COMMANDS.md

Características principales

Administració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"

Interceptació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

Toda la salida de depuración se redirige a los archivos de registro
Entradas con marca de tiempo
Organizado en el directorio de registros
Salida de interfaz limpia

Manejo de errores

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

Dependencias

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

Desarrollo

Prerrequisitos

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 LICENCIA para obtener más detalles.

Contribuyendo

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

Expresiones de gratitud

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

=======

padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga)

Servidor MCP de depuración de Chrome

Un servidor de Protocolo de contexto de modelo (MCP) para controlar Chrome con capacidades de depuración, inyección de scripts de usuario y soporte de extensiones.

<<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA

=======

padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga)

<<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA

padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga)

Características

Control de cromo

Iniciar Chrome con configuraciones personalizadas
Compatibilidad con rutas ejecutables personalizadas de Chrome
Gestión de perfiles de usuario (directorio de datos de usuario predeterminado o personalizado)
Soporte y gestión de extensiones
Desactivar el banner "Control de automatización" de Chrome

<<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA

=======

padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga)

Automatización de páginas

Haga clic, escriba e interactúe con los elementos de la página
Manejar menús desplegables y entradas de formulario
Pase el cursor y espere los elementos
Tomar capturas de pantalla de páginas completas o elementos
Navegar entre páginas
Establecer el tamaño de la ventana gráfica y la emulación del dispositivo
Extraer texto y atributos de los elementos

Gestión de pestañas

Enumere todas las pestañas abiertas con sus ID y URL
Abrir nuevas pestañas con URL específicas
Cerrar pestañas por ID
Cambiar entre pestañas
Realizar un seguimiento y administrar múltiples estados de pestañas

<<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA

padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga)

Capacidades de depuración

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

Soporte de scripts de usuario

Inyectar scripts de usuario en páginas web
Compatibilidad con API de estilo Greasemonkey:
- GM_setValue / GM_getValue para almacenamiento persistente
- GM_addStyle para inyección CSS
- GM_xmlhttpRequest para solicitudes de origen cruzado
- GM_openInTab para la creación de una nueva pestaña
- GM_registerMenuCommand para comandos de menú

Integración de extensiones

Cargar extensiones descomprimidas
Mantener estados y configuraciones de extensión
Compatibilidad con extensiones de perfil predeterminadas de Chrome
Habilitación/deshabilitación de extensión selectiva

Instalación

Prerrequisitos

Instalación de la extensión Roo Code

Abrir Visual Studio Code
Vaya a Extensiones (Ctrl+Shift+X)
Buscar "Código Roo"
Haga clic en Instalar

Configuración del servidor MCP de depuración de Chrome

Clonar este repositorio:
git clone https://github.com/yourusername/chrome-debug-mcp.git cd chrome-debug-mcp
Instalar dependencias:
npm install
Construir el proyecto:
npm run build
Configurar en Roo Code: Agregar a cline_mcp_settings.json :
{ "mcpServers": { "chrome-debug": { "command": "node", "args": ["path/to/chrome-debug-mcp/build/index.js"], "disabled": false, "alwaysAllow": [] } } }

Uso

<<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA

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

padre de 64acbb3 (Agregar archivos mediante carga) ======= Para obtener una referencia completa de todos los comandos, herramientas y funciones disponibles, consulte COMMANDS.md .

padre de 64acbb3 (Agregar archivos mediante carga)

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"
  }
})

Lanzamiento 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 script de usuario

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 la consola

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

<<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA

=======

padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga)

Ejemplos de interacción de páginas

Haga clic en un elemento

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

Escriba en la entrada

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

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

Esperar a Element

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 el tamaño de la 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"
  }
})

<<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA

padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga) ======= padre de 64acbb3 (Agregar archivos mediante carga)

Dependencias

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

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

Licencia

Este proyecto está licenciado bajo la licencia MIT: consulte el archivo de LICENCIA para obtener más detalles.

Contribuyendo

Consulte nuestra Guía de contribuciones para obtener detalles sobre cómo realizar contribuciones.

Expresiones de gratitud

Protocolo de herramientas de desarrollo de Chrome
API de Greasemonkey <<<<<<< CABECERA <<<<<<< CABECERA <<<<<<< CABECERA <<<<<<< CABECERA <<<<<<< CABECERA <<<<<<< CABECERA
Protocolo de contexto modelo

padre de 8a57443 (Fusionar solicitud de extracción n.° 4 de robertheadley/feature/puppeteer-commands) =======

Protocolo de contexto modelo

padre de 64acbb3 (Agregar archivos mediante carga) =======

Protocolo de contexto modelo

padre de 64acbb3 (Agregar archivos mediante carga) =======

Protocolo de contexto modelo

padre de 64acbb3 (Agregar archivos mediante carga) =======

Protocolo de contexto modelo

padre de 64acbb3 (Agregar archivos mediante carga) =======

Protocolo de contexto modelo

padre de 64acbb3 (Agregar archivos mediante carga) =======

Protocolo de contexto modelo

padre de 64acbb3 (Agregar archivos mediante carga) =======

Protocolo de contexto modelo

padre de 64acbb3 (Agregar archivos mediante carga)

Integrations

Depuración de Chrome MCP Playwright

Características

Características principales del navegador

Compatibilidad con la API de Greasemonkey

Gestión de recursos

Funciones de depuración

Instalación

Inicio rápido

Documentación

Características principales

Administración del navegador

API de Greasemonkey

Interceptación de recursos

Detalles de implementación

Sistema de registro

Manejo de errores

Dependencias

Desarrollo

Prerrequisitos

Configuración

Licencia

Contribuyendo

Expresiones de gratitud

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

Servidor MCP de depuración de Chrome

<<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA

Características

Control de cromo

<<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA

Automatización de páginas

Gestión de pestañas

Capacidades de depuración

Soporte de scripts de usuario

Integración de extensiones

Instalación

Prerrequisitos

Instalación de la extensión Roo Code

Configuración del servidor MCP de depuración de Chrome

Uso

<<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA

Inicio básico de Chrome

Lanzamiento con perfil personalizado

Inyectar script de usuario

Evaluar JavaScript

Obtener registros de la consola

<<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA <<<<<<< CABEZA

Ejemplos de interacción de páginas

Haga clic en un elemento

Escriba en la entrada

Seleccione del menú desplegable

Esperar a Element

Tomar captura de pantalla

Establecer el tamaño de la ventana gráfica

Ejemplos de gestión de pestañas

Listar todas las pestañas

Abrir nueva pestaña

Cambiar a pestaña

Cerrar pestaña

Dependencias

Licencia

Contribuyendo

Expresiones de gratitud

Tools

Related Resources

Appeared in Searches