Capítulo 5: Claude in Chrome

Claude in Chrome permite controlar el navegador directamente desde Claude Code, abriendo posibilidades de automatización web.

Objetivos del Capítulo

• Instalar y configurar Claude in Chrome
• Controlar el navegador desde Claude Code
• Automatizar tareas web
• Debugging y scraping responsable

¿Qué es Claude in Chrome?

Claude in Chrome es una extensión que conecta Claude Code con el navegador Chrome, permitiendo:

• Navegar a URLs
• Interactuar con elementos de la página
• Tomar screenshots
• Llenar formularios
• Extraer información

Instalación

1. Instalar la Extensión

# La extensión se instala desde Chrome Web Store
# Busca "Claude in Chrome" o accede desde Claude Code

2. Conectar con Claude Code

# Claude Code detecta automáticamente la extensión
claude
> Abre Chrome y navega a google.com

Verificar Conexión

claude
> ¿Está Chrome conectado?

Herramientas Disponibles

Claude in Chrome proporciona varias herramientas MCP:

Herramienta	Descripción
browser_navigate	Navegar a URL
browser_click	Click en elemento
browser_type	Escribir texto
browser_snapshot	Capturar estado de página
browser_screenshot	Tomar screenshot
browser_evaluate	Ejecutar JavaScript
browser_fill_form	Llenar formularios

Uso Básico

Navegación

claude
> Navega a github.com
> Abre la página de repositorios trending

Interacción con Elementos

claude
> Haz click en el botón "Sign in"
> Escribe "mi-usuario" en el campo de email

Screenshots

claude
> Toma un screenshot de la página actual
> Captura solo el elemento del header

Automatización de Tareas

Llenar Formularios

claude
> Ve a la página de contacto de mi-sitio.com
> Llena el formulario con:
>   - Nombre: Juan Pérez
>   - Email: [email protected]
>   - Mensaje: Consulta sobre servicios
> No envíes el formulario, solo muéstrame el preview

Web Scraping Responsable

claude
> Navega a mi-api-docs.com/endpoints
> Extrae la lista de endpoints disponibles
> Genera documentación en formato Markdown

Testing Visual

claude
> Abre mi app en localhost:3000
> Navega por todas las páginas principales
> Toma screenshots y reporta problemas visuales

Snapshot vs Screenshot

browser_snapshot

Captura el estado accesible de la página (mejor para acciones):

claude
> Toma un snapshot de la página
# Devuelve estructura de elementos interactuables

browser_screenshot

Captura imagen visual (mejor para análisis visual):

claude
> Toma un screenshot de la página
# Devuelve imagen PNG

JavaScript en el Navegador

claude
> Ejecuta este JavaScript en la página:
> document.querySelectorAll('a').length

Ejemplos de Evaluación

claude
> ¿Cuántos elementos hay en la página?
> ¿Cuál es el título de la página?
> Lista todos los links externos

Casos de Uso

1. Testing de UI

claude
> Abre mi app en localhost:3000
> Haz login con usuario [email protected]
> Navega al dashboard
> Verifica que todos los widgets cargan
> Reporta cualquier error de consola

2. Monitoreo de Sitios

claude
> Navega a status.miservicio.com
> Verifica que todos los servicios están "operational"
> Si hay algún problema, dame los detalles

3. Documentación de UI

claude
> Abre la app en diferentes páginas
> Toma screenshots de cada sección
> Genera documentación visual del flujo de usuario

4. Debugging Visual

claude
> Hay un bug reportado en la página de checkout
> Navega al checkout con un producto en el carrito
> Identifica problemas visuales o de layout

Configuración Avanzada

Permisos para Chrome

{
  "permissions": {
    "allow": [
      "mcp__chrome__browser_navigate",
      "mcp__chrome__browser_snapshot",
      "mcp__chrome__browser_screenshot"
    ],
    "deny": [
      "mcp__chrome__browser_evaluate"
    ]
  }
}

Limitaciones de Seguridad

Claude in Chrome tiene restricciones de seguridad:

• No puede acceder a páginas de otros dominios sin permiso
• No puede interactuar con inputs de password
• No puede ejecutar JavaScript malicioso
• Requiere confirmación para acciones sensibles

Debugging

Ver Consola del Navegador

claude
> Muéstrame los errores de consola de la página actual

Network Requests

claude
> Lista las peticiones de red fallidas

Integración con Workflows

Skill para Testing

---
name: test-ui
description: Test visual de la aplicación
tools:
  - mcp__chrome__browser_navigate
  - mcp__chrome__browser_snapshot
  - mcp__chrome__browser_screenshot
---

Ejecuta tests visuales:
1. Navega a cada ruta principal
2. Toma snapshots
3. Verifica que no hay errores de consola
4. Reporta problemas encontrados

Automatización de QA

claude
> /test-ui http://localhost:3000

Troubleshooting

Extensión no Detectada

# Verificar que la extensión está instalada y activa
# Reiniciar Claude Code
claude
> ¿Chrome está conectado?

Problemas de Conexión en WSL

# Para WSL, puede necesitar configuración adicional
# La extensión CloudDE ayuda con WSL

Timeouts

# Si las páginas tardan en cargar
claude
> Espera 5 segundos y luego toma el screenshot

Resumen

En este capítulo aprendiste:

• Instalar y conectar Claude in Chrome
• Las herramientas disponibles para control del navegador
• Automatizar tareas web comunes
• Casos de uso para testing y documentación
• Consideraciones de seguridad

Próximo Capítulo

En el siguiente capítulo exploraremos Background Agents y Sesiones:

• Sesiones nombradas
• Background agents
• Teleport Web-CLI

Siguiente: Capítulo 6 - Background Agents y Sesiones →