Manuscript – una extensión de navegador para crear demos y manuales web que no se rompen aunque cambie la página

Es una extensión de navegador para crear demos paso a paso, manuales y guías de onboarding sobre páginas web (Chrome y Edge). Puedes señalar con un clic los elementos que quieres destacar y superponerles spotlight, notas y flechas dibujadas a mano para luego reproducirlo.

Al crearla, me enfoqué en dos cosas. Las herramientas existentes se rompen cuando la página cambia aunque sea un poco, y además el resultado queda atrapado en la nube, lo que dificulta el control de versiones. Quise resolver ambas de una manera distinta.

Qué la hace diferente

• Cuesta mucho que se rompa. Recuerda el elemento de cada paso en tres capas — atributos estables (data-testid, id, aria-label) → texto y estructura alrededor → coordenadas y texto adyacente. Si una falla, hace fallback a la siguiente capa.
• El resultado es un solo archivo JSON. Se puede hacer commit en git, revisar el diff en un PR y gestionarlo junto al código. Sin lock-in de nube.
• No toca el código del sitio objetivo. La extensión funciona solo dentro del navegador, así que se puede crear sobre tu producto, el de un cliente o cualquier SaaS externo.

También incluye guía por voz (TTS), ventana de presentador, grabación de pantalla y una función para compartir escenarios mediante un repositorio de GitHub.

• Tienda: https://chromewebstore.google.com/detail/manuscript/…
• Introducción: https://zendy00.github.io/manuscript-pages/