Un tutoriel interactif vous guide à travers votre premier jeu de règles
Un nouvel utilisateur de l'extension a désormais droit à bien plus qu'un paragraphe d'introduction dans le manuel — un tutoriel interactif qui met en évidence les éléments d'interface tour à tour et vous accompagne pas à pas dans la création de votre premier projet. Il fonctionne aussi bien dans le panneau d'édition que directement sur la page que vous visitez, en huit langues, avec des extraits de code copiables. Voici ce que nous livrons dans la v3.1.
Deux moteurs, un seul objectif
Sous le capot, deux modules coopèrent. Le premier — lib/onboarding.js — s'exécute dans le panneau d'édition de JustZix, vous guide à travers l'arbre dossier → groupe → jeu de règles et explique la disposition des onglets CSS / JS / Actions. Le second — lib/onboarding-front.js — vit dans le content script, ce qui lui permet de mettre en évidence des éléments directement sur une page web ordinaire. Ensemble, ils couvrent toute l'histoire : du concept à une règle qui fonctionne.
Nous avons choisi la variante visuelle Glow — un halo lumineux autour de la cible, sans assombrir la page. C'est la différence avec un « spotlight » classique : vous continuez de voir toute la page et votre propre contenu ; la mise en évidence se contente d'indiquer où porter l'attention.
19 étapes : « Votre premier projet »
Le scénario par défaut vous guide à travers un exemple complet : la création d'un catalogue (un dossier pour des règles apparentées), l'ouverture du groupe « default », l'ajout d'un jeu de règles avec du CSS et du JS simples (qui modifient réellement la page), le branchement d'une barre d'actions et l'ajout d'une action bascule avec son propre code JS. Chaque étape comporte une cible mise en évidence ainsi qu'une bulle avec un titre, une courte description et une navigation « Précédent / Suivant ». Les étapes interactives (par exemple « cliquez sur le bouton Ajouter un jeu de règles ») n'avancent que lorsque l'action a été effectuée — impossible de les sauter à l'aveugle.
Les extraits de CSS et de JS qui apparaissent dans les bulles disposent d'un bouton Copier — collez-les directement dans l'éditeur, sans recopier. Une fois le scénario terminé, vous disposez dans votre arbre d'un jeu de règles complet et fonctionnel, à étendre par la suite.
Lanceur de tutoriels
Le tutoriel s'ouvre automatiquement au premier lancement de l'extension — sous la forme d'un lanceur (centre des tutoriels) à partir duquel vous choisissez un scénario. Vous y accédez ensuite depuis le menu des paramètres (Paramètres → « Tutoriel »). Ce même centre accueillera les prochains scénarios au fur et à mesure de leur ajout — quand un nouveau scénario sort, l'utilisateur le voit au même endroit, sans avoir à le chercher.
Huit langues, aucun emoji, la touche Échap
L'ensemble du moteur et du scénario est traduit en huit langues (PL, EN, DE, ES, FR, IT, RU, ZH) — le catalogue de textes complet réside dans lib/i18n.js sous les clés onboard.*. Les icônes proviennent uniquement du jeu JustZix (JZ_ICONS) : une icône cible pour le scénario, une flèche à l'intérieur de la bulle, une icône « Copier ». Aucun emoji, aucune police externe — l'interface reste cohérente avec le reste de l'extension.
La touche Esc ferme la bulle du tutoriel et le lanceur. Un clic en dehors de la bulle ou sur le bouton de fermeture la quitte également. La progression est enregistrée dans chrome.storage.local (jzOnboarding.frontCompleted) — si vous vous arrêtez à mi-parcours, le tutoriel ne réapparaîtra pas à chaque redémarrage.
La suite
Ce premier scénario n'est qu'un début. Le lanceur est prêt à en accueillir d'autres — nous prévoyons des parcours pour les fonctionnalités avancées : l'Assistant IA, les fenêtres TEMP, les actions slider / toggle3 et le panneau d'édition dans une fenêtre séparée via Ctrl+Alt+I. Envoyez-nous un mot via le formulaire de contact pour nous dire quel sujet vous aimeriez voir comme prochain tutoriel.
Voir aussi
- Injection de CSS et de JavaScript — ce que sont réellement les règles que vous créez dans le tutoriel
- Fenêtres sur la page — les fenêtres de développeur décrites
- JustZix vs. Tampermonkey — pourquoi une migration peut valoir le coup
Installez JustZix — votre premier projet prend moins de 15 minutes.
Notez cet article
Aucune note — soyez le premier.