← Tutti gli articoli

Finestre nel frontend

JS pane: script Run-on-demand, niente auto-run a ogni visita

15 maggio 2026 · di JustZix Team

Una regola JS di JustZix gira automaticamente quando l'URL corrisponde. Ottimo per le cose che devono sempre funzionare — saltare automaticamente i banner dei cookie, scorciatoie personalizzate. Ma alcuni script sono distruttivi: «svuota il carrello», «elimina la bozza dell'e-mail», «resetta il modulo». Quelli non li vuoi in auto-run. Vuoi cliccare ▶ solo quando vuoi. È un JS pane (v2.13.56+).

Tre finestre JS — quale per cosa

Un JS pane sembra quasi un CSS pane (textarea, trascinabile, punto colorato), ma ha un pulsante ▶ Run aggiuntivo nell'header. Il codice vive nella textarea, non si auto-esegue mai — l'unica eccezione è il resume dopo il ricaricamento (se c'era qualcosa nel sessionStorage prima di F5, JustZix lo riesegue per ripristinare lo stato precedente al refresh).

Primo utilizzo

1. Opzioni di JustZix → cartella/gruppo/regola → «Finestre» → «+ JS pane».
2. Nome: «Svuota il carrello», colore: ambra (predefinito #D65D0E).
3. Visita shop.com/cart. Il pane appare in alto a destra con un header («• Svuota il carrello [▶]») e una textarea vuota.
4. Digita:

   document.querySelectorAll('.cart-item .remove-btn')
     .forEach(btn => btn.click());

5. Ctrl+Enter (o clic ▶). Tutti i pulsanti «Rimuovi» cliccati.

Stato dirty — sai visivamente che c'è una modifica

Dopo aver digitato / modificato il codice, finché non lo esegui (o torni all'ultima versione eseguita), il pulsante Run mostra uno stato «dirty» (con una runColor personalizzata — da v2.13.64 puoi scegliere la tua). È un segnale visivo: «hai modifiche non eseguite».

Clic ▶ → il codice viene eseguito, lo stato dirty sparisce. Riporta la textarea a un valore precedente → dirty riappare. JustZix confronta il contenuto attuale con el.dataset.jzLastRun.

Overlay di errore — non servono i DevTools aperti

Quando l'eval lancia un'eccezione, in fondo al pane appare una barra rossa (.jz-pane-error):

Errore JS: Cannot read properties of null (reading 'click')

Clicca di nuovo ▶ con il codice corretto → l'errore sparisce. Niente apri-e-chiudi di F12. Per gli errori async (un setTimeout(...) che lancia) l'overlay non li cattura — limite noto, gli errori async vanno tracciati tramite i DevTools o la JS Console di JustZix.

Persistente vs effimero — quale scenario

Il contenuto di un JS pane persiste in sessionStorage['jz_pane_{id}_content'] per scheda. Conseguenze:

• F5 / navigazione nella scheda — il pane si rimonta, la textarea rilegge il codice, l'auto-resume lo riesegue. Lo stato della pagina dopo il ricaricamento = stato dopo la prima esecuzione.
• Nuova scheda sullo stesso dominio — il pane appare vuoto. Ogni scheda ha il proprio sessionStorage.
• Chiudere la scheda — il contenuto del pane è perso. La definizione del pane stessa (nome, colore, scope) resta perché è chrome.storage, ma la textarea torna vuota.

Se vuoi codice in permanenza (anche dopo aver chiuso la scheda) — non è un pane, è una regola JS. Pane = blocco per appunti con un pulsante Run.

Caso d'uso 1 — azioni distruttive specifiche di uno stato

Pulizia in un pannello di amministrazione di un negozio. Azione «Rimuovi tutti i prodotti demo dal carrello»:

// Gira solo quando clicchi ▶. Auto-run = disastro.
if (!location.href.includes('/admin/demo')) {
  throw new Error('Solo per /admin/demo');
}
const rows = document.querySelectorAll('tr.product');
console.log(`Rimozione di ${rows.length} prodotti...`);
for (const row of rows) {
  await fetch('/api/products/' + row.dataset.id, { method: 'DELETE' });
  row.remove();
}
console.log('Fatto.');

Difesa: guardia sull'URL + nome del pane «CLEANUP DEMO» + punto ambra. Difficile da fare per sbaglio.

Caso d'uso 2 — operazioni in massa

50 utenti devono essere segnati come «verificati». La UI consente il clic-per-utente. JS pane:

const rows = document.querySelectorAll('.user-row:not(.verified)');
let count = 0;
for (const row of rows) {
  row.querySelector('.btn-verify')?.click();
  await new Promise(r => setTimeout(r, 200));  // throttle perché l'API non protesti
  count++;
}
console.log(`${count} utenti verificati.`);

Un clic ▶, 50 utenti. 200 ms di sleep per non inondare l'API. Tre volte più veloce del vero endpoint bulk che non esiste.

Caso d'uso 3 — demo scriptata

Stai mostrando a un cliente il flusso «aggiungi 3 prodotti + vai al checkout + compila dati di test». 30 secondi ogni volta. Uno script di pane fa tutto in 2 secondi:

// Flusso demo
[1, 2, 3].forEach(i => document.querySelector(`[data-product-id="${i}"] .add-btn`)?.click());
await new Promise(r => setTimeout(r, 500));
document.querySelector('.checkout-btn').click();
await new Promise(r => setTimeout(r, 1000));
Object.entries({
  email: 'demo@example.com', name: 'Demo', address: 'Test 1'
}).forEach(([k, v]) => {
  const el = document.querySelector(`[name="${k}"]`);
  if (el) { el.value = v; el.dispatchEvent(new Event('input', { bubbles: true })); }
});

Il cliente vede un flusso «pilota automatico». Professionale. Senza digitare in tempo reale.

Trappole

• Gli errori async non appaiono nell'overlay — setTimeout(() => { throw new Error('x') }, 100) finisce nella console globale, non nella casella di errore del pane. Workaround: avvolgi try/catch dentro funzioni async.
• Il resume dopo il ricaricamento può sorprenderti — se ieri hai digitato qualcosa di distruttivo, il ricaricamento di oggi lo riesegue. Best practice: i pane che non vuoi auto-ripresi → svuota il contenuto prima di chiudere la scheda (Ctrl+A, Canc, ▶ su vuoto = azzera jzLastRun).
• Il top-level await NON funziona. Avvolgilo in una IIFE: (async () => { await ... })().
• Accesso al MAIN world — il JS pane gira nel contesto della pagina (via chrome.scripting.executeScript world=MAIN), quindi vede le globali della pagina (React, store Redux, jQuery, ecc.). Come le regole JS.

Cosa fare dopo

Il JS pane è il 2° tipo di «finestra nella pagina» di JustZix. Abbiamo scritto in precedenza sul CSS pane (editor CSS in tempo reale) e sulla JS Console (REPL). I tre insieme sono una mini-IDE direttamente nella scheda del browser, con scope per dominio.

Installa JustZix e ottieni script Run-on-demand su ogni pagina, senza il rischio dell'auto-run.