Manuscript – une extension de navigateur pour créer des démos et manuels web qui ne cassent pas quand la page change

Une extension de navigateur qui permet de créer, directement sur une page web, des démos étape par étape, des manuels et des guides d’onboarding (Chrome·Edge). Il suffit de cliquer sur les éléments à mettre en avant pour y superposer un projecteur, des notes et des flèches dessinées à la main, puis de lancer la lecture.

Lors de la conception, je me suis concentré sur deux points. Les outils existants cassent dès que la page change un peu, et leurs résultats restent enfermés dans le cloud, ce qui complique le versioning. Je voulais résoudre ces deux problèmes autrement.

Ce qui change

• Ça casse rarement. Chaque élément d’une étape est mémorisé sur 3 niveaux — attributs stables (data-testid·id·aria-label) → texte et structure environnante → coordonnées et texte adjacent. Si un niveau ne correspond plus, on bascule sur le suivant.
• Le résultat tient dans un seul fichier JSON. On peut le commit dans git, revoir les diff en PR, et le gérer à côté du code. Aucun lock-in cloud.
• Aucune modification du code du site cible. L’extension fonctionne uniquement dans le navigateur, ce qui permet de créer des guides pour votre produit, pour des clients ou pour n’importe quel SaaS externe.

Il y a aussi un guidage vocal (TTS), une fenêtre présentateur, l’enregistrement d’écran et une fonction de partage de scénarios via un dépôt GitHub.

• Store : https://chromewebstore.google.com/detail/manuscript/…
• Présentation : https://zendy00.github.io/manuscript-pages/