JustZix — manuale d'uso

Iniezione di stili CSS personalizzati, codice JavaScript e pulsanti azione su qualsiasi pagina

Concetto e termini principali

JustZix consente di iniettare automaticamente CSS e JavaScript personalizzati su pagine selezionate, oltre a definire pulsanti azione (scorciatoie che eseguono frammenti di codice su richiesta).

Gerarchia dei dati

Pattern URL a livello di set e gruppo

Ogni set e ogni gruppo può ricevere un proprio elenco di pattern URL aggiuntivi (chip-input). Quando l'elenco è vuoto — l'elemento funziona ovunque corrisponda il pattern della cartella. Se imposti ad es. https://justzix.com/admin/* — l'elemento funzionerà solo sulle sottopagine dell'admin.

Tutorial — introduzione interattiva

Per i nuovi utenti JustZix include un tutorial interattivo che ti guida passo dopo passo nella creazione di una soluzione completa — da una cartella, passando per un gruppo e un set di regole, fino al codice CSS/JS e un pulsante azione. I suggerimenti appaiono come fumetti accanto agli elementi successivi del pannello.

Come avviarlo:

• Automaticamente — alla prima apertura del pannello, quando non hai ancora nessuna cartella.
• Manualmente — in qualsiasi momento dal menu delle impostazioni → Tutorial.

Nella finestra «Centro tutorial» scegli un tutorial e clicchi Inizia. Durante il tutorial:

• I pulsanti Indietro e Avanti spostano tra i passi; la barra in fondo al fumetto mostra l'avanzamento.
• Alcuni passi aspettano che tu esegua l'azione indicata — es. cliccare il pulsante evidenziato.
• I passi con codice di esempio hanno un pulsante Copia.
• Il tasto Esc o il pulsante × chiude il tutorial in qualsiasi momento.

Interfaccia e navigazione

Modalità di modifica

Accesso tramite clic destro sull'icona dell'estensione → "Opzioni", oppure clic sull'icona → pulsante "Pannello di modifica".

• Logo in cima alla sidebar — il logotipo completo justzix (simbolo + wordmark Inter). Cambia automaticamente tra la variante light e dark in base alla modalità dell'applicazione (SVG inline + CSS variables, senza sostituzione del file). Il clic sul logo apre il Pannello.
• Sezione "Cartelle" — sotto il logotipo: etichetta "CARTELLE" + pulsante per aggiungere una cartella, ricerca, filtro "Solo attive".
• Albero delle cartelle — cartella ▶ gruppo ▶ set. La freccia di espansione fa da toggle. Il clic su un set passa alla modifica del solo quel set.
• Menu Impostazioni (drop-up in fondo alla sidebar) — un singolo pulsante che apre un pannello con le opzioni: Modalità scura, Manuale d'uso, Esporta impostazioni, Importa impostazioni, Importa da URL, Sincronizzazione cloud, I miei share, AI Helper, Sito del progetto, scelta della lingua, indicatore di Storage quota e numero di versione dell'estensione. Si chiude con Esc o con un clic fuori dal pannello.
• Barra della cartella — etichetta del pulsante (3 lettere), colore, nome, pattern URL, opzioni del pannello azioni, esportazione/importazione, eliminazione.
• Schede dei set — ognuna con 3 schede: CSS JavaScript Azioni.
• Barra breadcrumb — nell'editor di cartella, gruppo e set mostra il percorso di navigazione; all'estrema sinistra c'è l'icona „casa" — un rapido ritorno al Pannello.
• Ridimensionamento dell'editor — la barra sotto ogni editor (CSS e JS) può essere trascinata verso il basso per ingrandire l'area di lavoro.
• Toggle della sidebar — una barra verticale tra la sidebar e l'editor nasconde il pannello sinistro per avere più spazio.

Pulsante flottante (sulle pagine corrispondenti)

Un piccolo pulsante rotondo appare automaticamente sulle pagine che corrispondono a una qualsiasi cartella. Per impostazione predefinita mostra la scritta ZIX, ma ogni cartella può avere la propria etichetta.

Etichetta della cartella: nella barra della cartella, all'estrema sinistra (accanto al color picker) c'è un campo di testo per l'etichetta del pulsante. Limiti imposti: max 3 caratteri, sempre MAIUSCOLO (la conversione in maiuscolo avviene immediatamente durante la digitazione). Il campo accetta lettere e cifre — esempi: ZIX, QA, DEV, ADM, X. Con più cartelle corrispondenti viene presa l'etichetta della prima che ne ha una impostata; le altre vengono ignorate (campo vuoto = fallback a ZIX).

Stato indicato dal colore (palette del brand):

• Inject Green (o colore della cartella se impostato) — tutte le cartelle corrispondenti sono abilitate
• Syntax Orange (o colore della cartella attenuato) — alcune abilitate, altre disabilitate
• Muted Gray — tutte disabilitate
• Halt Red (con opacity 0.7) — estensione disabilitata globalmente

Colore della cartella: se imposti il color picker accanto a una cartella, il pulsante flottante sulle pagine corrispondenti assumerà quel colore. Gli stati "mixed" e "off" modulano automaticamente la saturazione. Con più cartelle corrispondenti viene preso il colore della prima con un colore impostato.

Pannello

All'accesso al pannello di modifica l'estensione apre il Pannello — la pagina iniziale con un riepilogo della libreria e scorciatoie rapide. In precedenza il pannello selezionava automaticamente la prima cartella dell'elenco; ora vedi invece una panoramica.

Il Pannello è raggiungibile con il clic sul logo nella sidebar e con l'icona "casa" sulla barra breadcrumb di ogni editor (cartella, gruppo, set). Anche l'intestazione del Pannello stesso ha un'icona "casa" — il suo clic aggiorna i dati (ricarica la libreria dallo storage e ricostruisce il Pannello).

Il Pannello ha un layout con righe fisse di schede:

• Libreria — inventario: numero di cartelle, gruppi, set, azioni, barre di azioni, finestre sul front-end nonché set con CSS e set con JS.
• Statistiche d'uso — contatori effettivi: clic sulle azioni, applicazioni CSS, esecuzioni JS e visualizzazioni di finestre. I valori sono sommati da tutti i dispositivi accoppiati (tramite la sincronizzazione cloud).
• Set modificati di recente — elenco fino a 6 set più recenti (ordinati per data di modifica); il clic apre il set nell'editor.
• Suggerimento — un consiglio casuale tratto dal manuale; il pool conta 30 suggerimenti, tra cui ci si sposta con i pulsanti „precedente" / „successivo". Accanto c'è un link al manuale completo.
• Ultimi esempi — gli esempi più recenti dalla libreria di justzix.com (con categoria e data di aggiunta).
• Dal blog — gli articoli più recenti del blog dal sito del progetto.
• Stato dell'estensione — una riga di tre schede: versione installata (con l'informazione se ne è disponibile una più recente), utilizzo della memoria chrome.storage.local e data dell'ultimo backup cloud.

Le schede „Ultimi esempi" e „Dal blog" recuperano il contenuto dal sito del progetto; quando l'endpoint non è disponibile (es. offline), entrambe le schede vengono nascoste. La versione dell'estensione viene verificata di nuovo a ogni accesso al pannello.

Albero delle cartelle (sidebar)

Il pannello sinistro in modalità di modifica mostra le cartelle in una gerarchia — è possibile espandere ogni cartella per vederne i set e passare alla modifica di uno specifico set.

Navigazione

Riordino (drag & drop)

Passa il mouse su una cartella, un gruppo o un set — sul lato sinistro apparirà una maniglia drag&drop. Afferra con il mouse e trascina:

Cartelle

• Cartella → cartella — cambio dell'ordine (una linea blu mostra il punto di inserimento: sopra o sotto l'elemento)

Gruppi

• Gruppo → gruppo (stessa cartella) — cambio dell'ordine nella cartella
• Gruppo → gruppo (altra cartella) — spostamento del gruppo tra cartelle
• Gruppo → nome della cartella — spostamento del gruppo alla fine della cartella di destinazione

Set

• Set → set (stesso gruppo) — cambio dell'ordine all'interno del gruppo
• Set → set (altro gruppo) — spostamento del set tra gruppi mantenendo la posizione
• Set → nome del gruppo — spostamento del set alla fine del gruppo di destinazione
• Set → nome della cartella — spostamento del set nel primo gruppo della cartella (quando la cartella ha più gruppi)

Toggle della sidebar

Una barra verticale tra la sidebar e l'editor nasconde il pannello sinistro — utile quando hai bisogno di più spazio per l'editor. Lo stato viene memorizzato tra le sessioni. Dopo aver mostrato/nascosto, CodeMirror aggiorna automaticamente la propria larghezza.

Ridimensionamento degli editor

