Ein interaktives Tutorial führt Sie durch Ihr erstes Regelset
Ein neuer Nutzer der Erweiterung bekommt jetzt mehr als nur einen Einleitungsabsatz im Handbuch — ein interaktives Tutorial, das Schnittstellenelemente nacheinander hervorhebt und Sie Schritt für Schritt durch die Erstellung Ihres ersten Projekts führt. Es funktioniert sowohl im Bearbeitungspanel als auch direkt auf der besuchten Seite, in acht Sprachen, mit kopierbaren Codeschnipseln. Hier ist, was wir in v3.1 ausgeliefert haben.
Zwei Engines, ein Ziel
Unter der Haube arbeiten zwei kooperierende Module. Das erste — lib/onboarding.js — läuft im JustZix-Bearbeitungspanel, führt Sie durch den Baum Ordner → Gruppe → Regelset und erklärt das Layout der Tabs CSS / JS / Aktionen. Das zweite — lib/onboarding-front.js — sitzt im Content-Skript und kann daher Elemente direkt auf einer gewöhnlichen Webseite hervorheben. Zusammen decken sie die ganze Geschichte ab: vom Konzept bis zu einer funktionierenden Regel.
Wir haben die visuelle Variante Glow gewählt — ein leuchtender Ring um das Ziel, ohne die Seite abzudunkeln. Das ist der Unterschied zu einem typischen „Spotlight"-Overlay: Sie sehen weiterhin die ganze Seite und Ihre eigenen Inhalte; die Hervorhebung verweist nur darauf, wohin die Aufmerksamkeit gerichtet werden soll.
19 Schritte: „Ihr erstes Projekt"
Das Standardszenario führt Sie durch ein vollständiges Beispiel: das Anlegen eines Katalogs (ein Ordner für zusammengehörige Regeln), das Öffnen der Gruppe „default", das Hinzufügen eines Regelsets mit einfachem CSS und JS (die die Seite wirklich verändern), das Verdrahten einer Aktionsleiste und das Hinzufügen einer Toggle-Aktion mit eigenem JS-Code. Jeder Schritt hat ein hervorgehobenes Ziel sowie eine Sprechblase mit Titel, kurzer Beschreibung und der Navigation „Zurück / Weiter" (Back / Next). Interaktive Schritte (z. B. „auf die Schaltfläche Regelset hinzufügen klicken") rücken erst dann vor, wenn die Aktion erledigt ist — Sie können sie nicht blind überspringen.
Die CSS- und JS-Schnipsel, die in den Sprechblasen erscheinen, tragen eine Kopieren-Schaltfläche (Copy) — fügen Sie sie direkt in den Editor ein, ohne sie abzutippen. Sobald Sie das Szenario abgeschlossen haben, haben Sie ein vollständiges, funktionierendes Regelset in Ihrem Baum, das Sie später erweitern können.
Tutorial-Launcher
Das Tutorial öffnet sich beim ersten Start der Erweiterung automatisch — als Launcher (Tutorial-Zentrale), aus dem Sie ein Szenario auswählen. Später erreichen Sie es über das Einstellungsmenü (Einstellungen → „Tutorial"). Dieselbe Zentrale wird kommende Szenarien beherbergen, sobald wir sie nach und nach hinzufügen — wenn ein neues erscheint, sieht der Nutzer es am selben Ort, ohne danach suchen zu müssen.
Acht Sprachen, keine Emoji, die Esc-Taste
Die gesamte Engine und das Szenario sind in acht Sprachen übersetzt (PL, EN, DE, ES, FR, IT, RU, ZH) — der vollständige Textkatalog liegt in lib/i18n.js unter den Schlüsseln onboard.*. Symbole stammen ausschließlich aus dem JustZix-Set (JZ_ICONS): ein Zielsymbol für das Szenario, ein Pfeil innerhalb der Sprechblase, ein „Kopieren"-Symbol. Keine Emoji, keine externen Schriftarten — die Oberfläche bleibt konsistent mit dem Rest der Erweiterung.
Die Taste Esc schließt die Tutorial-Sprechblase und den Launcher. Ein Klick außerhalb der Sprechblase oder auf die Schließen-Schaltfläche beendet das Tutorial ebenfalls. Der Fortschritt wird in chrome.storage.local (jzOnboarding.frontCompleted) gespeichert — wenn Sie auf halbem Weg aufhören, springt das Tutorial nicht bei jedem Neustart erneut auf.
Wie es weitergeht
Das erste Szenario ist erst der Anfang. Der Launcher ist bereit für mehr — wir planen Pfade für fortgeschrittene Funktionen: den KI-Helfer, TEMP-Fenster, Slider- / Toggle3-Aktionen und das Bearbeitungspanel in einem separaten Fenster unter Ctrl+Alt+I. Schicken Sie uns über das Kontaktformular eine Nachricht und sagen Sie uns, welches Thema Sie als nächstes Tutorial sehen möchten.
Siehe auch
- CSS- und JavaScript-Injektion — was die Regeln, die Sie im Tutorial erstellen, tatsächlich sind
- Fenster auf der Seite — die beschriebenen Entwicklerfenster
- JustZix vs. Tampermonkey — warum eine Migration eine Überlegung wert sein kann
JustZix installieren — Ihr erstes Projekt dauert weniger als 15 Minuten.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.