Dev Browser: Automación de Navegadores con Estado para Claude Code

A medida que los agentes de IA adquieren cada vez más capacidad para escribir código, el siguiente paso lógico es dotarlos de la posibilidad de interactuar con páginas web reales. Dev Browser es una habilidad de código abierto para Claude Code que hace exactamente eso—mientras mantiene todo el estado de tu navegador vivo entre llamadas.

Por Qué Importa Dev Browser

• Páginas persistentes – Navega a una página una sola vez y mantenla en la memoria. No es necesario recargar el DOM en cada script que ejecutes.
• Ejecución flexible – Puedes ejecutar un guion completo de una vez o avanzar paso a paso cuando estás explorando.
• Instantáneas DOM amigables con LLM – Representaciones estructuradas y ligeras de la página que Claude puede analizar rápidamente.
• Extensión Chrome – Controla un perfil de Chrome existente para aprovechar sesiones iniciadas, cookies y extensiones.

Estas características dan a los agentes de Claude Code una ventaja práctica para pruebas, extracción de datos y demostraciones interactivas.

Guía de Inicio Rápido

1. Requisitos previos
2. CLI de Claude Code instalado

3. Node.js v18+ con npm

4. Instalar la Habilidad

   # Usando el marketplace de Claude Code
   /plugin marketplace add sawyerhood/dev-browser
   /plugin install dev-browser@sawyerhood/dev-browser
   
   # O clonar el repositorio para desarrollo local
   SKILLS_DIR=~/.claude/skills   # Amp
   # SKILLS_DIR=~/.codex/skills # Codex
   mkdir -p $SKILLS_DIR
   git clone https://github.com/sawyerhood/dev-browser /tmp/dev-browser-skill
   cp -r /tmp/dev-browser-skill/skills/dev-browser $SKILLS_DIR/dev-browser
   rm -rf /tmp/dev-browser-skill
   

5. (Opcional) Extensión Chrome
6. Descarga el último extension.zip de la página de lanzamientos.
7. Descomprime en un lugar permanente, por ejemplo ~/.dev-browser-extension.
8. Carga la carpeta sin empaquetar en la página de extensiones de Chrome con el modo desarrollador activado.
9. Habilita la extensión y pide a Claude que “conecte a mi Chrome”.
10. Ejecutar una interacción de muestra

    Claude: Open https://example.com and take a screenshot.