← Alle Beiträge

Fenster im Frontend

JS pane: Run-on-demand-Skripte, kein Auto-Run bei jedem Besuch

15 Mai 2026 · von JustZix Team

Eine JustZix-JS-Regel läuft automatisch, wenn die URL passt. Toll für Dinge, die immer funktionieren sollen — Cookie-Banner automatisch überspringen, eigene Kürzel. Aber manche Skripte sind destruktiv: „Warenkorb leeren", „E-Mail-Entwurf löschen", „Formular zurücksetzen". Die willst du nicht auf Auto-Run. Du willst auf ▶ klicken nur, wenn du willst. Das ist ein JS pane (v2.13.56+).

Drei JS-Fenster — welches wofür

Ein JS pane sieht fast aus wie ein CSS pane (Textarea, ziehbar, farbiger Punkt), hat aber einen zusätzlichen ▶-Run-Button im Header. Der Code lebt in der Textarea, führt sich nie automatisch aus — die eine Ausnahme ist Resume nach Reload (wenn vor F5 etwas im sessionStorage war, führt JustZix es erneut aus, um den Zustand von vor dem Refresh wiederherzustellen).

Erste Nutzung

1. JustZix-Optionen → Ordner/Gruppe/Regel → „Fenster" → „+ JS pane".
2. Name: „Warenkorb leeren", Farbe: Bernstein (Standard #D65D0E).
3. Besuche shop.com/cart. Das Pane erscheint oben rechts mit einem Header („• Warenkorb leeren [▶]") und einer leeren Textarea.
4. Tippe:

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

5. Ctrl+Enter (oder Klick auf ▶). Alle „Entfernen"-Buttons geklickt.

Dirty-State — du siehst visuell, dass es eine Änderung gibt

Nach dem Tippen / Bearbeiten von Code zeigt der Run-Button bis zur Ausführung (oder bis du zur zuletzt ausgeführten Version zurückkehrst) einen „dirty"-Zustand (mit einer eigenen runColor — ab v2.13.64 frei wählbar). Es ist ein visueller Hinweis: „du hast nicht ausgeführte Änderungen".

Klick auf ▶ → der Code läuft, der Dirty-State verschwindet. Setz die Textarea auf einen früheren Wert zurück → dirty erscheint wieder. JustZix vergleicht den aktuellen Inhalt mit el.dataset.jzLastRun.

Error-Overlay — du brauchst die DevTools nicht offen

Wenn das Eval eine Exception wirft, erscheint unten im Pane ein roter Balken (.jz-pane-error):

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

Klick erneut auf ▶ mit korrigiertem Code → der Fehler verschwindet. Kein Auf-und-Zu-Klappen von F12 nötig. Für Async-Fehler (ein werfendes setTimeout(...)) fängt das Overlay sie nicht — bekannte Einschränkung, Async-Fehler müssen über die DevTools oder die JustZix JS Console verfolgt werden.

Persistent vs. flüchtig — welches Szenario

Der Inhalt eines JS pane persistiert in sessionStorage['jz_pane_{id}_content'] pro Tab. Konsequenzen:

• F5 / Navigation im Tab — das Pane mountet neu, die Textarea liest den Code zurück, Auto-Resume führt ihn erneut aus. Der Seitenzustand nach dem Reload = Zustand nach dem ersten Lauf.
• Neuer Tab auf derselben Domain — das Pane erscheint leer. Jeder Tab hat seinen eigenen sessionStorage.
• Tab schließen — der Pane-Inhalt ist weg. Die Pane-Definition selbst (Name, Farbe, Scope) bleibt, weil das chrome.storage ist, aber die Textarea kehrt zu leer zurück.

Wenn du Code dauerhaft willst (auch nach dem Schließen des Tabs) — das ist kein Pane, das ist eine JS-Regel. Pane = Notizzettel mit einem Run-Button.

Anwendungsfall 1 — zustandsspezifische destruktive Aktionen

Aufräumen in einem Shop-Admin-Panel. Aktion „Alle Demo-Produkte aus dem Warenkorb entfernen":

// Läuft nur, wenn du auf ▶ klickst. Auto-Run = Katastrophe.
if (!location.href.includes('/admin/demo')) {
  throw new Error('Nur für /admin/demo');
}
const rows = document.querySelectorAll('tr.product');
console.log(`Entferne ${rows.length} Produkte...`);
for (const row of rows) {
  await fetch('/api/products/' + row.dataset.id, { method: 'DELETE' });
  row.remove();
}
console.log('Fertig.');

Schutz: URL-Guard + Pane-Name „CLEANUP DEMO" + Bernstein-Punkt. Schwer versehentlich zu machen.

Anwendungsfall 2 — Bulk-Operationen

50 Nutzer müssen als „verifiziert" markiert werden. Die UI erlaubt Klick-pro-Nutzer. 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));  // drosseln, damit die API nicht meckert
  count++;
}
console.log(`${count} Nutzer verifiziert.`);

Ein Klick auf ▶, 50 Nutzer. 200 ms Sleep, damit wir die API nicht fluten. Dreimal schneller als der echte Bulk-Endpunkt, den es nicht gibt.

Anwendungsfall 3 — geskriptete Demo

Du zeigst einem Kunden den Flow „3 Produkte hinzufügen + zum Checkout + Testdaten ausfüllen". 30 Sekunden jedes Mal. Ein Pane-Skript erledigt alles in 2 Sekunden:

// Demo-Flow
[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 })); }
});

Der Kunde sieht einen „Autopilot"-Flow. Professionell. Ohne in Echtzeit zu tippen.

Fallstricke

• Async-Fehler erscheinen nicht im Overlay — setTimeout(() => { throw new Error('x') }, 100) landet in der globalen Konsole, nicht in der Pane-Fehlerbox. Workaround: try/catch in Async-Funktionen einwickeln.
• Resume nach Reload kann dich überraschen — wenn du gestern etwas Destruktives getippt hast, führt der heutige Reload es erneut aus. Best Practice: Panes, die du nicht auto-resumed willst → Inhalt vor dem Schließen des Tabs leeren (Ctrl+A, Entf, ▶ auf leer = löscht jzLastRun).
• Top-Level-await funktioniert NICHT. Wickle es in eine IIFE: (async () => { await ... })().
• MAIN-world-Zugriff — das JS pane läuft im Seitenkontext (über chrome.scripting.executeScript world=MAIN), sieht also Seiten-Globals (React, Redux-Store, jQuery usw.). Genau wie JS-Regeln.

Was kommt als Nächstes

Das JS pane ist der 2. „Fenster auf der Seite"-Typ in JustZix. Wir haben zuvor über CSS pane (Live-CSS-Editor) und JS Console (REPL) geschrieben. Die drei zusammen sind eine Mini-IDE direkt in deinem Browser-Tab, je Domain gescoped.

Installiere JustZix und bekomm Run-on-demand-Skripte auf jeder Seite, ohne das Auto-Run-Risiko.