AIBit-Descubre proyectos de código abierto AIBit-Descubre proyectos de código abierto

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

Descubre cómo Dev Browser convierte a Claude Code en una poderosa herramienta de automatización web. Permite que las páginas persistan entre scripts, controla Chrome mediante una extensión opcional y compáralo en velocidad y costo con las soluciones de Playwright. Esta guía cubre la instalación, las características, los benchmarks y casos de uso reales, asegurando que puedas aumentar la productividad de los agentes con la mínima complicación.

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

    • CLI de Claude Code instalado
    • Node.js v18+ con npm

  2. 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

  3. (Opcional) Extensión Chrome

    • Descarga el último extension.zip de la página de lanzamientos.
    • Descomprime en un lugar permanente, por ejemplo ~/.dev-browser-extension.
    • Carga la carpeta sin empaquetar en la página de extensiones de Chrome con el modo desarrollador activado.
    • Habilita la extensión y pide a Claude que “conecte a mi Chrome”.

  4. Ejecutar una interacción de muestra

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