@eddym06/custom-chrome-mcp 1.0.4 → 1.1.0

package/README.md

@@ -38,6 +38,14 @@ Add this to your `mcp.json` config file:
 - Timezone y geolocalización configurable
 - Scripts anti-detección automáticos
 
+### ⏱️ Timeouts Inteligentes
+- **Timeouts configurables por operación**: La IA decide el timeout según complejidad
+- Defaults optimizados: 10-60 segundos según la herramienta
+- Prevención de cuelgues en operaciones pesadas
+- HAR exports: hasta 60s para archivos grandes
+- Inyección CSS/JS: 10-15s para scripts complejos
+- Parámetro `timeoutMs` en todas las herramientas críticas
+
 ### 🔒 Shadow Profile System
 - **Bypasses Chrome's Default profile debugging restriction**
 - Platform-specific cloning (robocopy on Windows, rsync on Unix)
@@ -139,7 +147,7 @@ Agrega en tu `mcp.json` o configuración de Cline/Claude:
 
 ### 3. ¡Empieza a usar!
 
-El MCP se conectará automáticamente a tu Chrome y tendrás acceso a 44 herramientas organizadas en 6 categorías.
+El MCP se conectará automáticamente a tu Chrome y tendrás acceso a **84 herramientas** organizadas en **15 categorías**.
 
 ## 🛠️ Herramientas Disponibles
 
@@ -181,12 +189,55 @@ El MCP se conectará automáticamente a tu Chrome y tendrás acceso a 44 herrami
 - `skip_waiting` - Skip waiting
 - `get_sw_caches` - Obtener cachés
 
-### Captura (5 herramientas)
+### Captura (7 herramientas)
 - `screenshot` - Captura de pantalla
 - `get_html` - Obtener HTML
 - `print_to_pdf` - Exportar a PDF
 - `get_page_metrics` - Métricas de página
-- `get_accessibility_tree` - Árbol a11y
+- `get_accessibility_tree` - Árbol a11y completo
+- `get_accessibility_snapshot` - Snapshot Playwright-style
+
+### Network Interception (8 herramientas)
+- `enable_network_interception` - Activar interceptación de requests
+- `list_intercepted_requests` - Listar requests interceptados
+- `modify_intercepted_request` - Modificar request (headers, URL, body)
+- `fail_intercepted_request` - Bloquear request (ads, tracking)
+- `continue_intercepted_request` - Continuar sin modificar
+- `disable_network_interception` - Desactivar interceptación
+
+### Network Response Interception (4 herramientas)
+- `enable_response_interception` - Activar interceptación de respuestas
+- `list_intercepted_responses` - Listar respuestas interceptadas
+- `modify_intercepted_response` - Modificar respuesta (body, headers, status)
+- `disable_response_interception` - Desactivar interceptación
+
+### Request/Response Mocking (4 herramientas)
+- `create_mock_endpoint` - Crear endpoint falso (mock API responses)
+- `list_mock_endpoints` - Listar mocks activos
+- `delete_mock_endpoint` - Eliminar mock específico
+- `clear_all_mocks` - Limpiar todos los mocks
+
+### WebSocket Interception (5 herramientas)
+- `enable_websocket_interception` - Activar interceptación de WebSockets
+- `list_websocket_connections` - Listar conexiones WS activas
+- `list_websocket_messages` - Ver mensajes WS (sent/received)
+- `send_websocket_message` - Inyectar mensaje en WebSocket
+- `disable_websocket_interception` - Desactivar interceptación WS
+
+### HAR Recording & Replay (3 herramientas)
+- `start_har_recording` - Iniciar grabación HAR (HTTP Archive)
+- `stop_har_recording` - Detener y obtener HAR data
+- `export_har_file` - Exportar HAR a archivo .har
+
+### Advanced Request Patterns (1 herramienta)
+- `add_advanced_interception_pattern` - Patrón avanzado (status code, size, duration, content-type, action)
+
+### CSS/JS Injection Pipeline (5 herramientas)
+- `inject_css_global` - Inyectar CSS en todas las páginas
+- `inject_js_global` - Inyectar JavaScript en todas las páginas
+- `list_injected_scripts` - Listar inyecciones activas
+- `remove_injection` - Remover inyección específica
+- `clear_all_injections` - Limpiar todas las inyecciones
 
 ### Sesiones & Cookies (9 herramientas)
 - `get_cookies` - Obtener cookies
