Contrôle navigateur via la ligne de commande.
Edge dédié à l'IA — Chrome reste votre espace humain.
Un outil CLI qui permet à n'importe quel agent — Claude Code, GPT, Cursor, ou un script shell — de piloter un navigateur via des commandes. Chez nous : Edge pour l'IA, Chrome pour l'humain.
Pas lié à un fournisseur IA. Ce sont juste des commandes CLI utilisables par n'importe quel outil.
Pas de serveur MCP/relay. Extension + native host sur Edge, puis surf <cmd> et c'est parti.
Basé sur l'arbre d'accessibilité avec des locators locate.role, locate.text, locate.label.
Options --depth et --compact pour réduire le bruit. Screenshots redimensionnés par défaut.
Interceptez XHR/fetch, filtrez par domaine, et générez des commandes curl reproductibles.
Test responsive sur iPhone, Pixel, iPad. Émulation réseau 3G, throttling CPU, géolocalisation.
Séparation claire des contextes pour ne jamais être perturbé :
Surf CLI tourne ici. Dédié aux agents, scripts, Claude Code. Session isolée, aucun cookie perso.
Votre navigation habituelle. Aucune extension Surf, aucun agent. Votre espace reste intact.
Trois composants qui communiquent pour vous donner le contrôle total d'Edge.
surfVos commandes
Pont système
Chargée dans Edge
Arbre d'accessibilité
Les interactions passent par l'arbre d'accessibilité avec des références stables (e1, e2…) et des locators sémantiques — bien plus fiable que les sélecteurs CSS.
5 étapes pour être opérationnel. Pré-requis : Node.js et Microsoft Edge (navigateur IA dédié chez BNB).
Ouvrir edge://extensions → Activer Developer mode → Load unpacked → Coller le chemin.
L'extension ID se trouve dans edge://extensions.
Les commandes les plus utilisées. La référence complète (80+ commandes) est dans commands-reference.md sur Git.
| surf go "<url>" | Naviguer vers une URL |
| surf back / forward | Historique navigateur |
| surf tab.reload --hard | Hard refresh |
| surf page.state | État courant (modals, loading…) |
| surf read --depth 3 --compact | Arbre d'accessibilité réduit, LLM-friendly |
| surf page.text | Texte brut uniquement |
| surf search "<terme>" | Recherche dans la page |
| surf locate.role button --name "…" --action click | Par rôle ARIA |
| surf locate.text "…" --action click | Par contenu textuel |
| surf locate.label "…" --action fill --value "…" | Par label de champ |
| surf click eN | Cliquer par ref |
| surf type "…" --submit | Taper et soumettre |
| surf form.fill | Remplir plusieurs champs en batch |
| surf select eN "valeur" | Dropdown |
| surf network --urls | URLs capturées |
| surf network --origin <dom> --format curl | Curl filtré par domaine |
| surf network.curl <id> | Curl d'une requête spécifique |
| surf network.origins | Domaines contactés + stats |
| surf emulate.device "iPhone 14" | Émuler un device mobile |
| surf emulate.network "3g" | Conditions réseau dégradées |
| surf perf.start / perf.stop | Trace de performance |
| surf console | Messages console du navigateur |
| surf window.new "<url>" | Nouvelle fenêtre isolée |
| surf frame.list / frame.switch | Gérer les iframes |
| surf wait.network / wait.element | Attentes intelligentes |
| surf snap --annotate | Screenshot annoté |
Chaque cas d'usage est documenté en détail dans le skill. Voici la vue d'ensemble.
Rejouer un parcours utilisateur, capturer screenshot annoté, logs console, état du DOM. Livrable : étapes précises + hypothèse.
Inspecter styles calculés, comparer desktop vs mobile via émulation. Pas besoin d'ouvrir le DevTools.
Capturer les appels XHR/fetch, filtrer par domaine, générer des curl reproductibles. Idéal pour debug ou bootstrap Postman.
Automatiser sans sélecteurs CSS fragiles. Rôle ARIA, texte visible, label de champ — résiste aux changements de markup.
Tester iPhone, Pixel, iPad, conditions 3G, throttling CPU. Screenshots comparatifs par breakpoint.
Vérifier qu'une liste d'URLs est accessible post-déploiement. Détecter erreurs console et éléments manquants.
Remplir des formulaires via labels, gérer dropdowns, checkboxes, uploads. form.fill pour le batch.
Utiliser ChatGPT/Gemini/Perplexity/Grok via sessions connectées. Sans API key. Attention : confidentialité.
/surfLe plus simple : /surf suivi d'une description en langage naturel de ce que vous voulez faire dans le navigateur.
/surfLe skill encapsule les bonnes pratiques, les playbooks, et les 8 use cases documentés. Il est versionné dans notre repo Git.
git.bnb.re/jgaulin/claude-clode-env/.../skills/surfsurf — invoqué via /surf dans Claude Code--auto-capture, --soft-fail)window.new → page.state → read --compactlocate.role / locate.label → key Enterread → element.styles eNnetwork --urls → network --origin … --format curlRègles à suivre pour un usage sûr et efficace en équipe.
Surf tourne exclusivement sur Edge. Chrome reste votre espace humain, sans extension ni agent.
Systématiquement surf window.new pour ne pas perturber votre travail.
--depth 3 --compact par défaut. Montez la profondeur seulement si besoin.
La capture réseau peut exposer des tokens. Ne les collez jamais dans un ticket public ou un commit.
Utilisez --auto-capture pour le debug automatique et --soft-fail pour les commandes non critiques.
Au début, utilisez Surf en binôme (1 pilote / 1 observe) pour monter en compétence.
Les problèmes les plus courants et leurs solutions rapides.
surf tab.list ne voit rienVérifiez que l'extension est chargée dans edge://extensions, que surf install <extension-id> --browser edge a été exécuté, puis redémarrez Edge. Le native host nécessite un restart complet.
Utilisez surf read --depth 2 --compact. Si vous n'avez besoin que du texte visible, surf page.text est votre meilleur allié.
Les refs changent selon le frame actif. Refaites surf read, puis vérifiez avec surf frame.list. Si l'élément est dans un iframe, faites surf frame.switch --index N.
Vérifiez surf health et que Edge est au premier plan. Le native host peut perdre la connexion si le navigateur a été minimisé trop longtemps.
surf uninstall pour Edge, ou surf uninstall --all pour tous les navigateurs. Retirez ensuite l'extension depuis edge://extensions.