← Alle Beiträge

API & Helfer

window.JZ: Helfer, um Buttons, Slider und Output Console aus Code zu steuern

15 Mai 2026 · von JustZix Team

Vergiss für einen Moment, dass JustZix CSS und JS in jede Seite injiziert. Konzentrier dich auf die Tatsache, dass jede Aktion — Button, Slider, Select, Toggle3, Input, Textarea — ein lebendes DOM-Element ist, das du aus anderem Code steuern kannst. Du brauchst zwei getrennte Namespaces in der MAIN world: window.JZ (Aktions-Helfer) und window.JUSTZIX (Logger). Jeder hat seinen eigenen Lebenszyklus, seinen eigenen Zweck, und sie vermischen sich bewusst nicht.

Warum zwei Namespaces und nicht einer

Logger (write-only, Dispatch in die Output Console) und DOM-Adressierbarkeit (Elemente lesen/manipulieren, die bereits im Seiten-DOM leben) sind zwei verschiedene Semantiken. Sie zusammenzupacken würde die Belange vermischen. Ein Nutzer, der Code liest, sieht JUSTZIX.log(...) und weiß: „das ist ein Logger". Er sieht document.querySelector('[data-jz-action-id="x"]') und weiß: „das ist eine DOM-Abfrage". Außerdem — die native DOM-API + data-*-Attribute gewinnen immer gegen einen proprietären Wrapper (funktioniert mit DevTools-Inspect, mit Drittanbieter-Bibliotheken, mit Copy-paste aus dem Internet).

Idempotent — die Installation ist nach Version gegated (_jzVersion für JZ, Hook-Flag für JUSTZIX), sodass Erweiterungs-Upgrades die Namespaces nicht mitten in der Sitzung überschreiben.

Die volle API-Oberfläche

// ============================================================
// window.JZ — Aktions-Helfer
// Arbeitet auf data-jz-action-id-Elementen im DOM.
// Kann von Seitenskripten belegt sein → Fallback: native DOM-Abfrage.
// ============================================================
JZ.action(labelOrId)     // Element nach Label ODER id. Nach Label case-insensitive.
JZ.actionById(id)        // Element nach data-jz-action-id. Kein Label-Fallback.
JZ.actions()             // Array aller Aktions-Elemente im DOM.
JZ.labels()              // Array der Labels (originale Schreibweise).
JZ.click(labelOrId)      // Programmatischer Klick. Für <select> wählt die erste Option.
                          // Gibt true/false zurück.
JZ.value(labelOrId)      // Aktueller Aktionswert (String oder null).
JZ.setValue(labelOrId, value)  // Programmatischer Setter + dispatcht input + change.
JZ.bars()                // Array aller .jz-actions-bar im DOM.
JZ.barById(id)           // Bar nach data-jz-bar-id.
JZ.floatingBtn()         // Das schwebende JustZix-Button-Element (wenn aktiviert).

// ============================================================
// window.JUSTZIX — Logger (seit v2.13.73, primärer Alias seit v2.13.76)
// Dispatcht in die Output Console (kind='jz'); leitet NICHT in native console.*.
// Markenname = verschwindend kleines Kollisionsrisiko. Funktioniert überall.
// ============================================================
JUSTZIX.log(...args)
JUSTZIX.warn(...args)
JUSTZIX.error(...args)
JUSTZIX.info(...args)
JUSTZIX.debug(...args)

// Aliase auf dieselbe API:
window.__JUSTZIX__       // immer gesetzt (Rückwärtskompatibilität mit v2.13.72-75)
window.JZ                // außerdem, nur wenn nicht belegt — eine kürzere Abkürzung

// Fallback, wenn window.JZ von der Seite belegt ist (z. B. Google Ads):
// → kein JUSTZIX.click()-Äquivalent; nutze natives DOM.
document.querySelector('[data-jz-action-id="..."]').click();

Anwendungsfall 1 — ein Button klickt einen anderen Button

Du hast die Aktionen „Login → Dashboard → Stats". Drei separate Buttons in einer Aktionsleiste. Füge einen vierten „🚀 Quick" hinzu, der alle drei nacheinander ausführt:

// BUTTON-Aktion "Quick" — Code-Feld:
JZ.click('Login');
await new Promise(r => setTimeout(r, 800));
JZ.click('Dashboard');
await new Promise(r => setTimeout(r, 500));
JZ.click('Stats');
JUSTZIX.log('Quick-Flow fertig — 3 Klicks in 1');

Bonus: dieses Skript weiß nichts über die Seite, nur über seine eigenen JustZix-Aktionen. Ändere die Selektoren in „Login" / „Dashboard" — „Quick" funktioniert weiter, da es sie nach Label aufruft.

Anwendungsfall 2 — ein Slider steuert eine CSS-Variable

SLIDER-Aktion „Helligkeit" (Bereich 50-150, Standard 100). In ihrem Code-Feld:

// Der Slider führt diesen Code bei jeder Änderung aus.
// `value` ist eine vom Erweiterung injizierte extraVar (seit v2.12.2).
document.documentElement.style.setProperty('--brightness', value + '%');

