Un tutorial interattivo ti guida nella creazione del tuo primo set di regole
Un nuovo utente dell'estensione ora riceve molto di più di un paragrafo introduttivo nel manuale — un tutorial interattivo che evidenzia a turno gli elementi dell'interfaccia e ti guida passo dopo passo nella creazione del tuo primo progetto. Funziona sia nel pannello di modifica sia direttamente sulla pagina che stai visitando, in otto lingue, con frammenti di codice copiabili. Ecco cosa abbiamo introdotto nella v3.1.
Due motori, un solo obiettivo
Sotto il cofano ci sono due moduli che cooperano. Il primo — lib/onboarding.js — gira nel pannello di modifica di JustZix, ti guida attraverso l'albero cartella → gruppo → set di regole e spiega l'organizzazione delle schede CSS / JS / Azioni. Il secondo — lib/onboarding-front.js — vive nel content script, quindi può evidenziare elementi direttamente su una normale pagina web. Insieme coprono l'intera storia: dal concetto a una regola funzionante.
Abbiamo scelto la variante visiva Glow — un anello luminoso intorno all'elemento bersaglio, senza oscurare la pagina. È la differenza rispetto a un classico overlay "spotlight": continui a vedere tutta la pagina e i tuoi contenuti; l'evidenziazione indica soltanto dove deve concentrarsi l'attenzione.
19 passi: "Il tuo primo progetto"
Lo scenario predefinito ti guida attraverso un esempio completo: la creazione di un catalogo (una cartella per regole correlate), l'apertura del gruppo "default", l'aggiunta di un set di regole con CSS e JS semplici (che modificano davvero la pagina), il collegamento di una barra delle azioni e l'aggiunta di un'azione toggle con il proprio codice JS. Ogni passo ha un bersaglio evidenziato più un fumetto con titolo, breve descrizione e navigazione "Indietro / Avanti". I passi interattivi (ad esempio "fai clic sul pulsante Aggiungi set di regole") avanzano solo dopo che l'azione è stata completata — non puoi saltarli alla cieca.
I frammenti CSS e JS che compaiono nei fumetti hanno un pulsante Copia — li incolli direttamente nell'editor, senza riscriverli. Una volta concluso lo scenario, hai un set di regole completo e funzionante nel tuo albero, pronto per essere esteso più avanti.
Launcher dei tutorial
Il tutorial si apre automaticamente al primo avvio dell'estensione — come launcher (centro dei tutorial) dal quale scegli uno scenario. In seguito ci arrivi dal menu delle impostazioni (Impostazioni → "Tutorial"). Lo stesso centro ospiterà i futuri scenari man mano che li aggiungeremo nel tempo — quando ne uscirà uno nuovo, l'utente lo troverà nello stesso posto, senza doverlo cercare.
Otto lingue, niente emoji, il tasto Esc
L'intero motore e lo scenario sono tradotti in otto lingue (PL, EN, DE, ES, FR, IT, RU, ZH) — il catalogo testuale completo si trova in lib/i18n.js sotto le chiavi onboard.*. Le icone provengono esclusivamente dal set di JustZix (JZ_ICONS): un'icona bersaglio per lo scenario, una freccia all'interno del fumetto, un'icona "Copia". Niente emoji, nessun font esterno — l'interfaccia resta coerente con il resto dell'estensione.
Il tasto Esc chiude il fumetto del tutorial e il launcher. Anche un clic fuori dal fumetto o sul pulsante di chiusura fa uscire. Il progresso viene salvato in chrome.storage.local (jzOnboarding.frontCompleted) — se ti fermi a metà, il tutorial non riapparirà a ogni riavvio.
Cosa arriva dopo
Il primo scenario è solo l'inizio. Il launcher è pronto per accoglierne altri — stiamo pianificando percorsi per le funzionalità avanzate: l'AI Helper, le finestre TEMP, le azioni slider / toggle3 e il pannello di modifica in una finestra separata con Ctrl+Alt+I. Mandaci un messaggio tramite il modulo di contatto dicendoci quale argomento vorresti vedere come prossimo tutorial.
Vedi anche
- Iniezione di CSS e JavaScript — cosa sono in realtà le regole che crei nel tutorial
- Finestre nella pagina — le finestre per sviluppatori descritte
- JustZix vs. Tampermonkey — perché vale la pena valutare una migrazione
Installa JustZix — il tuo primo progetto richiede meno di 15 minuti.
Valuta questo articolo
Nessuna valutazione — sii il primo.