Sotto ogni editor (CSS, JS, codice dell'azione) c'è una barra orizzontale con una maniglia da trascinare verticalmente. Afferra con il mouse e tira verso il basso per ingrandire l'editor. Altezza minima 80px, massima illimitata — la pagina scorre naturalmente con il contenuto.

Ricerca negli editor di codice

Sopra ogni editor di codice CodeMirror — CSS e JavaScript nella scheda del set e „Codice JS" nell'editor dell'azione — si trova una barra di ricerca: un campo di testo e un pulsante con l'icona della lente.

• Dopo aver avviato la ricerca, tutti i frammenti trovati vengono evidenziati — la corrispondenza corrente in giallo (testo nero), le altre in blu (testo bianco).
• Accanto al campo appare un contatore delle corrispondenze nel formato n / totale.
• Quando le corrispondenze sono più di una, appaiono le frecce ▲ ▼ per spostarsi tra i risultati. La corrispondenza corrente viene scorsa fino a essere visibile.
• La modifica del codice invalida i risultati — occorre cercare di nuovo.

Scorciatoie

Pattern URL

Il pattern URL definisce su quali pagine la cartella si attiva.

Stati dei set (Attivo / Abilitato)

Ogni set ha due flag indipendenti:

Cascata degli interruttori

Toggle della cartella  →  cambia enabled di tutte le active rule nei suoi gruppi
Toggle del gruppo      →  cambia enabled di tutte le active rule di questo gruppo
Toggle del set         →  cambia solo enabled di questo set

Le regole con Attivo: NO (badge ○) vengono ignorate nelle cascate — le controlli solo manualmente, indipendentemente dallo stato della cartella e del gruppo.

Esempi pratici

Pulsante flottante e pannello

Nel pannello a tendina (clic destro) puoi:

• Abilitare/disabilitare singole cartelle
• Abilitare/disabilitare singoli gruppi (quando la cartella ha più di un gruppo)
• Abilitare/disabilitare singoli set nella cartella
• Abilitare/disabilitare le barre di azioni — sezione „Barre di azioni" sotto l'elenco dei set, checkbox per barra, modifica actionBar.enabled (persistente, si propaga al pannello di modifica)
• Scollegare le barre — la sezione „Connessioni" appare quando il pulsante flottante è agganciato alle barre (snap & connect), con i pulsanti „Scollega da: X" + „Scollega tutte"

Il pannello mostra solo i set attivi (●) — quelli indipendenti (○) sono nascosti per concisione. Quando la cartella ha un solo gruppo chiamato "Predefinito", l'intestazione del gruppo viene omessa — si vedono solo i set.

Widget popup (icona dell'estensione)

Il clic sull'icona JustZix nella barra delle estensioni di Chrome apre il widget popup — un pannello di controllo compatto per la scheda corrente. Dall'alto:

• Pannello di modifica — pulsante che apre la modalità di modifica (la pagina delle opzioni) in una nuova scheda.
• Plugin enabled — grande interruttore dell'interruttore globale dell'estensione (verde = abilitata, grigio = disabilitata).
• Modalità di modifica della barra — interruttore della modalità di modifica della barra di azioni per la scheda corrente.
• AI Helper — interruttore che apre / chiude la finestra dell'assistente IA sulla scheda corrente.
• Indirizzo URL della scheda corrente.
• Elenco delle cartelle che corrispondono alla pagina — un checkbox per abilitare/disabilitare ogni cartella e l'icona „eye-off" che nasconde il pulsante flottante per quella pagina.
• Barre di azioni — sezione con un checkbox per barra (persistente actionBar.enabled).
• Ripristina pulsante flottante — link che appare quando il pulsante è stato nascosto per la pagina corrente.

Barre di azioni (ActionBars)

In un singolo workspace puoi avere più barre di azioni — ciascuna con il proprio nome, orientamento, colore di sfondo, proprio set di pulsanti e posizione indipendente per finestra del browser. Una barra può essere assegnata a una cartella, a un gruppo o a un singolo set (questo determina la visibilità e la cascata).

Creazione e modifica di una barra

Nell'editor di cartella, gruppo o set si trova il pulsante „Barre di azioni (N)". Il clic apre la modale di gestione delle barre. Nella modale:

• Aggiungi barra — scegli il livello di assegnazione (cartella / gruppo / set del contesto corrente)
• Nome (max 6 caratteri MAIUSCOLO) — una linguetta opzionale con il nome sporge dal bordo della barra
• Orientamento — orizzontale o verticale
• Colore di sfondo — color picker (palette del brand JustZix)
• Abilitata — quando deselezionata, la barra non viene affatto renderizzata (non solo nascosta visivamente). Lo stato è salvato nello storage, indipendente dalla posizione per-finestra

Visibilità ereditata verso il basso

• La barra di una cartella è visibile per tutti i set attivi di quella cartella (aggrega le loro azioni tramite barId).
• La barra di un gruppo — solo per i set di quel gruppo.
• La barra di un set — solo quando il set è attivo.
• Una barra senza alcuna azione visibile e abilitata nel ramo dato non viene affatto renderizzata.

Assegnazione di un'azione a una barra

Ogni azione nella scheda „Azioni" della scheda del set ha un dropdown „Barra di azioni" — scegli la barra di destinazione dall'elenco di quelle visibili per quel set (barre proprie del set + barre del gruppo + barre della cartella).

Aggancio delle barre (snap & connect)

Durante il trascinamento di una barra, l'estensione rileva i bordi delle barre adiacenti e del pulsante flottante a una distanza ≤ 12 px. Appare un indicatore visivo sticky e, dopo il rilascio, le barre si uniscono in un gruppo di connessioni. Quindi:

• Le barre connesse si spostano insieme (group drag).
• Anche il pulsante flottante JustZix può partecipare alle connessioni (__float come pseudo-bar).
• Le connessioni sono memorizzate per finestra nella memoria di sessione.

Clic destro sulla maniglia di trascinamento della barra → menu contestuale:

• Nascondi questa barra (fino al reload) — runtime hide per finestra del browser. La barra torna dopo F5 / cambio URL / chiusura e riapertura della scheda. Disabilitazione permanente: vedi Mostra/nascondi barre più sotto.
• Scollega da: X () — appare per ogni connessione adiacente.
• Scollega tutte le connessioni () — quando la barra è connessa a più di una.

In modalità di modifica della barra questo menu è disattivato; il clic destro su un'etichetta dà allora l'opzione „Elimina etichetta".

Mostra/nascondi barre — da 3 punti

Per abilitare/disabilitare in modo permanente le barre di azioni (senza F5) l'estensione offre tre punti di accesso, tutti mappati sullo stesso actionBar.enabled nello storage — una modifica da un punto si propaga al pannello di modifica e alle altre UI:

1. Floating panel (clic destro sul pulsante flottante principale JustZix) — sezione „Barre di azioni" sotto l'elenco di cartelle/gruppi/set. Il checkbox per barra mostra lo stato persistente. Clic → toggle actionBar.enabled.
2. Widget popup (clic sull'icona dell'estensione accanto all'indirizzo) — sezione „Barre di azioni" sotto l'elenco delle cartelle. Più una piccola icona „eye-off" per cartella — nasconde il pulsante flottante per la pagina corrente (ripristino con il link „Ripristina pulsante flottante").
3. chrome.contextMenus (clic destro sulla pagina → JustZix → Barre di azioni) — sottomenu dinamico con un checkbox per barra. L'elenco viene ricostruito per scheda attiva e a ogni cambio di stato.

Modalità di modifica della barra — layout libero

La modalità di modifica della barra di azioni si attiva in tre modi: con la scorciatoia Ctrl+Alt+S (funziona da qualsiasi punto della pagina), con l'interruttore nel widget popup dell'estensione e dal menu contestuale di Chrome (clic destro → „Modalità di modifica della barra di azioni"). In cima allo schermo appare una barra informativa; usando di nuovo uno qualsiasi degli interruttori si esce dalla modalità.

In modalità di modifica il normale funzionamento degli elementi è sospeso (il clic non esegue codice, i campi non ricevono il focus) — gli elementi possono invece essere disposti e ridimensionati:

• Selezione — clic = singolo elemento; Ctrl+clic = aggiungi/rimuovi dalla selezione; clic su un'area vuota o Esc = deseleziona tutto. Shift+trascinamento su un'area vuota = selezione a intervallo (rettangolo).
• Spostamento — trascinamento della selezione con il mouse. Più elementi selezionati si spostano insieme.
• Ridimensionamento di un elemento — con una selezione singola appare un riquadro con 8 maniglie (4 angoli + 4 bordi).
• Ridimensionamento della barra — la barra ha maniglie sul bordo destro, inferiore e nell'angolo (ridimensionamento del canvas).
• Etichette — il pulsante „+ Label" sopra la barra aggiunge un'etichetta di testo statica nel primo spazio libero. Il doppio clic su un'etichetta apre l'editor (testo, font, dimensione, colore, „Elimina"). Le etichette si spostano e si ridimensionano come gli elementi azione.
• Eliminazione delle etichette — il tasto Delete elimina tutte le etichette selezionate in una volta; il clic destro su un'etichetta dà l'opzione „Elimina etichetta"; c'è anche un pulsante „Elimina" nell'editor dell'etichetta. Gli elementi azione si eliminano nel pannello di modifica (appartengono alle regole).
• Reset della barra — il pulsante „Reset barra" sopra la barra ripristina il layout predefinito (flow): elimina le posizioni e le dimensioni personalizzate degli elementi e tutte le etichette (con conferma).
• Annulla — Ctrl+Z annulla l'ultima modifica (spostamento, ridimensionamento, aggiunta/modifica/eliminazione di etichetta, reset). La cronologia copre la sessione di modifica corrente.

La modalità di modifica è „rigida": lo spostamento e il ridimensionamento si agganciano alla griglia da 8 px, un elemento non può essere tirato fuori dalla barra né posato su un altro — in caso di collisione entrambi gli elementi (quello spostato e quello sottostante) ricevono un riquadro rosso e, dopo il rilascio, l'elemento torna alla posizione precedente. La barra non può essere rimpicciolita al punto da far finire un elemento all'esterno; quando un nuovo elemento o un'etichetta non entra nella barra, il canvas della barra si ingrandisce automaticamente. Il clic destro del mouse sulla barra in modalità di modifica non mostra il menu „nascondi/scollega barra".

Modalità di layout della barra: la barra parte in modalità flow (flexbox classico — elementi uno dopo l'altro, verticalmente o orizzontalmente). Il primo spostamento o ridimensionamento di un elemento converte la barra in modalità custom (canvas con posizionamento libero) — visivamente senza cambiamenti, perché il layout corrente viene salvato come snapshot punto di partenza.

Tipi di azione: BUTTON / SELECT / INPUT / SLIDER / TEXTAREA / TOGGLE3

Ogni azione ha un tipo — selezionato con un dropdown all'inizio di ciascuna azione nella scheda del set. Sono disponibili 6 tipi:

Le etichette di testo statiche non sono un tipo di azione — si aggiungono direttamente sulla barra in modalità di modifica (vedi „Modalità di modifica della barra" → etichette).

Campi comuni

• Label — max 6 caratteri (maiuscolo, monospace). Mostrata sul pulsante, come placeholder di INPUT/TEXTAREA, o come linguetta sopra SELECT/SLIDER/TOGGLE3.
• Colore — color picker (sfondo dell'elemento; per TOGGLE3 = sfondo dello stato attivo).
• Secondo colore (colorText) — picker accanto al primo, più un campo hex con il copia/incolla nativo. Semantica per tipo:
  • BUTTON / SELECT (face) / INPUT / TEXTAREA — colore del testo
  • SLIDER — colore della barra (accent-color del cursore); il testo della label e del valore sono campi separati (vedi „Colori granulari" più sotto)
  • TOGGLE3 — colore del testo dello stato attivo
  Ogni picker ha un pulsante × che ripristina il default (vuoto = il renderer torna al CSS default — di solito bianco).
• Barra di azioni — dropdown che assegna l'azione a uno specifico ActionBar.
• Visibilità — il checkbox „visibile" consente di nascondere rapidamente senza eliminare.
• Scorciatoia da tastiera — clicca e premi la combinazione (le scorciatoie riservate di Chrome generano un avviso).
• Codice JS — eseguito all'attivazione. Variabili disponibili: value, $el (elemento DOM), $action ({ id, label, type, el }); per TOGGLE3 anche stateIdx (0-2) e stateLabel.

SELECT — modale delle opzioni

Il clic su „Opzioni (N)" nella scheda dell'azione di tipo SELECT apre la modale:

• Variant: static (opzioni configurate qui) o js (il codice popola il <select> nativo).
• Elenco delle opzioni per static: ogni riga è un { name, value }. name = ciò che vede l'utente, value = ciò che arriva al JS come variabile value.
• Colori granulari del dropdown — comuni a entrambe le varianti:
  • colorDropdownBg — sfondo del pannello popup (static) + sfondo dell'<option> (variante js)
  • colorOption — colore del testo del nome dell'opzione nel dropdown
  • colorSelected — sfondo dell'opzione selezionata (static; in js è native browser-specific)
  • colorHover — sfondo dell'opzione sotto il cursore (static)
• ID stabile dell'azione — il action.id completo con pulsante copy + un selettore JS di esempio.

INPUT — modale di configurazione

• Placeholder — testo visibile prima dell'inserimento.
• Default value — valore iniziale (quando non c'è entry in memory).
• colorPlaceholder — colore del testo del placeholder (tramite CSS variable, perché lo pseudo-elemento ::placeholder non è stilizzabile inline).
• ID stabile dell'azione + selettore JS di esempio.

SLIDER — modale di configurazione

• Min / Max — intervallo numerico (es. 0–100). Obbligatorio: min < max.
• Step — passo (es. 1, 5, 0.1). Default 1.
• Default value — valore iniziale (quando non c'è memory). Default (min+max)/2.
• Unit — unità mostrata dopo il valore (es. „px", „%"). Opzionale.
• colorLabel — colore dell'etichetta a sinistra della barra.
• colorValue — colore del numero+unità a destra.
• Codice JS — eseguito su change (rilascio del mouse / Tab / Enter). value = valore numerico.

TEXTAREA — modale di configurazione

• Placeholder / Default value — analogamente a INPUT (il valore iniziale può contenere \n per i newline).
• Rows — numero di righe visibili (1-20, default 3). Controlla l'altezza del campo.
• colorPlaceholder — analogamente a INPUT.
• Codice JS — eseguito su change (blur, NON Enter — Enter in una textarea è un newline reale). L'utente esce dal campo → il valore viene salvato e il codice eseguito. value = stringa con newline.

TOGGLE3 — modale di configurazione

• 3 stati — esattamente 3, ciascuno con i campi label (max 5 caratteri, maiuscolo) e value (stringa passata al codice come value). Label predefinite: OFF / MID / ON.
• Default state — un radio button accanto a ogni stato indica quale è iniziale (quando non c'è memory). Default 0.
• colorBg — sfondo del wrap container (l'intero segmented control).
• colorHover — sfondo hover su un pulsante non attivo.
• colorInactiveText — colore del testo degli stati non attivi (lo stato attivo usa colorText).
• Codice JS — eseguito a ogni cambio di stato (clic su uno non attivo). Variabili: value (state.value, fallback a state.label), stateIdx (0-2), stateLabel, $el (div contenitore).

Persistent memory (SELECT, INPUT, SLIDER, TEXTAREA, TOGGLE3)

La scelta / il valore / la posizione del cursore / il contenuto della textarea / lo stato attivo del toggle3 vengono memorizzati automaticamente per azione. Dopo F5 il valore torna; anche dopo aver chiuso la scheda e riaperta (su una pagina che corrisponde alla regola). Singleton per action.id — un unico valore indipendente dallo specifico URL.

Formato del valore in memory per tipo:

• SELECT (entrambe le varianti), INPUT, TEXTAREA → stringa
• SLIDER → number (o string-numeric dopo il roundtrip con lo storage)
• TOGGLE3 → integer 0-2 (INDICE dello stato attivo, non il value)

Storage:

• Primario: sessionStorage — sincrono, F5-safe, per scheda.
• Backup: chrome.storage.local.actionMemory[id] — cross-tab, durevole.

Nessuna sincronizzazione cross-device: la memory resta locale. Due computer possono avere valori diversi (es. un filtro diverso per utente).

ID stabile dell'azione

Ogni azione ha un action.id immutabile (formato a_<base36>_<random>). Nella scheda del set, accanto a ogni azione, c'è un badge con il numero di riga — il clic copia l'ID completo negli appunti, il tooltip mostra l'ID completo.

In user-JS fai riferimento tramite data-jz-action-id:

const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');
el.value = 'nuovo valore';
el.dispatchEvent(new Event('change'));

Oppure tramite gli helper window.JZ — vedi Invocazione programmatica delle azioni da JS.

Menu contestuale di Chrome

Clic destro su una qualsiasi pagina → JustZix:

• Abilita/disabilita il pulsante flottante per questa pagina — toggle della visibilità del floating button principale (analogo all'„eye-off" nel popup).
• Modalità di modifica della barra di azioni (abilita/disabilita) — commuta la modalità di modifica della barra sulla scheda attiva; terzo punto di accesso oltre alla scorciatoia Ctrl+Alt+S e all'interruttore nel popup.
• AI Helper (abilita/disabilita) — apre o chiude la finestra dell'assistente IA sulla scheda attiva.
• Barre di azioni ▸ — sottomenu con un checkbox per barra. L'elenco contiene solo le barre rilevanti per la scheda attiva. Il checkbox = stato persistente actionBar.enabled.
• Finestre CSS ▸ / Finestre JS ▸ / Console JS ▸ / Console Output ▸ — sottomenu analoghi per ciascuno dei 4 tipi di finestre sul front-end (vedi la sezione più sotto). Il checkbox = stato enabled per finestra.
• Finestra temporanea (TEMP) ▸ — sottomenu con 4 voci: TEMP CSS pane / TEMP JS pane / TEMP JS Console / TEMP Output Console. Clic = toggle (crea o chiudi). Funziona su qualsiasi pagina, indipendentemente dalla corrispondenza della cartella.

I sottomenu delle finestre vengono ricostruiti su: tabs.onActivated, tabs.onUpdated (URL change) e storage.onChanged per folders/groups/rules/actionBars/cssPanes/jsPanes/jsConsoles/outputConsoles/floatingHidden. Il sottomenu TEMP è statico (sempre 4 voci).

Finestre sul front-end (CSS / JS / Console)

L'estensione offre quattro tipi di finestre flottanti iniettate sulle pagine, accanto alle barre di azioni. Ogni finestra è assegnata a una cartella, a un gruppo o a un set (eredita la visibilità a cascata, come le barre di azioni) e appare sulle pagine corrispondenti per URL.

Gestione: nell'editor di cartella / gruppo / set trovi il pulsante „Finestre ▾ (N)". Il clic apre un menu con 4 tipi — scegli il tipo, si apre una modale con l'elenco delle finestre di quel livello (più le finestre ereditate dai livelli superiori). Aggiungi, dai un nome, colori, elimini.

CSS pane

Finestra flottante con un campo di testo per il CSS. Ogni modifica (dopo una breve pausa) aggiorna lo <style> iniettato — vedi l'effetto in tempo reale. Il contenuto è memorizzato per scheda del browser (sopravvive a F5, scompare con la chiusura della scheda). Ideale per testare rapidamente il CSS senza salvarlo in una regola.

JS pane

Un campo di testo per il JavaScript eseguito nel contesto della pagina. Il codice viene eseguito dopo una modifica (con un ritardo) oppure manualmente con il pulsante ▶ Run / la scorciatoia Ctrl+Enter. Gli errori di esecuzione appaiono in una barra rossa sotto il codice. Quando il codice è stato modificato dall'ultima esecuzione, il pulsante Run si illumina di giallo (stato „dirty").

JS Console (REPL)

Una console a tutti gli effetti dentro la pagina. Digiti il codice nel campo inferiore, Ctrl+Enter (o ▶) lo esegue, il risultato viene aggiunto all'area dei log sopra. Funzioni:

• Cronologia dei comandi — le frecce ↑/↓ sulla prima/ultima riga dell'input scorrono i comandi precedenti (come in un terminale).
• Ctrl+L — svuota l'output.
• Intercettazione di console.* — le chiamate console.log/warn/error/info durante l'esecuzione vengono mostrate nel log (colorate per tipo).
• Righe colorate: comando (blu), risultato (chiaro), errore (rosso), console.log (grigio), console.warn (giallo).

Input, output e cronologia sono memorizzati per scheda. La console esegue il codice nel MAIN world della pagina — hai accesso a tutte le variabili e funzioni della pagina.

Output Console

Anteprima dei log in sola lettura — intercetta automaticamente tutto ciò che accade sulla pagina: console.log/warn/error/info/debug, eccezioni non catturate, Promise rejection non gestite, traffico di rete e push verso dataLayer, oltre al tuo logger personalizzato window.JUSTZIX.*. A differenza della JS Console (dove digiti tu il codice) — qui i log scorrono da soli.

Sei schede con contatori

La finestra è divisa in 6 schede, ciascuna con un contatore di voci (badge):

Barra dei filtri contestuali

Tra le schede e il campo di ricerca c'è una barra dei filtri che cambia in base alla scheda selezionata:

• All — nessun filtro aggiuntivo.
• JZconsole / Console — caselle di selezione dei livelli: log, info, warn, error, debug. Deseleziona un livello → le righe scompaiono dall'anteprima.
• Network — tre righe: tipo di risorsa (document, script, stylesheet, image, xhr/fetch, font, …), classe di stato HTTP (2xx/3xx/4xx/5xx) e cursori dell'intervallo di dimensione e tempo (0–100000 ms) più un campo per filtrare per dominio. Le righe di checkbox hanno scorciatoie seleziona tutto / deseleziona tutto.
• Errors — nessun checkbox; ogni errore si espande per vederne i dettagli.
• DataLayer — la finestra si divide a metà (vedi sotto).

Ricerca

Sotto la barra dei filtri c'è un campo di ricerca sempre visibile. Filtra in tempo reale le voci della scheda attiva (corrispondenza parziale, senza distinzione tra maiuscole e minuscole). Esc svuota il campo.

Log della console — comprimibili come in DevTools

Le voci console.* sono per default compresse — mostrano un'anteprima abbreviata (es. [PickupMap][2026-05-16T15:25Z] AUTO_SELECTION_SKIPPED: {reason: 'Lower priority source', …}). Il clic espande gli argomenti completi (oggetti/array come albero JSON espandibile), analogamente alla console di DevTools.

Scheda Network

Network intercetta le richieste tramite chrome.webRequest (permesso webRequest nel manifest). Ogni voce mostra tra l'altro il metodo, l'URL, lo stato, il tipo di risorsa, la dimensione, la durata, l'indirizzo remoto (Remote address) e l'iniziatore (Initiator). Il buffer delle richieste è mantenuto in background, quindi appaiono anche le voci precedenti all'apertura della finestra.

Scheda DataLayer

La finestra DataLayer è divisa in due colonne:

• Sinistra — Nuovi push: il flusso delle successive chiamate dataLayer.push(...) nell'ordine degli eventi.
• Destra — Stato corrente: il contenuto live dell'oggetto window.dataLayer come albero JSON indicizzato (0:, 1:, …) espandibile — entri in profondità nei dati annidati, analogamente all'ispettore di oggetti di DevTools. Lo snapshot si aggiorna dopo ogni push. Nell'intestazione della colonna destra ci sono i pulsanti espandi tutto / comprimi tutto — agiscono ricorsivamente su tutto l'albero.

I clic sull'interfaccia propria di JustZix (espansione dei nodi dell'albero, pulsanti della finestra) non vengono inviati a questa scheda. Se la pagina raccogliesse gli eventi click (ad es. l'auto-event di GTM), un clic nella finestra genererebbe un push verso dataLayer e reimposterebbe l'espansione dell'albero — l'estensione riconosce questi push e non li riporta (il vero window.dataLayer della pagina rimane intatto).

Logger personalizzato — window.JUSTZIX

La Output Console mette a disposizione un'API globale per il logging dal tuo codice (JS pane, azioni, codice della pagina):

JUSTZIX.log('log normale');
JUSTZIX.warn('avviso');
JUSTZIX.error(new Error('errore'));   // mostrerà lo stack trace
JUSTZIX.info({ obj: 1, arr: [2,3] });
JUSTZIX.debug('dettagli');            // nascosto per default (filtro)

Alias disponibili:

• window.JUSTZIX — principale, funziona sempre
• window.__JUSTZIX__ — alias sempre disponibile
• window.JZ — alias solo se la pagina non ha un proprio window.JZ (alcune pagine, es. Google Ads, occupano questo nome)

Dopo la comparsa della Output Console, nel log vedrai una riga di benvenuto che indica quale alias è disponibile su quella pagina.

Cosa viene intercettato

• console.log/warn/error/info/debug(...) dalla pagina — passano anche alla normale console di DevTools (non li blocchiamo)
• window.JUSTZIX.*(...) — il tuo canale dedicato (non va a DevTools)
• Eccezioni non catturate (throw new Error(...)) — mostrate in rosso con il punto dell'errore
• Promise rejection non gestite — Promise.reject(...) senza .catch

Gli errori delle richieste fetch/XHR non finiscono nella scheda Errors (non sono eccezioni JS) — li trovi nella scheda Network con stato 4xx/5xx. Non catturiamo violazioni CSP né avvisi interni di Chrome.

Guida rapida — Ctrl+Shift+H

Ctrl+Shift+H apre una finestra spostabile di guida rapida — una guida all'uso di JustZix sulla pagina: scorciatoie globali, scorciatoie dentro le finestre, la Console Output, gestione delle finestre col mouse, la modalità modifica barra e il logging nella Console Output. Funziona su qualsiasi pagina. Trascini la finestra per l'intestazione; Esc / clic fuori / × / nuovo Ctrl+Shift+H la chiude.

Personalizzazione dell'aspetto della finestra

Colori: nella modale di gestione (pannello di modifica) ogni finestra ha un color picker — il puntino dell'intestazione, lo sfondo e il testo dell'intestazione, lo sfondo e il testo del body, il colore dei pulsanti azione.

Font e dimensione: clic destro sulla barra dell'intestazione della finestra → menu con la scelta del font (Consolas, Menlo, Monaco, Courier New e altri monospace) e della dimensione (10–24 px).

Trascinamento, aggancio e collegamento

Ogni finestra si trascina per la barra dell'intestazione. Avvicinando un bordo a un'altra finestra / barra di azioni / pulsante flottante (≤ 12 px) appare un'attrazione magnetica — le finestre si agganciano in un gruppo. Il trascinamento di un gruppo agganciato sposta tutti gli elementi insieme. Le posizioni sono memorizzate per finestra del browser.

Ridimensionamento della finestra

Ogni finestra ha 8 maniglie di resize: 4 negli angoli (cambio di larghezza e altezza contemporaneamente) e 4 sui bordi (cambio di un solo asse). La maniglia trascinata mantiene il bordo opposto al suo posto. Intervallo: larghezza 180–1200 px, altezza 120–900 px. La nuova dimensione (pane.size) viene salvata — per le finestre persistenti sincronizzata tra dispositivi, per le finestre TEMP per scheda.

Scorrimento all'interno della finestra

Lo scorrimento con la rotellina del mouse all'interno di una finestra fa scorrere solo il contenuto di quella finestra — la pagina sottostante non scorre. Questo vale anche quando l'area della finestra raggiunge la fine dello scorrimento o quando il cursore si trova su una parte non scorrevole (l'intestazione, la barra dei filtri).

Clic destro sull'intestazione della finestra

• Porta avanti / Porta dietro — cambiare l'ordine delle finestre quando si sovrappongono (salto unico sopra / sotto tutti i vicini in sovrapposizione).
• Scollega da: X / Scollega tutte le connessioni — quando la finestra è agganciata.
• Chiudi finestra [tipo] — nasconde la finestra (la puoi riattivare dal pannello / popup).
• Font / Dimensione — scelta del font e della dimensione del testo.

Pulsante di chiusura e doppio clic sull'intestazione

Ogni finestra (sia temporanea TEMP sia persistente) ha un pulsante × di chiusura nell'angolo destro dell'intestazione. Le TEMP vengono nascoste (riaprile dal menu contestuale della pagina o con una scorciatoia), le persistenti — disattivate (riattivale con la casella nel popup). Doppio clic sulla barra dell'intestazione:

• Persistenti (CSS pane / JS pane / JS Console / Output Console) — comprimono / espandono la finestra fino all'intestazione. Stato memorizzato.
• TEMP — commuta tra la dimensione memorizzata ↔ predefinita.
• AI Helper — commuta tra la dimensione memorizzata ↔ predefinita.

Aggancio ed evidenziazione del bordo

Quando il bordo di una finestra si avvicina a un'altra finestra JustZix (soglia 12 px), appare un bordo rosso sul lato di aggancio (su entrambe le finestre). Rilasciare il cursore in questa posizione esegue lo snap — le finestre si muovono poi come gruppo. Tutte le finestre dell'estensione partecipano a questo meccanismo: barre di azioni, FAB, pannelli persistenti (CSS/JS/Console/Output), TEMP e l'AI Helper.

TEMP pane — finestre temporanee

Puoi creare una finestra temporanea su qualsiasi pagina — anche una per cui non hai nessuna cartella. I TEMP pane sono uno strumento ad-hoc rapido: testi CSS/JS su una pagina estranea senza configurare regole.

Caratteristiche dei TEMP pane:

• Funzionano su ogni pagina (ignorano la corrispondenza della cartella)
• Memorizzati per scheda — sopravvivono a F5, scompaiono con la chiusura della scheda. Non si sincronizzano tra dispositivi.
• Colore diverso dalle finestre standard — arancione (CSS), rosso (JS), rosa (JS Console), ciano (Output) — l'intero bordo della finestra in quel colore.
• „TEMP" nel nome.
• Croce rossa × nell'angolo in alto a destra dell'intestazione — chiude la finestra. I dati (codice, log, geometria) rimangono nella sessione — riaprire una finestra dello stesso tipo li ripristina. Spariscono solo alla chiusura della scheda.
• Icona del cestino nell'intestazione di TEMP CSS / TEMP JS — cancella il contenuto dell'editor con un clic. La cancellazione finisce nella cronologia di annullamento del browser (Ctrl+Z la annulla). Per il CSS, il <style> in tempo reale viene aggiornato immediatamente.
• Al massimo una istanza per tipo — la seconda pressione della scorciatoia chiude la finestra esistente; la terza la riapre con il contenuto conservato.
• Memoria delle dimensioni (per dispositivo) — dopo che una finestra TEMP è stata ridimensionata, la sua ultima dimensione viene memorizzata separatamente per ogni tipo (CSS / JS / JS Console / Output) nella memoria del dispositivo. Sopravvive al riavvio del browser e non si sincronizza tra dispositivi. Una finestra TEMP appena aperta parte con la dimensione predefinita (380×240).
• Doppio clic sull'intestazione = interruttore dimensione — un doppio clic sulla barra dell'intestazione di una finestra TEMP la commuta tra la dimensione predefinita e quella memorizzata.

Creazione / chiusura (toggle):

• Ctrl+Alt+G — TEMP CSS pane
• Ctrl+Alt+H — TEMP JS pane
• Ctrl+Alt+J — TEMP JS Console
• Ctrl+Alt+K — TEMP Output Console
• oppure: clic destro sulla pagina → JustZix → Finestra temporanea (TEMP) ▸

AI Helper — assistente IA

L'AI Helper è un assistente IA integrato nell'estensione che aiuta a preparare e implementare una soluzione CSS/JS per un compito specifico sulla pagina corrente. Il modello può esaminare la pagina, testare il codice in tempo reale nelle finestre TEMP e — dopo la tua accettazione — creare una cartella, un gruppo e un set pronti.

Configurazione delle chiavi API

Nel menu Impostazioni della sidebar la voce „AI Helper" apre la modale di configurazione:

• Chiavi API per tre provider: OpenAI, Anthropic e Gemini (Google). Basta la chiave di un provider per usare l'assistente.
• Provider predefinito e modello predefinito — usati all'apertura della finestra di chat (il modello può anche essere recuperato automaticamente — in tal caso viene scelto il più alto disponibile).
• Accanto a ogni chiave c'è un checkbox „sincronizza" (disabilitato per default).

Finestra di chat

La finestra dell'AI Helper è una finestra flottante (per scheda, come le finestre TEMP — trascinabile, ridimensionabile con 8 maniglie, croce di chiusura, una sola istanza). La apri / chiudi:

• con la scorciatoia Ctrl+Alt+\,
• con l'interruttore „AI Helper" nel widget popup,
• dal menu contestuale di Chrome → JustZix → AI Helper.

Nella finestra: scelta del provider (quando hai più di una chiave) e del modello (elenco recuperato in tempo reale), cronologia della conversazione, pulsante per svuotare la conversazione e un campo di testo (invio con un pulsante o con Ctrl+Enter). Il modello riceve automaticamente il contesto della pagina corrente — URL, titolo e un frammento di HTML.

Workflow agentico

L'AI Helper conduce la conversazione secondo un workflow stabilito:

1. Chiede dettagli — ambito URL, nomi di cartella/gruppo/set, colori, l'obiettivo esatto.
2. Esamina la pagina con lo strumento query_page (selettori, struttura DOM) prima di scrivere il codice.
3. Inserisce il codice CSS/JS preparato in una finestra temporanea TEMP, che vedi in tempo reale sulla pagina.
4. Verifica gli errori da solo — con gli strumenti read_temp_pane e read_console controlla che il codice testato non segnali errori prima di mostrarti il risultato.
5. Chiede di verificare l'effetto e domanda esplicitamente se il test è riuscito.
6. Quando il test non riesce — corregge il codice e testa di nuovo.
7. Solo dopo la tua conferma rende permanente la soluzione: crea una cartella → un gruppo → un set, e se necessario anche una barra di azioni e azioni. Ogni creazione di un'entità richiede una conferma separata nell'estensione.

Il modello usa gli strumenti tramite un semplice protocollo testuale (blocco @@JZ_TOOL@@ … @@END@@) che funziona in modo identico per OpenAI, Anthropic e Gemini. Le chiamate degli strumenti e i loro risultati appaiono nella finestra come „chip" separati. Strumenti disponibili:

Aspetto della finestra AI Helper

Un clic destro sulla barra dell'intestazione della finestra AI Helper apre un menu con le opzioni «Porta avanti» / «Porta dietro» (cambiare l'ordine delle finestre JustZix quando si sovrappongono), «Scollega da: X» (quando AI Helper è agganciato a un'altra finestra) e «Aspetto…». Il pannello «Aspetto…» permette di stilizzare separatamente quattro ruoli nella conversazione: i tuoi messaggi, le risposte dell'IA, i risultati degli strumenti, i form inline — ciascuno con font, dimensione, colore del testo e di sfondo propri. I valori sono salvati per dispositivo.

Aggancio con altre finestre e Z-order

La finestra AI Helper partecipa allo stesso meccanismo di aggancio delle barre di azioni, delle finestre persistenti (CSS / JS / Console / Output) e delle finestre TEMP. Trascinare un bordo vicino a un'altra finestra JustZix (soglia 12 px) → attrazione magnetica, un bordo rosso indica il lato di aggancio su entrambe le finestre. Le finestre agganciate si muovono come gruppo.

Quando le finestre si sovrappongono, le opzioni «Porta avanti» / «Porta dietro» nel menu contestuale di ogni finestra (clic destro sull'intestazione) fanno un salto unico — la finestra passa sopra / sotto tutti i vicini in sovrapposizione, non serve cliccare più volte.

Screenshot della pagina (per modelli vision)

Lo strumento screenshot_page cattura la vista corrente della pagina e la invia al modello come immagine. L'intera interfaccia di JustZix viene nascosta automaticamente prima della cattura (FAB, barre di azioni, AI Helper, pannelli persistenti, TEMP). Un buffer dei 3 screenshot più recenti, allegati una sola volta alla richiesta successiva (dopo l'invio — rimossi dal buffer per risparmiare token). Richiede un modello compatibile vision (es. gpt-4o, claude-3+/4, gemini-1.5+/2). Sotto il chip di risultato nella chat, viene mostrata una miniatura — un clic apre la vista a schermo intero.

Scorciatoie da tastiera

Globali (funzionano da qualsiasi punto della pagina)

All'interno di una finestra (quando ha il focus)

Editor di codice (pannello di modifica)

Esportazione e importazione

L'estensione offre cinque formati di esportazione (completo, parziale, cartella, gruppo, set) con rilevamento automatico del tipo di file all'importazione, per evitare la sovrascrittura accidentale.

Esportazione — completa o di elementi selezionati

Nel menu Impostazioni della sidebar: Esporta impostazioni. La modale apre due modalità:

• Tutto — esporta tutte le cartelle, i gruppi, i set e le impostazioni globali (pulsante flottante, pannelli nascosti, ecc.)
• Selezionati — mostra un albero cartella → gruppi → set con checkbox:
  • Il checkbox della cartella / gruppo seleziona tutti gli elementi sottostanti
  • Lo stato indeterminate (trattino) mostra una selezione parziale a ogni livello
  • I pulsanti Seleziona tutto / Deseleziona tutto per una manipolazione rapida
  • Un riepilogo live in basso mostra cosa verrà esportato

I file di esportazione parziale hanno il nome justzix-partial-DATA.json (vs. justzix-backup-DATA.json per quello completo) e all'interno il flag partial: true e il campo groups[].

Esportazione di una singola cartella (con selezione)

Nella barra della cartella: Esporta — apre una modale con l'albero di gruppi e set (analogamente all'esportazione parziale, ma limitata a quella cartella). Vengono esportati solo i set selezionati e i gruppi a cui appartengono — i gruppi vuoti non finiscono nel file.

Formato justzix-folder — il file contiene un campo groups[] con la gerarchia di gruppi e set della cartella.

Esportazione di un gruppo

Nella barra del gruppo: Esporta — una modale con l'elenco dei set del gruppo (checkbox). File: justzix-grupa-<nome>-<data>.json, formato justzix-group.

Esportazione di un singolo set

Nella vista del set: Esporta set — scarica subito il file (senza modale). Formato justzix-rule, nome: justzix-zestaw-<nome>-<data>.json.

Importazione — rilevamento automatico del tipo (modale di importazione completa)

Dopo aver caricato un file/incollato il JSON, l'estensione riconosce automaticamente il tipo e mostra un pannello di rilevamento colorato:

Modalità di importazione parziale (pannello viola)

• Unisci con le attuali (predefinita) — abbina le cartelle per ID, aggiunge quelle nuove; le altre cartelle nelle impostazioni attuali rimangono intatte.
  In caso di conflitto di ID appare un prompt con 3 opzioni:
  • 1 / nadpisz — sovrascrivi le cartelle esistenti (eliminerà i loro gruppi e set)
  • 2 / kopia (predefinita) — importa come copie con nuovi ID, "(import)" nel nome della cartella, nessuna perdita di dati esistenti
  • Annulla — interrompi l'importazione
• Sostituisci le attuali — svuota tutto e inserisce solo gli elementi selezionati dal file.

Importazione di una singola cartella

Nella barra della cartella: Importa. Controlla i conflitti per ID e per nome:

• Importa come nuova — con l'aggiunta di "(import)" nel nome
• Sovrascrivi — elimina i vecchi gruppi e set della cartella e inserisce quelli nuovi
• Unisci — aggiunge i nuovi gruppi / set alla cartella esistente (mantenendo entrambi)

Importazione di un gruppo

Nella barra del gruppo: Importa — accetta 3 formati:

• justzix-group — inserisce tutti i set del gruppo dal file
• justzix-folder — inserisce tutti i set di tutti i gruppi della cartella
• justzix-rule — inserisce un set

Tutti i set del file finiscono nel gruppo corrente con nuovi ID (l'operazione è sempre di tipo "aggiungi copia" — nessun conflitto).

Importazione di un singolo set

Nella vista del set: Importa set — accetta solo justzix-rule. Prompt con 3 opzioni:

• 1 / zastap — sostituisci il contenuto del set corrente (id e groupId conservati)
• 2 / kopia (predefinita) — aggiungi come nuovo set accanto a quello corrente, nello stesso gruppo, con l'aggiunta di "(import)"
• Annulla — interrompi

Applicazioni pratiche dell'esportazione parziale

• Condivisione con il team — esporta 2-3 cartelle con la configurazione del progetto, i colleghi le importeranno in modalità "Unisci" senza perdere le proprie impostazioni
• Backup solo delle configurazioni importanti — es. la produzione resta, gli esperimenti li salti
• Migrazione parziale — sposta un solo set tra dispositivi
• Versioning — esporta una cartella specifica su git insieme alla documentazione del progetto

Sincronizzazione cloud

Impostazioni → Sincronizzazione cloud apre la modale dell'account di sincronizzazione. L'estensione mantiene la tua libreria (cartelle, gruppi, set, azioni, barre di azioni, finestre sul front-end) nel cloud di justzix.com e la mantiene coerente tra i dispositivi. La sincronizzazione funziona solo dopo l'accesso — senza un account l'estensione funziona solo in locale.

Account e chiave di sincronizzazione

• Registrazione — l'estensione genera una chiave di sincronizzazione (il segreto univoco dell'account). Conservala in modo sicuro — è l'unico modo per accedere su un altro dispositivo.
• Accesso — incolli la chiave di sincronizzazione più un'etichetta opzionale del dispositivo (es. "Laptop di lavoro"). Puoi decidere se la chiave viene memorizzata nello storage dell'estensione o conservata solo per la sessione.
• All'account è possibile associare un'e-mail (verificata tramite un link) — viene usata per recuperare l'accesso.

Prima sincronizzazione — risoluzione dei conflitti

Durante l'accesso, l'estensione confronta i dati locali con i dati nel cloud:

• Solo il cloud ha dati → vengono scaricati su questo dispositivo.
• Solo il dispositivo ha dati → vengono inviati al cloud.
• Entrambi hanno dati → compare una modale di conflitto con tre strategie:

Puoi anche fare Annulla — l'estensione esegue allora la disconnessione e non cambia nulla.

Sincronizzazione continua

Dopo la prima riconciliazione, la sincronizzazione gira in background: l'estensione invia le modifiche e scarica le nuove entità circa una volta al minuto. Una modifica fatta su un dispositivo compare sugli altri dopo poco tempo. Il pallino di stato accanto alla voce "Sincronizzazione cloud" indica se l'account è connesso.

Scheda Stato — libreria nel cloud, cronologia, azioni

La scheda Stato della modale di sincronizzazione mostra lo stato dell'account e offre i pulsanti delle azioni:

• Sincronizza ora — push immediato delle modifiche e pull delle nuove entità.
• Snapshot completo — scarica un'istantanea della libreria dall'account.
• Aggiorna i dati dell'account — aggiorna le informazioni sull'account e l'elenco delle sessioni attive.
• Risincronizzazione completa con l'account — bidirezionale: prima scarica l'intera libreria dall'account, poi invia le entità locali che mancano sull'account. Ripara le entità "bloccate" localmente — quelle che non sono mai arrivate sul server (push rifiutato, assenti nel primo scarico) e che la sincronizzazione ordinaria non rileva perché non cambiano. Non distruttiva: le entità già presenti sull'account vengono ignorate (senza sovrascrivere le versioni più recenti) e le entità eliminate su un altro dispositivo non vengono resuscitate.

Libreria nel cloud

Contatori delle entità presenti sull'account: cartelle, gruppi, set, azioni, barre di azioni, finestre sul front-end. Vengono conteggiate solo le entità raggiungibili nell'albero (un gruppo deve avere una cartella esistente, un set — un gruppo, una barra/finestra — un genitore esistente) — in modo coerente con i contatori del Pannello. Si aggiornano all'apertura del pannello e dopo una sincronizzazione manuale.

Cronologia sincronizzazione

Un registro locale al dispositivo delle ultime sincronizzazioni. La pagina mostra le ultime 10 voci; il pulsante "Mostra cronologia completa" apre una finestra con l'elenco completo (fino a 100 voci). Ogni voce contiene:

• l'ora e il dispositivo che ha avviato — nome e ID numerico della sessione (lo stesso che in "Sessioni attive");
• un riepilogo numerico — ↑ inviate, ↓ scaricate, ✕ eliminate;
• le modifiche concrete — raggruppate per tipo con un contatore (ad es. "Azioni ×10") e i nomi degli elementi quando sono noti;
• lo stato quantitativo della libreria dopo la sincronizzazione (sei contatori).

Il registro è locale — non viene sincronizzato tra i dispositivi. Una voce viene creata dopo ogni ciclo di sincronizzazione che ha realmente cambiato qualcosa; un "Sincronizza ora" manuale lascia sempre una voce, anche senza alcuna modifica.

Cosa si sincronizza e cosa no

• Sincronizzato: cartelle, gruppi, set, azioni, barre di azioni, finestre sul front-end (pannelli CSS/JS, console), tema (chiaro/scuro) e lingua dell'interfaccia, e anche le chiavi API di AI Helper — ma solo quelle con il checkbox "sync" selezionato accanto alla chiave (vedi AI Helper).
• Non sincronizzato (stato per dispositivo): le posizioni delle finestre e delle barre flottanti, le dimensioni delle finestre, la memoria dei valori SELECT/INPUT, le finestre TEMP, le chiavi API senza il checkbox selezionato.

Le statistiche d'uso (applicazioni CSS, esecuzioni JS, visualizzazioni di finestre) sono sincronizzate come entità separate per-dispositivo — la scheda del Pannello le somma da tutti i dispositivi accoppiati. Il tema e la lingua sono sincronizzati come impostazione comune dell'account e applicati alla successiva apertura del pannello sull'altro dispositivo.

Condivisione tramite link (Shares)

Un'alternativa all'invio di un file JSON su una chat. Generi un link pubblico con una durata di vita (1h / 6h / 12h / 24h / 48h) e lo passi al destinatario. Il backend justzix.com conserva il payload nel cloud fino alla scadenza, poi viene eliminato.

Richiede un account di sincronizzazione (Sync) connesso. Il token stesso è un secret pubblico — chiunque abbia il link può scaricare, quindi non inviarlo su canali pubblici se il contenuto è sensibile.

Formato del token

JZS-XXXX-XXXX-XXXX-XXXX (16 caratteri Crockford base32, ~80-bit di entropia). Viene accettato anche l'intero URL https://www.justzix.com/s/JZS-... — l'estensione lo analizza e normalizza (lettere ambigue I/L→1, O→0, U→V).

Limiti dell'account

• max 20 link attivi per account
• max 50 MB in totale
• max 5 MB per singolo share
• max 30 nuovi link all'ora

Il superamento del limite = un errore con un messaggio. Revoca i link inutilizzati nel pannello I miei share.

Creazione di un link (mittente)

Il pulsante „Condividi URL" in quattro punti di accesso, accanto a „Scarica file":

• Esportazione completa — Impostazioni → Esporta impostazioni → pulsante „Condividi URL" (tipo justzix-full)
• Cartella — barra della cartella → Esporta → „Condividi URL" (tipo justzix-folder)
• Gruppo — barra del gruppo → Esporta → „Condividi URL" (tipo justzix-group)
• Set — toolbar nella vista del set → „Condividi URL" accanto a Esporta / Importa (tipo justzix-rule)

Il clic apre la modale di generazione del link: subject + summary di cosa condividi, radio con il TTL (predefinito 24h), „Genera link". Dopo il successo la modale passa alla vista del risultato con due valori copiabili:

• URL completo https://www.justzix.com/s/JZS-... — da inviare a qualcuno senza l'estensione (mostrerà una pagina landing)
• Solo il token JZS-XXXX-XXXX-XXXX-XXXX — da incollare nell'estensione del destinatario in „Importa da URL"

Ognuno ha il proprio pulsante „Copia". È mostrato anche l'orario di scadenza nel fuso orario locale.

Pannello „I miei share"

Impostazioni → I miei share (una modale separata, non parte della sincronizzazione — sono due funzionalità diverse). Mostra l'elenco dei link attivi: un counter nell'intestazione X/20 attivi · Y MB / 50 MB e, per ogni share, una scheda con:

• Tipo (Esportazione completa / Cartella / Gruppo / Set) e ID
• Orario di scadenza („scade tra Xh Ymin") e contatore dei download
• Token in monospace (clic = seleziona tutto)
• Summary X cartelle · Y gruppi · Z set · N righe di JS · A KB
• Pulsanti Copia link / Copia token / Revoca

La revoca non ritira il contenuto già scaricato. Se qualcuno ha fatto in tempo a scaricare il payload, lo ha localmente. Lo share è un "best-effort time-limit", non un DRM.

Importazione da un link (destinatario)

Impostazioni → Importa da URL (tra „Importa impostazioni" e „Sincronizzazione cloud", icona della catena). La modale ha due passaggi:

Passo 1 — input. Incolli il link o solo il token. Validazione client-side: il token viene estratto dall'URL, normalizzato Crockford-base32, vengono verificati 16 caratteri + il formato. Formato errato → un messaggio con un suggerimento sul formato corretto.

Passo 2 — preview. L'estensione mostra il riepilogo dello share:

• Mittente (display name o „anonimo" se non l'ha impostato)
• Scade tra (tempo relativo)
• Tipo (Esportazione completa / Cartella / Gruppo / Set)
• Dimensione del payload
• Contenuto (numeri di cartelle / gruppi / set / azioni)
• CSS chars / JS lines
• Download

Se lo share contiene JavaScript (jsLines > 0) — appare un banner di avviso rosso con il link „Mostra codice JavaScript". Apre un overlay con il codice JS completo di ogni regola e azione — controllalo prima di importare, perché il codice verrà eseguito sulle pagine corrispondenti.

Passo 3 — importazione. Clic su „Importa" → il backend restituisce il payload completo → l'estensione crea nuove entità con ID sempre nuovi (non sovrascrive mai quelle esistenti per ID):

Nome del nuovo container: <nome-del-mittente o "Import"> <data PL> — puoi poi rinominarlo / spostarlo a piacere.

Errori del destinatario

Il backend non distingue un 404 „non è mai esistito" da un 404 „scaduto / revocato" — volutamente, per non rivelare se un token sia mai esistito.

Invocazione programmatica delle azioni da JS

Ogni azione (dalla scheda „Azioni" nella scheda del set) può essere invocata programmaticamente dal JS del set o dal codice di un'altra azione. Il namespace globale window.JZ viene installato nel MAIN world automaticamente prima di ogni esecuzione di user-JS.

API — azioni

Esempio — lettura e impostazione dei valori

// === Lettura ===
const filter = JZ.value('FILT');           // INPUT/TEXTAREA — string
const opacity = JZ.value('OPAC');          // SLIDER — string numeric ("75")
const mode = JZ.value('MODE');             // SELECT static — string (option.value)
const theme = JZ.value('THM');             // TOGGLE3 — state.value dello stato attivo

// === Impostazione ===
JZ.setValue('FILT', 'nuovo valore');       // INPUT/TEXTAREA — string + dispatch input+change
JZ.setValue('OPAC', 75);                   // SLIDER — clamp a min/max, dispatch input+change
JZ.setValue('SRT', 'prod');                // SELECT(js) — select nativo + dispatch change
JZ.setValue('MODE', 'staging');            // SELECT static — content.js esegue il flow (memory + UI + codice)
JZ.setValue('THM', 'dark');                // TOGGLE3 — lookup per state.value (fallback a label, poi idx)
JZ.setValue('THM', 2);                     // TOGGLE3 — equivalente; anche l'idx numerico funziona

API — barre e floating button

Context vars nel codice dell'azione

Nel campo „Codice JS" dell'azione hai automaticamente a disposizione delle variabili — iniettate come const dal background service worker prima dell'esecuzione:

Snippet nell'UI

Nella modale di configurazione dell'azione di tipo SELECT e INPUT il pannello „ID stabile dell'azione" mostra il action.id completo con un pulsante copy e un selettore JS di esempio (document.querySelector('[data-jz-action-id="..."]')). Sotto l'elenco dei BUTTON si vedono i chip JZ.click('LBL') — il clic su un chip copia lo snippet negli appunti.

Requisiti

• L'elemento azione deve essere visibile nella barra di azioni sulla pagina corrente (l'azione ha visible: true, la barra è visibile nell'albero + l'URL della pagina corrisponde alle regole).
• Azione non visibile o pagina su cui la barra è nascosta → JZ.click() restituirà false, JZ.action() restituirà null.
• Una scorciatoia da tastiera definita su un'azione ha un proprio meccanismo (capture-phase keydown listener in content.js) — non richiede JZ.click().

Esempio — un'azione AUTO che invoca una sequenza

// Codice dell'azione "AUTO"
JZ.click('LOAD');                          // clic sull'azione LOAD (es. carica i dati)
setTimeout(() => JZ.click('PROC'), 500);   // 500ms dopo PROC (elabora)
setTimeout(() => JZ.click('SAVE'), 1500);  // 1500ms dopo SAVE (salva)

Esempio — JS del set che reagisce al DOM

Dopo la comparsa di un elemento dinamico, clicca l'azione che lo rimuove:

// Codice JS del set — observer su un modal che appare dinamicamente
const observer = new MutationObserver(() => {
  if (document.querySelector('.cookie-banner')) {
    JZ.click('CCK');  // clicca l'azione che rimuove il banner
    observer.disconnect();
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Esempio — impostazione programmatica del valore di un INPUT

// JZ.click su un INPUT non cambia il valore — usa il pattern con il dispatch di 'change':
const el = JZ.action('SRCH');           // o JZ.actionById('a_mp1deeq3_uimd8l')
if (el) {
  el.value = 'nuovo filtro';
  el.dispatchEvent(new Event('change'));
}

Accesso diretto tramite DOM

Se preferisci lavorare con il DOM direttamente (es. cambi uno stile, non invochi):

// Lookup per ID stabile (consigliato — resistente al cambio di label):
const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');

// Lookup per label (case-insensitive — MAIUSCOLO in data-jz-key):
const btn = document.querySelector('[data-jz-key="MYBT"]');
btn.style.opacity = '0.5';      // attenua
btn.dataset.busy = 'true';      // attributo personalizzato

Dove vivono gli elementi azione nel DOM:

Tutti gli elementi hanno l'attributo data-jz-action-id (identificatore stabile unico). Il selettore .jz-actions-bar è sicuro — non collide con il DOM della pagina.

Funzionalità selezionate

Ricerca nella sidebar

Il campo "Cerca" filtra l'albero delle cartelle. Logica di corrispondenza:

• Match per nome della cartella o URL → l'intera cartella con tutti i set rimane visibile e auto-espansa
• Match per nome del set, tag o contenuto CSS/JS → vengono mostrati solo i set corrispondenti nella cartella, la cartella è auto-espansa
• Nessun risultato → il messaggio "Nessun risultato per [query]"

Il match è case-insensitive, l'evidenziazione in giallo mostra il punto della corrispondenza.

Interruttore globale

Dopo aver cliccato l'icona dell'estensione nella toolbar di Chrome appare il widget popup con un grande interruttore verde/grigio „Plugin enabled". In modalità disabilitata nessun CSS/JS viene iniettato su nessuna pagina, indipendentemente dalle impostazioni delle cartelle. Il pulsante flottante è allora disabilitato (Halt Red, opacity 0.7). Lo stato sopravvive al riavvio di Chrome.

Inserisci URL dalla scheda

Un pulsante accanto al campo del pattern URL — inserisce protocol://host/* dalla scheda attiva. Creazione di una cartella in 2 secondi. L'indirizzo della pagina delle opzioni dell'estensione viene ignorato — viene presa la scheda esterna più recente.

Validazione URL in tempo reale

Inline, sul lato destro del campo URL, appare l'informazione "Corrisponde a X schede aperte" o un avviso. Cattura i refusi immediatamente.

Cronologia delle modifiche del set

Uno snapshot del CSS e del JS viene creato 3 secondi dopo l'ultima modifica (debounce). Limite di 5 versioni — la più vecchia viene espulsa. Al ripristino di una versione il contenuto corrente viene aggiunto alla cronologia come snapshot più recente, quindi puoi sempre annullare l'annullamento.

Tag e ricerca per tag

Nell'intestazione della scheda del set c'è un campo per i tag — inseriscili separati da virgole. Appaiono come piccole etichette nella sidebar accanto al nome del set. La ricerca trova anche per tag.

Etichetta e colore della cartella

Ogni cartella può avere una propria etichetta sul pulsante flottante (max 3 lettere, MAIUSCOLO) e un colore (color picker). L'etichetta e il colore aiutano a riconoscere visivamente quale progetto è attivo su una pagina.

Statistiche dei clic sulle azioni

Ogni pulsante azione conta quante volte è stato cliccato. Aiuta a vedere quali sono davvero usati.

Validazione CSS

Sotto l'editor CSS appare una barra con l'elenco dei problemi di sintassi:

• Commento non chiuso /* ... */
• Parentesi graffe non chiuse (manca })
• Parentesi graffa di chiusura in eccesso } (con il numero di riga)

È una semplice validazione sintattica — non verifica la correttezza di properties/values. Il CSS con un errore viene comunque iniettato (il browser ignorerà semplicemente le regole errate).

Preview del JS all'importazione

Nella modale di importazione di una singola cartella, dopo aver caricato il file, appare un elenco di set con una metrica:

Contenuto del file (3 set):
  Auto-login              CSS: 0L • JS: 4L                    JS
  Nascondi banner cookie  CSS: 8L • JS: 0L
  Debug GTM               CSS: 0L • JS: 12L • 2 azioni (8L)   JS

Un avviso con il numero di righe di JS, se ce ne sono. Il clic sul pulsante JS mostra il codice completo da controllare prima dell'importazione.

Isolamento try/catch del JS

Ogni set JS viene eseguito separatamente, con il proprio try/catch. Un errore in un set non blocca l'esecuzione degli altri. Gli errori vengono loggati nella console con il nome del set/azione e lo stack trace completo.

Storage quota

Un indicatore dell'uso della memoria nel menu Impostazioni della sidebar (es. 1.2 MB / 10 MB). Rosso sopra l'80%.

Filtro "Solo attive"

Un checkbox sopra l'elenco — nasconde i set contrassegnati come indipendenti (○) e mostra solo quelli attivi nella cartella (●). Aiuta a filtrare i set "manuali" quando la cartella ne ha molti. Reagisce immediatamente ai cambiamenti degli interruttori.

Aggiornamento dell'estensione

L'estensione ha una chiave fissa nel manifest (la build Firefox — un gecko.id fisso), il che significa che l'ID dell'estensione è immutabile tra gli aggiornamenti — i dati (cartelle, regole, impostazioni) vengono conservati. JustZix viene distribuito per quattro browser: Chrome, Edge, Opera e Firefox.

Notifica di nuova versione

Nel menu Impostazioni (accanto al numero di versione) compare un banner verde "È disponibile una nuova versione" quando il server pubblica un pacchetto più recente di quello installato. Il banner contiene un link di download. Il controllo è silenzioso — senza rete il banner semplicemente non viene mostrato.

Procedura di aggiornamento (Chrome / Edge / Opera)

1. Scarica il nuovo ZIP con l'aggiornamento
2. Estrai sovrascrivendo la stessa cartella in cui c'era la versione precedente
3. In chrome://extensions/ (Edge: edge://extensions/) trova l'estensione e clicca l'icona di aggiornamento sul riquadro
4. L'estensione si ricaricherà con i nuovi file, i dati restano

Firefox

La build Firefox si carica tramite about:debugging → "Questo Firefox" → "Carica componente aggiuntivo temporaneo" (puntando a manifest.json nella cartella justzix_firefox/). Un aggiornamento = ricaricare dopo aver sovrascritto i file.

Esempi CSS

/* Nascondi le pubblicità tipiche */
.ad, .ads, .advertisement,
.banner-ad, [class*="ad-banner"],
[id*="google_ads"] {
  display: none !important;
}

/* Nascondi il cookie banner */
.cookie-banner, #cookie-notice {
  display: none !important;
}

html {
  filter: invert(0.92) hue-rotate(180deg);
}
img, video, picture, iframe, [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

/* Colora tutti gli elementi con data-testid */
[data-testid] {
  outline: 2px dashed #f59e0b !important;
  outline-offset: -2px;
}
[data-testid]::before {
  content: attr(data-testid);
  position: absolute;
  background: #f59e0b;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 9999;
}

/* Aumenta la leggibilità delle tabelle admin */
table.admin-list td, table.admin-list th {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

/* Header sticky della tabella */
table.admin-list thead {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

/* Righe alternate */
table.admin-list tbody tr:nth-child(odd) {
  background: #f9fafb;
}

/* Spesso le pagine hanno un max-width rigido di 1200px - forza la larghezza */
.container, .main-content, main {
  max-width: 95% !important;
  width: 95% !important;
}

body::before {
  content: "AMBIENTE DEV";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #dc2626;
  color: white;
  text-align: center;
  padding: 4px;
  font-weight: bold;
  z-index: 999999;
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
body { padding-top: 28px !important; }

Esempi JavaScript

// Solo per dev! Non salvare mai password reali
window.addEventListener('load', () => {
  const login = document.querySelector('input[name="login"]');
  const pass = document.querySelector('input[name="password"]');
  if (login) login.value = 'admin@dev.local';
  if (pass) pass.value = 'devpass123';
});

// Intercetta dataLayer.push (GTM)
const origPush = window.dataLayer?.push;
if (origPush) {
  window.dataLayer.push = function(...args) {
    console.log('%c[GTM]', 'color:#16a34a;font-weight:bold', args);
    return origPush.apply(window.dataLayer, args);
  };
}

// Intercetta gtag
const origGtag = window.gtag;
if (origGtag) {
  window.gtag = function(...args) {
    console.log('%c[GA4]', 'color:#2563eb;font-weight:bold', args);
    return origGtag.apply(window, args);
  };
}

// Ogni 500ms per 10s controlla e clicca i pulsanti "Accetta"
let attempts = 0;
const interval = setInterval(() => {
  if (++attempts > 20) return clearInterval(interval);

  const buttons = [...document.querySelectorAll('button, a')];
  const target = buttons.find(b =>
    /akceptuj|zgoda|accept all/i.test(b.textContent || '')
  );
  if (target) {
    target.click();
    clearInterval(interval);
  }
}, 500);

document.addEventListener('keydown', (e) => {
  // Ctrl+Shift+S - salva il modulo
  if (e.ctrlKey && e.shiftKey && e.key === 'S') {
    e.preventDefault();
    document.querySelector('button[type="submit"]')?.click();
  }
  // Ctrl+Shift+E - passa alla modifica (esempio non testato)
  if (e.ctrlKey && e.shiftKey && e.key === 'E') {
    e.preventDefault();
    document.querySelector('a.edit-link')?.click();
  }
});

// Salta i fastidiosi confirm e beforeunload durante i test
window.confirm = () => true;
window.alert = (msg) => console.log('[alert soppresso]', msg);
window.onbeforeunload = null;
window.addEventListener('beforeunload', e => {
  e.stopImmediatePropagation();
}, true);

// Ricorda - il CSS puro non lo fa quando il genitore ha display:none
window.addEventListener('load', () => {
  const target = document.querySelector('.important-info');
  const newParent = document.querySelector('.sidebar');
  if (target && newParent) {
    newParent.prepend(target);
  }
});

// Mostra tutti gli input type="hidden" nascosti
document.querySelectorAll('input[type="hidden"]').forEach(input => {
  const wrapper = document.createElement('div');
  wrapper.style.cssText = 'background:#fef3c7;padding:4px;font-size:11px;font-family:monospace;border:1px dashed #f59e0b;';
  wrapper.innerHTML = `${input.name}: ${input.value}`;
  input.parentNode.insertBefore(wrapper, input);
});

Esempi di pulsanti azione

document.querySelectorAll('input, textarea, select').forEach(el => {
  if (el.type === 'hidden') return;
  if (el.type === 'checkbox' || el.type === 'radio') {
    el.checked = false;
  } else {
    el.value = '';
  }
  el.dispatchEvent(new Event('change', { bubbles: true }));
});

const data = {
  email: 'test@example.com',
  phone: '600000000',
  firstName: 'Mario',
  lastName: 'Test',
  street: 'Via Test 1',
  city: 'Roma',
  zip: '00100'
};
Object.keys(data).forEach(name => {
  const el = document.querySelector(`[name="${name}"]`);
  if (el) {
    el.value = data[name];
    el.dispatchEvent(new Event('input', { bubbles: true }));
    el.dispatchEvent(new Event('change', { bubbles: true }));
  }
});

// Per un negozio tipico — clicca il primo "aggiungi al carrello"
const btn = document.querySelector('.add-to-cart, [data-action="add-to-cart"]');
if (btn) btn.click();
else alert('Pulsante aggiungi al carrello non trovato');

navigator.clipboard.writeText(location.href).then(() => {
  console.log('Copiato:', location.href);
});

// Estrae il token JWT da localStorage / cookies per il debugging
const token = localStorage.getItem('authToken')
  || document.cookie.match(/token=([^;]+)/)?.[1];
if (token) {
  navigator.clipboard.writeText(token);
  alert('Token copiato. Primi caratteri: ' + token.slice(0, 20) + '...');
} else {
  alert('Nessun token');
}

// Intercetta tutte le fetch e mostrale nella console
const origFetch = window.fetch;
window.fetch = async function(...args) {
  console.log('%c[FETCH]', 'color:#2563eb', args[0]);
  const res = await origFetch.apply(this, args);
  return res;
};
console.log('Logging delle fetch abilitato. Ogni chiamata apparirà nella console.');

const info = {
  url: location.href,
  userAgent: navigator.userAgent.split(' ').pop(),
  cookies: document.cookie.split(';').length,
  localStorage: Object.keys(localStorage).length,
  framework: window.React ? 'React' : window.Vue ? 'Vue' : window.jQuery ? 'jQuery' : 'unknown'
};
alert(JSON.stringify(info, null, 2));

Scenari d'uso

1. Lavoro con più clienti / progetti

Ogni progetto ha una propria cartella con un proprio pattern URL. Puoi avere cartelle:

• justzix.com — modifiche di produzione
• justzix dev — per https://dev.justzix.com/* con un banner rosso "DEV"
• cliente X — modifiche su un altro dominio

Nel pannello laterale le cartelle private si possono abilitare/disabilitare rapidamente. L'esportazione di una singola cartella consente di condividere la configurazione con il team.

2. Ambiente di sviluppo con un'indicazione visiva

Su ogni dev/staging aggiungi un banner e l'auto-login. Un set CSS (banner) e un set JS (auto-fill). Crei una cartella separata per ogni ambiente, si combinano con un semplice checkbox.

3. Strumenti per product manager / QA

Un pannello di azioni con pulsanti: FILL (dati di test), CART (acquisto di test), CLR (svuota il modulo), STATE (mostra lo stato dell'applicazione in un alert). Senza programmatore, senza console, con un clic.

4. Modifiche di pagine pubbliche

I blog/le documentazioni preferiti con migliore leggibilità — contenitore più largo, font, modalità scura. Ogni pagina in una cartella separata, "Attivo" lasciato sempre abilitato.

5. Debugging delle analitiche / GTM

Un set per ogni dominio con JS che intercetta dataLayer.push e gtag. Lo abiliti quando un cliente segnala un problema con le analitiche, senza toccare il codice della pagina.

6. Lavoro su pannelli amministrativi

Il pattern *://*.justzix.com/admin/* e CSS che migliora tabelle, elenchi, moduli. Più un'azione "Filtro di test" che imposta automaticamente i filtri per un workflow tipico.

7. Test sicuri in produzione

L'azione RO (read-only) inietta CSS che nasconde tutti i pulsanti "Elimina", "Salva", "Invia" — una temporanea "modalità di sola lettura" per non sbagliare.

// Nascondi i pulsanti pericolosi
document.querySelectorAll(
  'button[type="submit"], .delete-btn, .danger-btn, [class*="delete"]'
).forEach(b => b.style.display = 'none');
console.warn('MODALITÀ READ-ONLY abilitata');

Problemi frequenti e soluzioni

Il JavaScript non è stato eseguito

• Verifica che la pagina corrisponda al pattern — il pulsante flottante dovrebbe essere visibile
• Il JS si esegue una volta per ciclo di vita della pagina — hai cambiato il codice? Ricarica la pagina (F5)
• Controlla la console di DevTools — gli errori JS sono loggati lì come [JustZix] JS error
• Il set deve essere Abilitato — il solo "Attivo" non basta

Il CSS non funziona

• Specificità — la pagina ha i propri stili; usa !important o selettori più specifici
• Classi dinamiche — alcuni framework generano classi tipo .css-1abcd che cambiano. Usa attributi ([data-testid]) o selettori stabili
• Shadow DOM — alcuni elementi sono nello Shadow DOM e il CSS dall'esterno non vi ha accesso. Serve il JS

Il pulsante flottante non appare

• L'URL non corrisponde a nessun pattern
• Il pulsante è stato nascosto in precedenza — nel widget popup clicca Ripristina pulsante flottante
• La pagina ha bloccato gli script iniettati (raro)

Dopo l'aggiornamento dell'estensione ho perso i dati

L'estensione ha una chiave fissa nel manifest — gli aggiornamenti successivi conservano i dati. Se nonostante ciò i dati sono spariti:

• Esporta regolarmente le impostazioni (Esporta)
• Aggiorna sovrascrivendo la stessa cartella — non cambiare il percorso
• In chrome://extensions/ usa il pulsante di aggiornamento, non rimuovere e reinstallare
• Se perdi i dati, importa l'esportazione precedente — bastano 1-2 clic

Le posizioni dei pulsanti/pannelli si resettano

È normale — le posizioni sono per finestra del browser e conservate nella memoria di sessione (chrome.storage.session). Dopo la chiusura della finestra le posizioni scompaiono, in una nuova finestra parti da quelle predefinite. La posizione sopravvive alla navigazione tra schede nella stessa finestra.

L'esportazione parziale ha omesso alcune impostazioni globali

Sì — l'esportazione parziale contiene solo le cartelle e i set selezionati più le relative impostazioni di visibilità. Non contiene le posizioni dei pannelli flottanti (sono per finestra) né altre preferenze globali. Per un backup completo usa la modalità "Tutto".

L'importazione parziale mi ha sovrascritto una cartella che prima non esisteva

La modalità "Unisci" abbina le cartelle per ID. Se il file importato aveva un ID in conflitto con una cartella esistente (es. lo stesso file era già stato importato una volta), appare un prompt: 1 sovrascrivi / 2 copia (predefinita, sicura) / Annulla. Scegliendo 2 ottieni copie con nuovi ID e l'aggiunta di "(import)" nel nome della cartella — non perdi nulla.

L'albero delle cartelle non si espande

La freccia di espansione appare solo se la cartella ha dei set. Una cartella vuota ha un puntino grigio invece della freccia. Lo stato di espansione di ogni cartella viene memorizzato in chrome.storage.local.

Non vedo il pulsante Esporta/Importa della cartella

Questi pulsanti sono nella barra della cartella (in cima all'area di modifica), accanto al pulsante "Elimina cartella". Da non confondere con i pulsanti nel menu Impostazioni, che riguardano l'insieme di tutte le impostazioni.

L'AI Helper non risponde

• Nessuna chiave API — in Impostazioni → AI Helper inserisci la chiave di almeno un provider (OpenAI / Anthropic / Gemini).
• Chiave non valida — la finestra mostrerà l'errore restituito dal provider; verifica la chiave e i limiti dell'account presso il provider.
• La chiave non si è sincronizzata sul secondo dispositivo — la sincronizzazione funziona solo per le chiavi con il checkbox „sincronizza" selezionato e richiede un account di sincronizzazione JustZix connesso.

Conflitto con la Content Security Policy

Il JS di regole e azioni viene eseguito nel contesto della pagina con una strategia a livelli resistente alle regole rigide della Content Security Policy. La maggior parte delle pagine — inclusi grandi servizi come Facebook — funziona subito, senza configurazione.

Le pagine con una CSP molto rigida (alcune banche, siti aziendali) possono bloccare l'esecuzione. Affinché il JS funzioni su ogni pagina, abilita per JustZix l'opzione «Consenti script utente»: apri chrome://extensions, vai ai dettagli di JustZix e attiva l'interruttore (i browser più vecchi richiedono anche la modalità sviluppatore). Quando una pagina blocca l'esecuzione, la finestra JavaScript / la Console JS mostra un messaggio adeguato.

JustZix — manuale