Jetzt kannst du in einer anderen Aktion (BUTTON „Reset") den Wert des Sliders programmatisch setzen:

JZ.setValue('Helligkeit', 100);  // Slider springt auf 100, CSS-Variable aktualisiert, Helligkeit zurückgesetzt.
JUSTZIX.log('Helligkeit auf 100% zurückgesetzt');

Dasselbe funktioniert für TOGGLE3 (3-Zustands-Schalter wie „Dev / Staging / Prod"): JZ.setValue('Umgebung', 'staging') aktiviert genau diesen Zustand und führt seinen Code aus.

Anwendungsfall 3 — Output Console als „Notizzettel"

Die Output Console (seit v2.13.66) ist ein Pane, das alle console.log-Ausgaben der Seite erfasst. Seiten wie Gmail spammen die Konsole mit Hunderten Zeilen pro Sekunde. String-Filter helfen, aber ein besserer Trick: schreib nur deine Nachrichten über JUSTZIX.log und schalte das Pane dann in den Modus [J] (Just JustZix).

// In einer Aktion "Warenkorb prüfen": logge nur DEINE Nachrichten, kein Seitenrauschen.
const items = document.querySelectorAll('.cart-item');
JUSTZIX.log(`Warenkorb hat ${items.length} Artikel`);
items.forEach((it, i) => {
  const price = parseFloat(it.querySelector('.price')?.textContent || 0);
  JUSTZIX.log(`  [${i}] ${it.dataset.sku} — $${price}`);
});
const total = [...items].reduce((s, it) => s + parseFloat(it.querySelector('.price')?.textContent || 0), 0);
JUSTZIX.log(`Gesamt: $${total}`);

Das Output-Console-Pane im Modus [J] zeigt NUR diese 3 Zeilen — vollständig sauber, perfekt für eine QA-Toolbar oder einen Kunden-zugewandten Kontext.

Was, wenn die Seite bereits window.JZ hat?

Der Logger funktioniert immer — JUSTZIX.log() hat einen Markennamen (verschwindend kleines Kollisionsrisiko) und ist der primäre. Außerdem ist window.__JUSTZIX__ immer als Fallback-Alias gesetzt. Ein window.JZ-Konflikt betrifft nur die Aktions-Helfer — und selbst dann hast du einen nativen Ausweg.

Manche Seiten (z. B. Google Ads) haben ihr eigenes window.JZ. JustZix erkennt das: wenn window.JZ beim Installieren des Loggers bereits existiert, überschreibt die Erweiterung die API der Seite nicht und vermerkt das in der Begrüßungsnachricht der Output Console. Die kurze JZ-Abkürzung ist dann für die Seite reserviert — nutze JUSTZIX zum Loggen und natives DOM für Aktionen:

// Logger: immer JUSTZIX (funktioniert auch, wenn JZ von der Seite belegt ist)
JUSTZIX.log('Warenkorb verarbeitet');

// Aktions-Klick: wenn window.JZ belegt ist → natives DOM statt JZ.click() nutzen
document.querySelector('[data-jz-action-id="actionId"]').click();
// Oder nach data-jz-key (Label in Großbuchstaben):
document.querySelector('.jz-actions-bar [data-jz-key="LOGIN"]').click();

Das ist bewusstes Design: data-jz-action-* + querySelector ist ein natives Muster — es funktioniert mit DevTools-Inspect, mit Drittanbieter-Bibliotheken, mit Copy-paste aus dem Internet. JZ.click() ist Zucker — eine optionale Indirektionsschicht, die du auslassen kannst, wenn sie nicht verfügbar ist.

Fallstricke

• JZ.click() auf INPUT/TEXTAREA klickt sie nur, ändert ihren Wert nicht. Um Text zu setzen: JZ.setValue('Suche', 'foo'). Andere Typen (button, select, toggle3, slider) haben ein sinnvolles Klick-Standardverhalten.
• JZ.value()/setValue() wurden seit v2.13.33 am vollständigsten. Ältere Versionen hatten keinen Slider-Wert im Dataset — wenn du für einen Slider null siehst, prüfe deine Erweiterungsversion.
• Label-Lookup ist case-insensitive, aber ID-Lookup ist case-sensitive. Empfohlen: bleib bei Labels (deinen), nicht bei IDs (automatisch generiert).
• JUSTZIX.log leitet NICHT in die DevTools-Konsole. Absichtlich — wir wollen einen separaten Kanal für JustZix-Skripte. Wenn du DevTools willst — nutze normales console.log.
• Die JS Console erfasst nur DevTools-artigen Verkehr, nicht JUSTZIX.log automatisch. „console.log('hi')" in der JS Console funktioniert wie immer; „JUSTZIX.log('hi')" in der JS Console erscheint NICHT in der Output Console, außer du hast ein Output-Console-Pane im Modus [J] oder [C+J] aktiv.
• Kein JUSTZIX.click() o. Ä. Logger und Aktions-Helfer sind by design getrennte Namespaces. Wenn die Seite window.JZ belegt, löst du Aktionen über natives DOM aus (querySelector + data-jz-action-*) — das ist das Muster, kein Bug.

Was kommt als Nächstes

Das schließt die Mini-Serie über JustZix-Fenster auf der Seite ab:

• CSS pane — Live-CSS-Editor im Tab
• JS Console — REPL mit ↑↓-Verlauf
• JS pane — Run-on-demand
• window.JZ-Helfer (dieser Beitrag) — die programmatische API

Zusammen ist das eine Mini-IDE in jedem Browser-Tab, mit einer Mini-API zum Steuern deiner eigenen Buttons. Installiere JustZix und probier es selbst — völlig kostenlos, kein Konto, kein Server.