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 persistenteGM_addStyle para inyección CSSGM_xmlhttpRequest para solicitudes de origen cruzadoGM_openInTab para la creación de una nueva pestañaGM_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:
- Construir el proyecto:
- 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) ======= 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) ======= 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) ======= 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:
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
padre de 8a57443 (Fusionar solicitud de extracción n.° 4 de robertheadley/feature/puppeteer-commands) =======
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)