Notre extension Chrome devient un studio de capture

La première version de l'extension avait un seul rôle : nous permettre de filmer une page derrière votre connexion, avec votre propre session de navigateur. Utile, mais limité. Aujourd'hui, elle devient un panneau de capture complet, adapté de l'extension de capture de drurls.com, notre produit frère, avec tous ses comportements conservés.

Ouvrez-la à côté de n'importe quel onglet et vous obtenez :

• Un enregistreur de screencast avec un curseur stylisé, un point, un anneau ou un projecteur à votre couleur, avec des ondes au clic et un suivi fluide.
• Des captures de page entière, assemblées au fil du défilement, et un sélecteur d'élément qui recadre la capture sur un seul élément et garde son style exact.
• Un kit de marque : les couleurs de la page pondérées par la place qu'elles occupent, ses polices, ses arrondis, ses styles de boutons et son logo.
• Un raccourci vers un nouveau film qui ouvre /new avec l'adresse de l'onglet et un brief créatif déjà rempli.

Une capture n'a de valeur que si vous la retrouvez. Chacune part désormais dans votre médiathèque PageToVid : les captures d'écran en images, les screencasts convertis en MP4 standard lisible partout, les kits de marque enregistrés comme données réutilisables.

Nous avons aussi changé ce que la médiathèque affiche en premier. Elle s'ouvrait sur l'onglet partagé, alors qu'une nouvelle capture reste privée tant que vous ne choisissez pas de la partager. Vos propres médias sont désormais la vue par défaut : la capture que vous venez de faire est la première chose que vous voyez.

L'extension, la médiathèque et l'éditeur se comportent maintenant comme un seul lieu : vous capturez dans Chrome, vous ouvrez PageToVid, et les images sont là.

Nous voulions que chaque capture arrive, à chaque fois, et cela demandait de comprendre comment un navigateur traite une extension.

Votre connexion à PageToVid vit dans un cookie protégé par une règle appelée SameSite. Le navigateur ne l'envoie qu'avec les requêtes venant de notre propre site, ou quand vous venez directement chez nous. C'est une bonne protection, avec une conséquence facile à manquer : pour le navigateur, une extension Chrome est un autre site, quelles que soient ses permissions. Ses requêtes ne portent pas votre connexion d'elles-mêmes.

L'extension la porte donc explicitement. Elle lit votre session grâce aux outils d'extension du navigateur et l'envoie avec chaque requête, de façon standard, dans un en-tête. De notre côté, la bibliothèque de connexion que nous utilisons déjà comprend cet en-tête aussi naturellement que le cookie, et le vérifie exactement de la même manière. Pas de nouveau type d'identifiant, pas de nouveau secret : un petit utilitaire, userFromRequest, partagé par les routes des captures, des sites et de la connexion.

Nos serveurs sont placés derrière un répartiteur de charge qui gère la connexion sécurisée : l'application elle-même voit un trafic interne ordinaire. Or la façon dont la bibliothèque de connexion lit une session dépend du caractère sécurisé de la connexion, et ce relais interne peut faire paraître autrement un appel pourtant sécurisé.

Plutôt que deviner, le serveur essaie désormais simplement les deux façons de lire la session. Cela ne coûte presque rien, n'échoue jamais bruyamment, et ne dépend d'aucun détail de la manière dont le trafic est relayé.

Nous l'avons vérifié de bout en bout, comme l'extension fonctionne vraiment : créer une vraie session, envoyer une capture avec elle depuis l'extérieur, et confirmer qu'elle arrive dans la bonne médiathèque. Une session d'une autre origine est refusée, comme il se doit.

Avec l'extension qui alimente la médiathèque, nous avons rangé la navigation du site. L'en-tête des comptes connectés alignait sept liens, c'était trop. Il affiche maintenant les cinq que vous utilisez chaque jour : Tableau de bord, Sites, Éditeur, Médiathèque et Animations. Tarifs et Ressources sont passés dans le menu du compte, et les boutons de thème et de langue forment leur propre groupe.

Le résultat est une boucle simple : vous repérez quelque chose dans votre navigateur, vous le capturez depuis le panneau latéral, et vous le retrouvez à un clic quand vous construisez votre prochain film. L'extension a sa propre page, PageToVid pour Chrome, avec tout ce qu'elle sait faire.