Manuscript – Browser-Erweiterung zum Erstellen von Web-Demos und Handbüchern, die auch bei Seitenänderungen nicht kaputtgehen

Eine Browser-Erweiterung zum Erstellen von Schritt-für-Schritt-Demos, Handbüchern und Onboarding-Guides direkt auf Webseiten (Chrome·Edge). Per Klick wählt man die hervorzuhebenden Elemente aus, legt Spotlight, Notizen und handgezeichnete Pfeile darüber und spielt das Ganze ab.

Bei der Entwicklung standen zwei Dinge im Fokus. Bestehende Tools gehen schnell kaputt, wenn sich eine Seite auch nur leicht verändert, und die Ergebnisse landen in der Cloud, was Versionsverwaltung erschwert. Diese beiden Probleme wollte ich anders lösen.

Das ist anders

• Geht nur selten kaputt. Die Erweiterung merkt sich das Element jedes Schritts in drei Ebenen — stabile Attribute (data-testid·id·aria-label) → Text·umliegende Struktur → Koordinaten·benachbarter Text. Wenn eine Ebene nicht mehr passt, erfolgt ein Fallback auf die nächste.
• Das Ergebnis ist eine einzige JSON-Datei. Man kann sie in git committen, Diffs per PR prüfen und direkt neben dem Code verwalten. Kein Cloud-Lock-in.
• Der Code der Zielseite bleibt unberührt. Die Erweiterung läuft nur im Browser, daher kann man sie für das eigene Produkt, Kundenseiten oder externe SaaS überall einsetzen.

Es gibt außerdem Vorlesefunktion (TTS), ein Presenter-Fenster, Bildschirmaufnahme und die Möglichkeit, Szenarien über ein GitHub-Repo zu teilen.

• Store: https://chromewebstore.google.com/detail/manuscript/…
• Einführung: https://zendy00.github.io/manuscript-pages/