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
2. CLI Claude Code installée

3. Node.js v18+ avec npm

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

5. (Optionnel) Extension Chrome
6. Téléchargez le dernier extension.zip depuis la page des releases.
7. Décompressez-le dans un emplacement permanent, par ex. ~/.dev-browser-extension.
8. Chargez le dossier non empaqueté dans la page d'extensions de Chrome avec le mode développeur activé.
9. Activez l'extension et demandez à Claude de "se connecter à mon Chrome".
10. Exécuter une interaction exemple

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