← Tous les articles

Fenêtres sur le frontend

JS pane : scripts Run-on-demand, pas d'auto-exécution à chaque visite

15 mai 2026 · par JustZix Team

Une règle JS JustZix s'exécute automatiquement quand l'URL correspond. Parfait pour ce qui doit toujours marcher — sauter automatiquement les bannières cookies, raccourcis personnalisés. Mais certains scripts sont destructifs : « vider le panier », « supprimer le brouillon d'e-mail », « réinitialiser le formulaire ». Vous ne voulez pas ceux-là en auto-exécution. Vous voulez cliquer ▶ seulement quand vous le voulez. C'est un JS pane (v2.13.56+).

Trois fenêtres JS — laquelle pour quoi

Un JS pane ressemble presque à un CSS pane (textarea, déplaçable, point coloré), mais a un bouton ▶ Run supplémentaire dans l'en-tête. Le code vit dans la textarea, ne s'auto-exécute jamais — l'unique exception est le resume après rechargement (s'il y avait quelque chose dans le sessionStorage avant F5, JustZix le réexécute pour restaurer l'état d'avant le refresh).

Première utilisation

1. Options JustZix → dossier/groupe/règle → « Fenêtres » → « + JS pane ».
2. Nom : « Vider le panier », couleur : ambre (par défaut #D65D0E).
3. Visitez shop.com/cart. Le pane apparaît en haut à droite avec un en-tête (« • Vider le panier [▶] ») et une textarea vide.
4. Tapez :

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

5. Ctrl+Enter (ou clic ▶). Tous les boutons « Retirer » cliqués.

État dirty — vous savez visuellement qu'il y a un changement

Après avoir tapé / édité du code, jusqu'à ce que vous l'exécutiez (ou reveniez à la dernière version exécutée), le bouton Run montre un état « dirty » (avec une runColor personnalisée — à partir de v2.13.64 vous pouvez choisir la vôtre). C'est un indice visuel : « vous avez des changements non exécutés ».

Clic ▶ → le code s'exécute, l'état dirty disparaît. Ramenez la textarea à une valeur antérieure → dirty réapparaît. JustZix compare le contenu actuel avec el.dataset.jzLastRun.

Overlay d'erreur — pas besoin des DevTools ouverts

Quand l'eval lève une exception, une barre rouge apparaît en bas du pane (.jz-pane-error) :

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

Cliquez ▶ à nouveau avec le code corrigé → l'erreur disparaît. Pas besoin de battre F12. Pour les erreurs async (un setTimeout(...) qui lève) l'overlay ne les attrape pas — limitation connue, les erreurs async doivent être suivies via les DevTools ou la JS Console JustZix.

Persistant vs éphémère — quel scénario

Le contenu d'un JS pane persiste dans sessionStorage['jz_pane_{id}_content'] par onglet. Conséquences :

• F5 / navigation dans l'onglet — le pane se remonte, la textarea relit le code, l'auto-resume le réexécute. L'état de la page après rechargement = état après la première exécution.
• Nouvel onglet sur le même domaine — le pane apparaît vide. Chaque onglet a son propre sessionStorage.
• Fermer l'onglet — le contenu du pane est parti. La définition du pane elle-même (nom, couleur, scope) reste car c'est du chrome.storage, mais la textarea revient à vide.

Si vous voulez du code en permanence (même après fermeture de l'onglet) — ce n'est pas un pane, c'est une règle JS. Pane = bloc-notes avec un bouton Run.

Cas d'usage 1 — actions destructives spécifiques à un état

Nettoyage dans un panneau d'admin de boutique. Action « Vider tous les produits de démo du panier » :

// Ne s'exécute que quand vous cliquez ▶. Auto-run = désastre.
if (!location.href.includes('/admin/demo')) {
  throw new Error('Uniquement pour /admin/demo');
}
const rows = document.querySelectorAll('tr.product');
console.log(`Suppression de ${rows.length} produits...`);
for (const row of rows) {
  await fetch('/api/products/' + row.dataset.id, { method: 'DELETE' });
  row.remove();
}
console.log('Terminé.');

Défense : garde d'URL + nom du pane « CLEANUP DEMO » + point ambre. Difficile à faire par accident.

Cas d'usage 2 — opérations en masse

50 utilisateurs doivent être marqués « vérifiés ». L'UI permet le clic-par-utilisateur. 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 pour que l'API ne crie pas
  count++;
}
console.log(`${count} utilisateurs vérifiés.`);

Un clic ▶, 50 utilisateurs. 200 ms de sleep pour ne pas inonder l'API. Trois fois plus rapide que le vrai endpoint en masse qui n'existe pas.

Cas d'usage 3 — démo scriptée

Vous montrez à un client le flux « ajouter 3 produits + aller au checkout + remplir des données de test ». 30 secondes à chaque fois. Un script de pane fait tout en 2 secondes :

// Flux de démo
[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 })); }
});

Le client voit un flux « pilote automatique ». Professionnel. Sans taper en temps réel.

Pièges

• Les erreurs async n'apparaissent pas dans l'overlay — setTimeout(() => { throw new Error('x') }, 100) finit dans la console globale, pas dans la boîte d'erreur du pane. Contournement : enveloppez try/catch dans des fonctions async.
• Le resume après rechargement peut vous surprendre — si vous avez tapé quelque chose de destructif hier, le rechargement d'aujourd'hui le réexécute. Bonne pratique : les panes que vous ne voulez pas auto-resumés → videz le contenu avant de fermer l'onglet (Ctrl+A, Suppr, ▶ sur vide = efface jzLastRun).
• Le top-level await ne fonctionne PAS. Enveloppez dans une IIFE : (async () => { await ... })().
• Accès au MAIN world — le JS pane s'exécute dans le contexte de la page (via chrome.scripting.executeScript world=MAIN), il voit donc les globales de la page (React, store Redux, jQuery, etc.). Comme les règles JS.

Et ensuite

Le JS pane est le 2e type de « fenêtre sur la page » de JustZix. Nous avons précédemment écrit sur le CSS pane (éditeur CSS en direct) et la JS Console (REPL). Les trois ensemble forment une mini-IDE directement dans votre onglet de navigateur, scopée par domaine.

Installez JustZix et obtenez des scripts Run-on-demand sur chaque page, sans le risque de l'auto-exécution.