← Alle Beiträge

Aktionstypen

BUTTON: die einfachste JustZix-Aktion — Fire-and-forget mit Anpassung pro Button

15 Mai 2026 · von JustZix Team

Ein Aktionstyp ist so simpel, dass er in Beiträgen übersprungen wird. BUTTON — Klick → Code ausführen → fertig. Kein Zustand, keine Memory, keine Optionsliste zur Auswahl. Es ist eine „zustandslose Funktion" in der Aktionsleiste. Aber genau diese Einfachheit macht ihn am stärksten: BUTTON ist 80 % aller Aktionen in einem typischen JustZix-Setup, weil die meisten Dinge, die du tun willst, „Klick = X" sind.

Wann BUTTON, wann etwas anderes?

Nur BUTTON ist zustandslos. Alle anderen Typen halten einen Wert pro action.id (sessionStorage + chrome.storage.local-Backup). BUTTON = reine Funktion: Eingabe (Klick) → Ausgabe (Effekt auf der Seite).

Erste BUTTON-Aktion

Im JustZix-Editor → Regel → Aktionsleiste → „+ BUTTON". Konfiguration:

label: "🚀 Demo füllen"   // Button-Text + Icon
code: |
  // value, $el, $action werden automatisch als Extras injiziert
  document.querySelector('[name=email]').value = 'demo@test.com';
  document.querySelector('[name=name]').value = 'Demo User';
  document.querySelectorAll('input, textarea').forEach(el =>
    el.dispatchEvent(new Event('input', { bubbles: true }))
  );
  JUSTZIX.log('Demo-Daten gefüllt.');

Klick „🚀 Demo füllen" → Formularfelder gefüllt, das Framework der Seite (React/Vue/Angular) sieht das input-Event → Zustand aktualisiert.

Zwei Farben + customStyles

BUTTON hat 2 Grundfarben:

color       → Button-Hintergrund
colorText   → Label-Textfarbe (und Icon, falls Emoji)

Dazu ein optionales customStyles-Objekt — granulares CSS-Override:

customStyles: {
  padding: '8px 16px',         // Standard 6px 12px
  fontSize: '14px',             // Standard 12px
  borderRadius: '4px',          // Standard 6px
  fontFamily: 'Fira Code, monospace',
  fontWeight: '600',
  letterSpacing: '0.5px',
}

Rendering: jede customStyles-Eigenschaft läuft durch el.style.setProperty(key, value, 'important') — schlägt JustZix-Standardregeln. So kannst du Buttons an den Markenstil der Seite anpassen, die du modifizierst (z. B. Bootstrap-Blau, Material-Design-Ripple, Anpassung pro Domain).

Was im Code-Feld verfügbar ist

BUTTON-Code läuft im MAIN world (chrome.scripting.executeScript world:'MAIN') über background.js. Automatisch verfügbar:

• window.JZ — Action-Helper (JZ.click, JZ.value, JZ.setValue usw.), wenn nicht kollidiert
• window.JUSTZIX — Logger (seit v2.13.76, Markenname, immer verfügbar)
• $el — Referenz auf den Button (HTMLElement) — nützlich, wenn du den Button selbst nach dem Klick ändern willst
• $action — Objekt {id, label, type, el} — Meta-Info über die Aktion
• Voller Seitenkontext — alle window-Globals der Seite (jQuery, React-Internals usw.)
• async/await OK — der Wrapper ist eine async IIFE

Anwendungsfall 1 — Schnelle Ketten

Häufig wiederholte Aktionssequenzen lassen sich mit einem einzigen Button automatisieren:

// Aktion „🔥 Test-Flow"
JZ.click('Login');               // klickt die BUTTON-Aktion mit Label „Login"
await new Promise(r => setTimeout(r, 500));
JZ.click('In den Warenkorb');
await new Promise(r => setTimeout(r, 500));
JZ.click('Checkout');
JUSTZIX.log('Test-Flow abgeschlossen.');

Kette aus 3 Buttons in 1 → ein Klick auf „Test-Flow" feuert sie nacheinander. Jeder der 3 Sub-Buttons kann weiterhin einzeln wiederverwendet werden.

Anwendungsfall 2 — Bedingte Ausführung

BUTTON ist „bei Bedarf ausführen", also perfekt für destruktive Skripte mit einem URL-Schutz:

