AIBit-Découvrez des projets open source AIBit-Découvrez des projets open source

Dev Browser : Automatisation de navigateur avec état pour Claude Code

Apprenez comment Dev Browser transforme Claude Code en un outil puissant d’automatisation de navigateur. Gardez les pages persistantes entre les scripts, contrôle Chrome via une extension optionnelle et comparez ses performances et son coût aux solutions Playwright. Ce guide couvre l’installation, les fonctionnalités, les benchmarks et des cas d’utilisation concrets, afin que vous puissiez booster la productivité de vos agents sans encombre.

Dev Browser : Automatisation de navigateur avec état pour Claude Code

À mesure que les agents IA deviennent de plus en plus capables d'écrire du code, la prochaine étape logique consiste à leur donner la possibilité d'interagir avec des pages web réelles. Dev Browser est une compétence open‑source pour Claude Code qui fait exactement cela — tout en gardant l’état complet de votre navigateur actif entre les appels.

Pourquoi Dev Browser est important

  • Pages persistantes – Naviguez vers une page une fois et maintenez‑la en mémoire. Pas besoin de recharger le DOM à chaque script exécuté.
  • Exécution flexible – Exécutez un script complet d'un coup ou parcourez les actions étape par étape lorsqu'on explore.
  • Captures DOM optimisées pour les LLM – Représentations structurées et légères de la page que Claude peut analyser rapidement.
  • Extension Chrome – Contrôlez un profil Chrome existant pour exploiter les sessions connectées, les cookies et les extensions.

Ces fonctionnalités donnent aux agents Claude Code un avantage pratique pour les tests, l'extraction de données et les démonstrations interactives.

Guide de démarrage rapide

  1. Prérequis

    • CLI Claude Code installée
    • Node.js v18+ avec npm

  2. Installer la compétence

    # En utilisant la marketplace Claude Code
/plugin marketplace add sawyerhood/dev-browser
/plugin install dev-browser@sawyerhood/dev-browser

# Ou cloner le dépôt pour le développement 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. (Optionnel) Extension Chrome

    • Téléchargez le dernier extension.zip depuis la page des releases.
    • Décompressez-le dans un emplacement permanent, par ex. ~/.dev-browser-extension.
    • Chargez le dossier non empaqueté dans la page d'extensions de Chrome avec le mode développeur activé.
    • Activez l'extension et demandez à Claude de "se connecter à mon Chrome".

  4. Exécuter une interaction exemple

    Claude : Ouvrez https://example.com et prenez une capture d'écran.