@@ -249,6 +300,246 @@ await mcp.call('import_session', { sessionData });
 ```typescript
 // Listar todos los service workers
 const workers = await mcp.call('list_service_workers', {});
+console.log(workers);
+
+// Actualizar un service worker
+await mcp.call('update_service_worker', { 
+  scopeURL: 'https://example.com/' 
+});
+```
+
+### Ejemplo 5: Interceptar y modificar requests
+```typescript
+// Activar interceptación para archivos JS y CSS
+await mcp.call('enable_network_interception', {
+  patterns: ['*.js', '*.css', '*analytics*']
+});
+
+// Listar requests interceptados
+const intercepted = await mcp.call('list_intercepted_requests', {});
+console.log('Intercepted:', intercepted.interceptedRequests);
+
+// Bloquear un request de analytics
+await mcp.call('fail_intercepted_request', {
+  requestId: 'some-request-id',
+  errorReason: 'BlockedByClient'
+});
+
+// Modificar headers de un request
+await mcp.call('modify_intercepted_request', {
+  requestId: 'another-request-id',
+  modifiedHeaders: {
+    'User-Agent': 'Custom Agent',
+    'X-Custom-Header': 'Value'
+  }
+});
+
+// Desactivar cuando termines
+await mcp.call('disable_network_interception', {});
+```
+
+### Ejemplo 6: Obtener árbol de accesibilidad
+```typescript
+// Obtener snapshot estilo Playwright (fácil de leer)
+const snapshot = await mcp.call('get_accessibility_snapshot', {
+  interestingOnly: true  // Solo botones, links, inputs, etc.
+});
+console.log(snapshot.snapshot);
+
+// Obtener árbol completo (más detallado)
+const fullTree = await mcp.call('get_accessibility_tree', {
+  depth: 5,  // Profundidad máxima
+  includeIgnored: false
+});
+console.log(`Total nodes: ${fullTree.totalNodes}`);
+```
+
+### Ejemplo 7: Interceptar y modificar respuestas
+```typescript
+// Activar interceptación de RESPUESTAS (no solo requests)
+// timeoutMs: La IA puede aumentarlo si espera muchas requests
+await mcp.call('enable_response_interception', {
+  patterns: ['*api.example.com/*'],
+  resourceTypes: ['XHR', 'Fetch'],
+  timeoutMs: 15000  // 15s para APIs lentas
+});
+
+// Esperar a que se intercepte una respuesta
+const responses = await mcp.call('list_intercepted_responses', {});
+console.log('Intercepted responses:', responses.interceptedResponses);
+
+// Modificar el body de una respuesta JSON
+await mcp.call('modify_intercepted_response', {
+  requestId: 'response-id',
+  modifiedBody: JSON.stringify({ modified: true, data: [1, 2, 3] }),
+  modifiedStatusCode: 200,
+  modifiedHeaders: {
+    'Content-Type': 'application/json',
+    'X-Modified': 'true'
+  },
+  timeoutMs: 20000  // 20s para respuestas grandes
+});
+```
+
+### Ejemplo 8: Mock API endpoints
+```typescript
+// Crear un mock endpoint para API
+// timeoutMs: Para endpoints complejos con lógica pesada
+await mcp.call('create_mock_endpoint', {
+  urlPattern: '*api.example.com/users*',
+  responseBody: JSON.stringify([
+    { id: 1, name: 'John Doe', email: 'john@example.com' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
+  ]),
+  statusCode: 200,
+  headers: {
+    'Content-Type': 'application/json',
+    'X-Mock': 'true'
+  },
+  latency: 500,  // Simular 500ms de latencia
+  method: 'GET',
+  timeoutMs: 12000  // 12s para registrar el mock
+});
+
+// Navegar y la API será interceptada automáticamente
+await mcp.call('navigate', { url: 'https://example.com' });
+
+// Ver estadísticas de mocks
+const mocks = await mcp.call('list_mock_endpoints', {});
+console.log('Active mocks:', mocks.mocks);
+
+// Limpiar cuando termines
+await mcp.call('clear_all_mocks', {});
+```
+
+### Ejemplo 9: WebSocket interception
+```typescript
+// Activar interceptación de WebSockets
+await mcp.call('enable_websocket_interception', {
+  urlPattern: 'wss://example.com/socket'
+});
+
+// Listar conexiones WebSocket activas
+const connections = await mcp.call('list_websocket_connections', {});
+console.log('Active WebSockets:', connections.connections);
+
+// Ver mensajes enviados y recibidos
+const messages = await mcp.call('list_websocket_messages', {
+  direction: 'all',
+  limit: 50
+});
+console.log('WS Messages:', messages.messages);
+
+// Inyectar un mensaje falso
+await mcp.call('send_websocket_message', {
+  requestId: 'ws-connection-id',
+  message: JSON.stringify({ type: 'ping', timestamp: Date.now() })
+});
+```
+
+### Ejemplo 10: HAR recording
+```typescript
+// Iniciar grabación de tráfico de red en formato HAR
+await mcp.call('start_har_recording', {});
+
+// Navegar y realizar acciones
+await mcp.call('navigate', { url: 'https://example.com' });
+await mcp.call('click', { selector: 'button.load-data' });
+await new Promise(resolve => setTimeout(resolve, 3000));
+
+// Detener y obtener HAR data
+const harData = await mcp.call('stop_har_recording', {});
+console.log(`Captured ${harData.entriesCount} requests`);
+
+// Exportar a archivo
+// timeoutMs: Importante aumentarlo si el HAR es muy grande (>50MB)
+await mcp.call('export_har_file', {
+  filename: 'recording.har',
+  outputDir: './recordings',
+  timeoutMs: 90000  // 90s para exportar HARs muy grandes
+});
+```
+
+### Ejemplo 11: Advanced request patterns
+```typescript
+// Crear patrón avanzado: bloquear imágenes grandes
+await mcp.call('add_advanced_interception_pattern', {
+  name: 'block-large-images',
+  resourceType: 'Image',
+  minSize: 500000,  // > 500KB
+  action: 'block'
+});
+
+// Crear patrón: delay requests lentos
+await mcp.call('add_advanced_interception_pattern', {
+  name: 'delay-slow-apis',
+  urlPattern: '*slow-api.com/*',
+  statusCodeMin: 200,
+  statusCodeMax: 299,
+  action: 'delay',
+  delayMs: 2000
+});
+
+// Patrón: log requests específicos
+await mcp.call('add_advanced_interception_pattern', {
+  name: 'log-analytics',
+  urlPattern: '*analytics*',
+  method: 'POST',
+  action: 'log'
+});
+```
+
+### Ejemplo 12: CSS/JS injection pipeline
+```typescript
+// Inyectar CSS globalmente (se aplica a TODAS las páginas)
+// timeoutMs: Aumentar si el CSS es muy grande o complejo
+await mcp.call('inject_css_global', {
+  css: `
+    body {
+      background-color: #f0f0f0 !important;
+    }
+    .ad-banner {
+      display: none !important;
+    }
+  `,
+  name: 'dark-mode-and-no-ads',
+  timeoutMs: 8000  // 8s para CSS pequeño
+});
+
+// Inyectar JavaScript que se ejecuta ANTES de cualquier script de la página
+// timeoutMs: Critical para JS complejos con validación de sintaxis
+await mcp.call('inject_js_global', {
+  javascript: `
+    // Interceptar fetch para logging
+    const originalFetch = window.fetch;
+    window.fetch = function(...args) {
+      console.log('Fetch intercepted:', args[0]);
+      return originalFetch.apply(this, args);
+    };
+    
+    // Agregar funciones helper globales
+    window.myCustomHelper = function() {
+      console.log('Helper function available globally!');
+    };
+  `,
+  name: 'fetch-interceptor',
+  runImmediately: true,
+  timeoutMs: 18000  // 18s para JS complejo con validación
+});
+
+// Listar inyecciones activas
+const injections = await mcp.call('list_injected_scripts', {});
+console.log('Active injections:', injections.injections);
+
+// Remover una inyección específica
+await mcp.call('remove_injection', {
+  identifier: 'injection-id-here'
+});
+
+// O limpiar todas
+await mcp.call('clear_all_injections', {});
+```
+const workers = await mcp.call('list_service_workers', {});
 console.log(workers.workers);
 
 // Actualizar un service worker específico