// Aktion „🗑️ Staging-Warenkorb leeren"
if (!location.hostname.includes('staging')) {
  JUSTZIX.error('Nur auf Staging! Abbruch.');
  alert('Dieser Button funktioniert nur auf Staging.');
  return;
}
const items = document.querySelectorAll('.cart-item .remove-btn');
items.forEach(btn => btn.click());
JUSTZIX.log(`${items.length} Artikel geleert.`);

Kein Auto-Run-Risiko (wie beim JS pane), kein manuell zu füllendes Textfeld — nur ein Klick, wann du willst, wo du willst.

Anwendungsfall 3 — Visuelles Feedback nach dem Klick

Alter Klassiker: ein Button, der bei Erfolg sein Label ändert:

// Aktion „💾 Zustand speichern"
const oldLabel = $el.textContent;
$el.textContent = '⏳ Speichern...';
$el.style.opacity = '0.6';
try {
  await fetch('/api/state', {
    method: 'POST',
    body: JSON.stringify(getState()),
  });
  $el.textContent = '✓ Gespeichert';
  setTimeout(() => {
    $el.textContent = oldLabel;
    $el.style.opacity = '';
  }, 2000);
} catch (e) {
  $el.textContent = '✗ Fehler';
  JUSTZIX.error('Speichern fehlgeschlagen', e);
}

$el ist die DOM-Referenz des Buttons — ändere ihn direkt. Visuelles Feedback ohne externen Zustand.

Anwendungsfall 4 — Mehrere Buttons, ein Flow

Statt eines „Voller QA-Flow"-Buttons, 5 separate in einem visuellen Cluster:

// Aktion „1️⃣"
JUSTZIX.log('Schritt 1: Login');
JZ.click('Als Testuser anmelden');

// Aktion „2️⃣"
JUSTZIX.log('Schritt 2: navigieren');
location.href = '/admin/orders';

// Aktion „3️⃣"
JUSTZIX.log('Schritt 3: filtern');
document.querySelector('select.status').value = 'pending';
document.querySelector('select.status').dispatchEvent(new Event('change'));

Jeder Schritt als separater Button → der User sieht visuell, wo er im Flow steht. Außerdem kann er jeden Schritt wiederholen, ohne neu zu starten.

Fallstricke

• BUTTON-Code MUSS ein Label haben. Die isActionRenderable-Prüfung erfordert beides (Label + Code). Eine Aktion ohne Code wird nie gerendert.
• customStyles via setProperty(..., 'important') schlägt das meiste Seiten-CSS, aber manche Seiten-Styles nutzen spezifische Pseudo-Elemente (::before mit content) — customStyles kann dort nicht helfen. Workaround: füge eine CSS-Regel im CSS-Abschnitt derselben Regel hinzu (kaskadierendes !important gewinnt weiterhin).
• Code läuft im MAIN world. Heißt: Seitenskripte (React, Vue, jQuery) sehen die Events, die du dispatchst. Aber auch: Seitenskripte können deinen Code stören (z. B. fetch, console überschreiben). Der Output-Console-Fix via chrome.scripting.executeScript hilft (CSP-immun), aber das allgemeine Prinzip: Seite und dein Code teilen sich den Scope.
• Async-Fehler im Code erscheinen nicht automatisch in der Output Console. Wickle try/catch um await-Statements + explizites JUSTZIX.error. Oder: nutze window.addEventListener('error') global in einer JS-Regel.
• Kein eingebautes Throttle/Debounce. Klick-Klick-Klick = 3 unabhängige Code-Aufrufe. Wenn der Code teuer ist (fetch, DOM-Rewrite), schütze ihn selbst: let busy = false; + Guard.

Wie es weitergeht

BUTTON ist das Rückgrat aller JustZix-Toolbars. Sieh dir auch andere Aktionstypen an:

• SELECT static vs js — aus einer Optionsliste wählen
• INPUT — einzeiliger Text + Enter→Run
• TEXTAREA — mehrzeiliger Notizblock
• SLIDER — nativer Range-Controller
• TOGGLE3 — 3-Zustands-Segmented-Controls
• window.JZ + JUSTZIX helpers — programmatische API

Installiere JustZix — komplett kostenlos, kein Konto, kein Server.