VS Code prépare les plans, Chrome les filme

Notre planificateur lit une page en ligne et propose des films. Il ne peut pas savoir qu'une fonctionnalité est arrivée hier, ni qu'un filtre est la partie que les gens adorent. Claude Code, qui travaille dans votre éditeur avec votre dépôt ouvert, le peut : il lit l'historique, ouvre les routes et vérifie qu'une page existe vraiment avant de la nommer.

Notre extension VS Code repose donc sur un choix délibéré. Elle n'appelle jamais un modèle de son propre chef. Elle prépare une tâche précise et la confie à l'extension Claude Code déjà ouverte dans votre éditeur, et c'est vous qui appuyez sur Entrée. Votre connexion, votre contexte et le dernier mot restent les vôtres, et rien n'est jamais envoyé à votre place. Claude Code écrit un plan de capture dans le projet, et le panneau se met à jour dès que le fichier change.

La connexion se fait en un clic, sur le modèle de celle de drurls.com, notre produit frère. Le site n'accorde l'accès qu'après votre connexion et votre accord, vérifie strictement où il vous renvoie, et réutilise votre clé existante : connecter VS Code ne déconnecte jamais l'extension Chrome.

Jusqu'ici, l'enregistrement dans Chrome était toujours mené par une personne : vous bougiez la souris, notre curseur stylisé suivait. Pour rejouer un plan, l'extension pilote désormais la page elle-même. Son moteur de parcours fait glisser le curseur vers chaque cible sur une trajectoire adoucie et tape caractère par caractère, avec le même rythme naturel que nos films côté serveur.

Il est conçu pour les vrais sites :

• il passe les boîtes de dialogue au lieu de s'y arrêter ;
• quand un sélecteur rate, il retrouve l'élément par son libellé visible ;
• les clics envoient toute la séquence d'événements de pointeur, pour que les interfaces modernes réagissent ;
• il remarque quand un parcours sort du site, et donne à chaque étape sa propre limite de temps.

Deux règles du navigateur ont façonné le reste. L'enregistrement d'écran exige un vrai clic de votre part : un bouton Démarrer lance la session, puis le parcours se déroule seul. Et un chargement de page efface tout ce qui y a été placé : un parcours est donc découpé à chaque navigation, et le curseur revient après chacune.

La première version mélangeait les rôles : VS Code transformait lui-même des sorties de terminal et des différences de code en images, Chrome enregistrait des screencasts à part, et le champ censé relier les deux n'était pas encore utilisé. Aujourd'hui, nous avons tracé une ligne nette.

• VS Code écrit les parcours et ne capture rien. Un parcours, c'est une vraie adresse et des étapes scriptées, chacune avec un libellé qui la nomme comme une scène et une estimation de son temps à l'écran.
• Chrome enregistre. Un clic rejoue chaque parcours avec le curseur stylisé, puis capture chaque plan prévu qu'il peut atteindre, et signale les autres comme demandant une personne plutôt que de les ignorer.
• Chaque étape devient un média. À chaque étape, l'enregistreur garde la vue et les détails de la page, et marque où l'étape commence dans le clip. Un parcours entier arrive en un seul envoi : l'enregistrement et une image par étape.

Et vous pouvez l'installer dès aujourd'hui : l'extension VS Code se télécharge désormais sur sa propre page, à côté de celle pour Chrome, avec les étapes d'installation dans les quatre langues.

Avant de finaliser les consignes que suit Claude Code, nous avons lu comment l'extension de drurls.com écrit ses parcours et adopté trois règles qu'elle avait déjà éprouvées :

1. 1Naviguer en cliquant dans le site plutôt qu'en sautant d'une adresse à l'autre, car sauter prouve seulement que les pages existent.
2. 2Faire défiler jusqu'en bas, et non jusqu'à un nombre de pixels, puisqu'un assistant qui lit le code source ne peut pas connaître la hauteur réelle d'une page.
3. 3Ne jamais scripter une connexion par mot de passe : le navigateur d'enregistrement est déjà connecté en votre nom.

La jonction entre deux extensions dans deux environnements différents est l'endroit où les choses peuvent glisser : nous y avons placé des tests. Un test aller-retour fait passer un plan dans le vrai code, de son écriture aux vérifications de l'enregistreur, et confirme que chaque navigation et chaque défilement arrivent intacts. Un autre confirme que les actions permises à Claude Code sont exactement celles que l'enregistreur sait jouer. Un troisième vérifie que chaque élément dont dépend le panneau est bien présent dans sa page.

Si vous construisez un produit, votre meilleure démo est souvent la fonctionnalité livrée cette semaine, et personne ne la connaît mieux que votre code. Désormais, l'assistant qui connaît déjà votre code peut planifier le film, et le navigateur peut le tourner, étape par étape, avec un curseur qui bouge comme une main.

Le résultat : des images fidèles à ce que fait vraiment votre produit aujourd'hui, chaque étape nommée, minutée et prête à devenir une scène. Les deux extensions ont leur page : VS Code et Chrome.