@@ -286,9 +577,15 @@ Puedes configurar:
 | Anti-detección | ✅ | ❌ | ⚠️ |
 | Service Workers | ✅ | ⚠️ | ⚠️ |
 | Exportar/importar sesiones | ✅ | ❌ | ❌ |
+| Response Interception | ✅ | ❌ | ⚠️ |
+| API Mocking | ✅ | ❌ | ⚠️ |
+| WebSocket Interception | ✅ | ❌ | ❌ |
+| HAR Recording | ✅ | ❌ | ⚠️ |
+| CSS/JS Injection | ✅ | ❌ | ⚠️ |
 | Delays human-like | ✅ | ❌ | ⚠️ |
 | Multi-tab | ✅ | ✅ | ✅ |
 | Screenshots | ✅ | ✅ | ✅ |
+| Total herramientas | **84** | ~20 | ~30 |
 
 ## 🐛 Troubleshooting
 

package/TEST_WORKFLOW.md

@@ -0,0 +1,311 @@
+# Test Workflow - Verificación de Herramientas MCP
+
+## 🎯 Escenario de Prueba del Usuario
+
+**Prompt Original**: 
+> "Navega a apple.com, luego presiona un botón e intercepta el tráfico de red, y que manda ese paquete, luego vuelve a la página inicial, y ejecuta el paquete que interceptaste y mandaselo a la página ver que hace"
+
+---
+
+## ✅ Secuencia CORRECTA Esperada
+
+### Paso 1: Navegación
+```
+Tool: navigate
+Input: { url: "https://apple.com" }
+Reason: Usuario dice "navega a" - debe usar navigate, NO create_tab
+```
+
+**❌ INCORRECTO**: `create_tab({ url: "https://apple.com" })`
+**✅ CORRECTO**: `navigate({ url: "https://apple.com" })`
+
+---
+
+### Paso 2: Esperar Carga
+```
+Tool: wait_for_load_state
+Input: { state: "networkidle" }
+Reason: Asegurar que la página cargó completamente antes de analizar
+```
+
+---
+
+### Paso 3: Analizar Página (CRÍTICO)
+```
+Tool: get_html
+Input: { tabId: "xxx" }
+Reason: OBLIGATORIO antes de click - necesitamos ver qué botones existen
+```
+
+**⚠️ CRÍTICO**: La IA DEBE hacer este paso. Si salta directo a click, está mal.
+
+Ejemplo de salida esperada:
+```html
+<button class="ac-gn-link-bag">Shopping Bag</button>
+<a href="/shop" class="ac-gn-link">Shop</a>
+<button id="ac-gn-menustate" class="ac-gn-menustate">Menu</button>
+```
+
+---
+
+### Paso 4: Habilitar Interceptación
+```
+Tool: enable_response_interception
+Input: { patterns: ["*"], tabId: "xxx" }
+Reason: Usuario dice "intercepta el tráfico de red"
+```
+
+---
+
+### Paso 5: Click en Botón
+```
+Tool: click
+Input: { 
+  selector: ".ac-gn-link-bag",  // Selector verificado del paso 3
+  tabId: "xxx" 
+}
+Reason: Usuario dice "presiona un botón"
+```
+
+**❌ INCORRECTO**: click con selector adivinado sin get_html primero
+**✅ CORRECTO**: click con selector verificado de get_html
+
+---
+
+### Paso 6: Listar Tráfico Interceptado
+```
+Tool: list_intercepted_responses
+Input: { tabId: "xxx" }
+Reason: Usuario dice "que manda ese paquete" - necesitamos ver qué se capturó
+```
+
+**Salida esperada**:
+```json
+{
+  "interceptedResponses": [
+    {
+      "requestId": "ABC123.1",
+      "url": "https://www.apple.com/shop/api/cart",
+      "method": "GET",
+      "responseStatusCode": 200
+    },
+    {
+      "requestId": "ABC123.2", 
+      "url": "https://www.apple.com/shop/api/products",
+      "method": "GET",
+      "responseStatusCode": 200
+    }
+  ],
+  "count": 2
+}
+```
+
+---
+
+### Paso 7: Volver a Página Inicial
+```
+Tool: go_back
+Input: { tabId: "xxx" }
+Reason: Usuario dice "vuelve a la página inicial"
+```
+
+**Alternativa válida**: `navigate({ url: "https://apple.com" })`
+
+---
+
+### Paso 8: Modificar y Reenviar Paquete
+```
+Tool: modify_intercepted_response
+Input: {
+  requestId: "ABC123.1",  // De list_intercepted_responses
+  modifiedBody: '{"modified": "data"}',
+  tabId: "xxx"
+}
+Reason: Usuario dice "ejecuta el paquete que interceptaste y mandaselo a la página"
+```
+
+**Alternativa**: Si quiere simplemente reenviar sin modificar, usar `continue_intercepted_request`
+
+---
+
+## 🔴 Errores Detectados en la Ejecución Real
+
+### Error #1: Uso de create_tab en vez de navigate
+```
+❌ INCORRECTO:
+create_tab({ url: "https://apple.com" })
+
+✅ CORRECTO:
+navigate({ url: "https://apple.com" })
+
+Razón: Usuario dice "navega a", no "abre nueva pestaña"
+```
+
+---
+
+### Error #2: Click sin get_html previo
+```
+❌ INCORRECTO:
+click({ selector: "a[href*='shop']" })  // Adivinando selector
+
+✅ CORRECTO:
+get_html() → Analizar HTML → click({ selector: ".verified-class" })
+
+Razón: Workflow obligatorio: analizar ANTES de interactuar
+```
+
+---
+
+### Error #3: IA dice que no encuentra list_intercepted_responses
+```
+Mensaje de error de la IA:
+"Las herramientas disponibles no incluyen una función para listar las 
+solicitudes interceptadas"
+
+REALIDAD: La herramienta SÍ existe!
+
+Herramienta: list_intercepted_responses
+Ubicación: src/tools/advanced-network.ts línea 155
+Descripción: "📋 STEP 2 of interception workflow..."
+
+Posibles causas:
+1. IA no está leyendo bien las descripciones
+2. IA busca nombre diferente ("list_intercepted_requests" vs "list_intercepted_responses")
+3. Sistema de "activación" confuso (IA dice "necesito activar las herramientas")
+```
+
+---
+
+### Error #4: IA intenta "activar" herramientas
+```
+Mensaje de IA:
+"Necesito activar las herramientas de inspección de red"
+
+PROBLEMA: No hay sistema de activación en el código!
+Todas las herramientas están siempre disponibles.
+
+Solución aplicada:
+- Eliminadas referencias a "activación" en descripciones
+- Todas las tools están en allTools[] desde el inicio
+- No hay lazy loading ni activación
+```
+
+---
+
+## 🧪 Cómo Probar Manualmente
+
+### Test 1: Verificar que navigate funciona
+```bash
+# En VS Code, pedir a la IA:
+"Usa el MCP custom-chrome para navegar a google.com"
+
+# Verificar que usa:
+✅ navigate({ url: "https://google.com" })
+❌ create_tab({ url: "https://google.com" })
+```
+
+---
+
+### Test 2: Verificar workflow de análisis
+```bash
+# Pedir:
+"Navega a example.com y haz click en el primer link"
+
+# Secuencia esperada:
+1. navigate
+2. wait_for_load_state
+3. get_html  ← CRÍTICO: Debe estar aquí
+4. click con selector del HTML
+```
+
+---
+
+### Test 3: Verificar interception workflow
+```bash
+# Pedir:
+"Navega a httpbin.org/get e intercepta el tráfico"
+
+# Secuencia esperada:
+1. navigate({ url: "https://httpbin.org/get" })
+2. enable_response_interception
+3. wait_for_load_state
+4. list_intercepted_responses  ← DEBE aparecer!
+
+# Si la IA dice "no encuentro la herramienta", HAY UN BUG
+```
+
+---
+
+### Test 4: Verificar que list_intercepted_responses existe
+```bash
+# Comando manual para verificar:
+npm run build
+node dist/index.js  # Iniciar MCP server
+
+# En el cliente MCP, listar tools y buscar:
+- enable_response_interception ✓
+- list_intercepted_responses ✓
+- modify_intercepted_response ✓
+- disable_response_interception ✓
+
+# Todos deben aparecer!
+```
+
+---
+
+## 📊 Checklist de Verificación
+
+- [ ] navigate se usa para "navega a", NO create_tab
+- [ ] get_html se ejecuta ANTES de click/type
+- [ ] wait_for_load_state se ejecuta después de navigate
+- [ ] enable_response_interception está disponible
+- [ ] list_intercepted_responses está disponible (NO dice "necesito activar")
+- [ ] modify_intercepted_response funciona con requestId válido
+- [ ] Workflow completo funciona: navigate → analyze → interact → intercept
+- [ ] IA no adivina selectores, los obtiene de get_html
+
+---
+
+## 🔧 Herramientas Actualizadas
+
+### Descripciones Mejoradas:
+
+1. **navigate**: Ahora indica claramente que es la PRIMARY NAVIGATION TOOL
+2. **create_tab**: Ahora dice explícitamente "DO NOT USE for simple navigation"
+3. **click**: Workflow obligatorio con get_html previo
+4. **type**: Prerequisito de get_html
+5. **enable_response_interception**: Workflow completo 1-2-3-4
+6. **list_intercepted_responses**: Marcado como STEP 2 del workflow
+7. **modify_intercepted_response**: Marcado como STEP 3 con ejemplo
+
+---
+
+## 💡 Próximos Pasos
+
+Si los errores persisten:
+
+1. **Verificar MCP Client**: El cliente que usa VS Code puede tener cache
+2. **Reiniciar MCP Server**: Forzar reload del servidor
+3. **Verificar package.json**: Asegurar que apunta a dist/index.js
+4. **Logs del servidor**: Ver si las tools se registran correctamente
+5. **Test con cliente MCP puro**: Eliminar VS Code de la ecuación
+
+---
+
+## 📝 Cambios Aplicados en Este Fix
+
+| Archivo | Línea | Cambio |
+|---------|-------|--------|
+| navigation.ts | 13 | navigate: "PRIMARY NAVIGATION TOOL" con emojis |
+| navigation.ts | 175 | create_tab: "DO NOT USE for simple navigation" |
+| interaction.ts | 13 | click: "CRITICAL WORKFLOW: get_html FIRST" |
+| interaction.ts | 71 | type: "PREREQUISITE: get_html FIRST" |
+| capture.ts | 12 | screenshot: "WHEN TO USE" con casos |
+| capture.ts | 70 | get_html: "CRITICAL ANALYSIS TOOL" obligatorio |
+| advanced-network.ts | 56 | enable_response_interception: "START HERE" con workflow |
+| advanced-network.ts | 156 | list_intercepted_responses: "STEP 2" con énfasis |
+| advanced-network.ts | 213 | modify_intercepted_response: "STEP 3" con ejemplo |
+
+---
+
+**Resultado esperado**: La IA debe seguir el workflow correcto en todos los casos y NUNCA decir que no encuentra una herramienta que existe.