JustZix — Bedienungsanleitung

Eigene CSS-Styles, JavaScript-Code und Aktionsbuttons auf beliebige Seiten einschleusen

Konzept und Grundbegriffe

JustZix ermöglicht es, eigenes CSS und JavaScript automatisch auf ausgewählte Seiten einzuschleusen sowie Aktionsbuttons zu definieren (Kürzel, die Code-Fragmente auf Abruf ausführen).

Datenhierarchie

URL-Muster auf Satz- und Gruppenebene

Jeder Satz und jede Gruppe kann eine eigene Liste zusätzlicher URL-Muster erhalten (Chip-Eingabe). Ist die Liste leer, wirkt das Element überall dort, wo das Verzeichnismuster passt. Setzt du z. B. https://justzix.com/admin/*, wirkt das Element nur auf den Admin-Unterseiten.

Tutorial — interaktive Einführung

Für neue Nutzer hat JustZix ein eingebautes interaktives Tutorial, das dich Schritt für Schritt durch den Aufbau einer kompletten Lösung führt — vom Verzeichnis über Gruppe und Regelsatz bis zu CSS/JS-Code und einer Aktionsschaltfläche. Hinweise erscheinen als Sprechblasen an den jeweiligen Elementen des Panels.

So startest du es:

• Automatisch — beim ersten Öffnen des Panels, wenn du noch kein Verzeichnis hast.
• Manuell — jederzeit über das Einstellungsmenü → Tutorial.

Im Fenster „Tutorial-Zentrum" wählst du ein Tutorial und klickst Starten. Während des Tutorials:

• Die Schaltflächen Zurück und Weiter wechseln zwischen den Schritten; die Leiste am unteren Rand der Sprechblase zeigt den Fortschritt.
• Manche Schritte warten, bis du die angegebene Aktion ausführst — z. B. die hervorgehobene Schaltfläche anklickst.
• Schritte mit Beispielcode haben eine Kopieren-Schaltfläche.
• Die Esc-Taste oder die Schaltfläche × schließt das Tutorial jederzeit.

Oberfläche und Navigation

Bearbeitungsmodus

Zugriff per Rechtsklick auf das Erweiterungssymbol → „Optionen" oder per Klick auf das Symbol → Button „Bearbeitungspanel".

• Logo oben in der Sidebar — vollständiges Logo justzix (Bildmarke + Inter-Wortmarke). Wechselt automatisch zwischen heller und dunkler Variante entsprechend dem App-Modus (Inline-SVG + CSS-Variablen, ohne Dateiaustausch). Ein Klick auf das Logo öffnet das Dashboard.
• Bereich „Verzeichnisse" — unter dem Logo: Label „VERZEICHNISSE" + Button zum Hinzufügen eines Verzeichnisses, Suche, Filter „Nur aktive".
• Verzeichnisbaum — Verzeichnis ▶ Gruppe ▶ Satz. Der Aufklapppfeil schaltet um. Ein Klick auf einen Satz führt direkt zur Bearbeitung nur dieses Satzes.
• Einstellungsmenü (Drop-up am unteren Rand der Sidebar) — ein einzelner Button öffnet ein Panel mit den Optionen: Dunkler Modus, Bedienungsanleitung, Einstellungen exportieren, Einstellungen importieren, Aus URL importieren, Cloud-Synchronisierung, Meine Shares, AI Helper, Projektseite, Sprachauswahl, Anzeige Speicherkontingent sowie die Versionsnummer der Erweiterung. Wird mit Escape oder Klick außerhalb des Panels geschlossen.
• Verzeichnisleiste — Button-Label (3 Buchstaben), Farbe, Name, URL-Muster, Optionen des Aktionspanels, Export/Import, Löschen.
• Satzkarten — jede mit 3 Reitern: CSS JavaScript Aktionen.
• Breadcrumb-Leiste — im Editor von Verzeichnis, Gruppe und Satz zeigt sie den Navigationspfad; ganz links befindet sich das „Haus"-Symbol — eine schnelle Rückkehr zum Dashboard.
• Editor-Größenänderung — die Leiste unter jedem Editor (CSS und JS) lässt sich nach unten ziehen, um den Arbeitsbereich zu vergrößern.
• Sidebar-Umschalter — die senkrechte Leiste zwischen Sidebar und Editor blendet das linke Panel für mehr Platz aus.

Schwebender Button (auf passenden Seiten)

Ein kleiner runder Button erscheint automatisch auf Seiten, die zu einem beliebigen Verzeichnis passen. Standardmäßig zeigt er die Aufschrift ZIX, aber jedes Verzeichnis kann ein eigenes Label haben.

Verzeichnis-Label: In der Verzeichnisleiste, ganz links (neben dem Color Picker), gibt es ein Textfeld für das Button-Label. Erzwungene Grenzen: max. 3 Zeichen, immer GROSSBUCHSTABEN (die Umwandlung in Großbuchstaben erfolgt sofort beim Tippen). Das Feld akzeptiert Buchstaben und Ziffern — Beispiele: ZIX, QA, DEV, ADM, X. Bei mehreren passenden Verzeichnissen wird das Label des ersten Verzeichnisses, das eines gesetzt hat, verwendet; die übrigen werden übersprungen (leeres Feld = Fallback auf ZIX).

Zustand per Farbe (Brand-Palette):

• Inject Green (oder Verzeichnisfarbe, falls gesetzt) — alle passenden Verzeichnisse eingeschaltet
• Syntax Orange (oder gedämpfte Verzeichnisfarbe) — einige eingeschaltet, einige ausgeschaltet
• Muted Gray — alle ausgeschaltet
• Halt Red (mit Opacity 0.7) — Erweiterung global ausgeschaltet

Verzeichnisfarbe: Wenn du beim Verzeichnis einen Color Picker setzt, übernimmt der schwebende Button auf passenden Seiten diese Farbe. Die Zustände „mixed" und „off" modulieren die Sättigung automatisch. Bei mehreren passenden Verzeichnissen wird die Farbe des ersten Verzeichnisses mit gesetzter Farbe verwendet.

Dashboard

Beim Betreten des Bearbeitungspanels öffnet die Erweiterung das Dashboard — eine Startseite mit einer Zusammenfassung der Bibliothek und Schnellzugriffen. Früher wählte das Panel automatisch das erste Verzeichnis der Liste aus; jetzt siehst du stattdessen eine Übersicht.

Das Dashboard ist über einen Klick auf das Logo in der Sidebar sowie über das „Haus"-Symbol in der Breadcrumb-Leiste jedes Editors (Verzeichnis, Gruppe, Satz) erreichbar. Die Kopfzeile des Dashboards selbst hat ebenfalls ein „Haus"-Symbol — ein Klick darauf aktualisiert die Daten (lädt die Bibliothek erneut aus dem Storage und rendert das Dashboard von Neuem).

Das Dashboard ist in festen Kartenreihen aufgebaut:

• Bibliothek — eine Inventur: die Anzahl von Verzeichnissen, Gruppen, Sätzen, Aktionen, Aktionsleisten, Fenstern im Vordergrund sowie Sätze mit CSS und Sätze mit JS.
• Nutzungsstatistik — tatsächliche Zähler: Aktionsklicks, CSS-Anwendungen, JS-Ausführungen und Fensteranzeigen. Die Werte werden über alle gekoppelten Geräte summiert (über die Cloud-Synchronisierung).
• Zuletzt bearbeitete Sätze — eine Liste der bis zu 6 letzten Sätze (sortiert nach Änderungsdatum); ein Klick öffnet den Satz im Editor.
• Tipp — ein zufälliger Tipp aus der Anleitung; der Pool umfasst 30 Tipps, zwischen denen du mit den Buttons „vorheriger" / „nächster" wechselst. Daneben befindet sich ein Link zur vollständigen Anleitung.
• Neueste Beispiele — die neuesten Beispiele aus der justzix.com-Bibliothek (mit Kategorie und Hinzufügedatum).
• Aus dem Blog — die neuesten Blogbeiträge von der Projektseite.
• Erweiterungsstatus — eine Reihe von drei Karten: die installierte Version (mit dem Hinweis, ob eine neuere verfügbar ist), die chrome.storage.local-Auslastung sowie das Datum des letzten Cloud-Backups.

Die Karten „Neueste Beispiele" und „Aus dem Blog" beziehen ihren Inhalt von der Projektseite; ist der Endpunkt nicht verfügbar (z. B. offline), werden beide Karten ausgeblendet. Die Version der Erweiterung wird bei jedem Aufruf des Dashboards frisch geprüft.

Verzeichnisbaum (Sidebar)

Das linke Panel im Bearbeitungsmodus zeigt die Verzeichnisse in einer Hierarchie — jedes Verzeichnis lässt sich aufklappen, um seine Sätze zu sehen und zur Bearbeitung eines bestimmten Satzes zu wechseln.

Navigation

Reihenfolge ändern (Drag & Drop)

Fahre über ein Verzeichnis, eine Gruppe oder einen Satz — links erscheint ein Drag-&-Drop-Griff. Mit der Maus greifen und ziehen:

Verzeichnisse

• Verzeichnis → Verzeichnis — Reihenfolge ändern (eine blaue Linie zeigt die Einfügeposition: über oder unter dem Element)

Gruppen

• Gruppe → Gruppe (dasselbe Verzeichnis) — Reihenfolge im Verzeichnis ändern
• Gruppe → Gruppe (anderes Verzeichnis) — Gruppe zwischen Verzeichnissen verschieben
• Gruppe → Verzeichnisname — Gruppe ans Ende des Zielverzeichnisses verschieben

Sätze

• Satz → Satz (dieselbe Gruppe) — Reihenfolge innerhalb der Gruppe ändern
• Satz → Satz (andere Gruppe) — Satz zwischen Gruppen verschieben unter Beibehaltung der Position
• Satz → Gruppenname — Satz ans Ende der Zielgruppe verschieben
• Satz → Verzeichnisname — Satz in die erste Gruppe des Verzeichnisses verschieben (wenn das Verzeichnis mehrere Gruppen hat)

Sidebar-Umschalter

Die senkrechte Leiste zwischen Sidebar und Editor blendet das linke Panel aus — nützlich, wenn du mehr Platz für den Editor brauchst. Der Zustand wird sitzungsübergreifend gemerkt. Nach dem Ein-/Ausblenden aktualisiert CodeMirror seine Breite automatisch.

Editor-Größenänderung

Unter jedem Editor (CSS, JS, Aktionscode) gibt es eine horizontale Leiste mit einem Griff zum vertikalen Ziehen. Greife mit der Maus und ziehe nach unten, um den Editor zu vergrößern. Mindesthöhe 80px, Maximum unbegrenzt — die Seite scrollt natürlich mit dem Inhalt mit.

Suche in den Code-Editoren

Über jedem CodeMirror-Code-Editor — CSS und JavaScript in der Satzkarte sowie „JS-Code" im Aktionseditor — befindet sich eine Suchleiste: ein Textfeld und ein Button mit Lupensymbol.

• Nach dem Starten der Suche werden alle gefundenen Fragmente hervorgehoben — der aktuelle Treffer gelb (schwarzer Text), die übrigen blau (weißer Text).
• Neben dem Feld erscheint ein Trefferzähler im Format n / gesamt.
• Wenn es mehr als einen Treffer gibt, erscheinen die Pfeile ▲ ▼ zum Wechseln zwischen den Ergebnissen. Der aktuelle Treffer wird in den sichtbaren Bereich gescrollt.
• Eine Code-Änderung macht die Ergebnisse ungültig — es muss erneut gesucht werden.

Kürzel

URL-Muster

Ein URL-Muster legt fest, auf welchen Seiten ein Verzeichnis aktiv wird.

Satz-Zustände (Aktiv / Eingeschaltet)

Jeder Satz hat zwei unabhängige Flags:

Schalterkaskade

Verzeichnis umschalten  →  ändert enabled aller aktiven Regeln in seinen Gruppen
Gruppe umschalten       →  ändert enabled aller aktiven Regeln dieser Gruppe
Satz umschalten         →  ändert nur enabled dieses Satzes

Regeln mit Aktiv: NEIN (Badge ○) werden bei Kaskaden übersprungen — du steuerst sie nur manuell, unabhängig vom Zustand des Verzeichnisses und der Gruppe.

Praktische Beispiele

Schwebender Button und Panel

Im aufklappenden Panel (Rechtsklick) kannst du:

• einzelne Verzeichnisse ein-/ausschalten
• einzelne Gruppen ein-/ausschalten (wenn ein Verzeichnis mehr als eine Gruppe hat)
• einzelne Sätze im Verzeichnis ein-/ausschalten
• Aktionsleisten ein-/ausschalten — der Abschnitt „Aktionsleisten" unter der Satzliste, eine Checkbox pro Leiste, ändert actionBar.enabled (persistent, propagiert zum Bearbeitungspanel)
• Leisten trennen — der Abschnitt „Verbindungen" erscheint, wenn der schwebende Button mit Leisten verbunden ist (Snap & Connect), Buttons „Trennen von: X" + „Alle trennen"

Das Panel zeigt nur aktive Sätze (●) — unabhängige (○) werden der Kürze halber ausgeblendet. Wenn ein Verzeichnis nur eine Gruppe namens „Standard" hat, wird die Gruppenüberschrift übersprungen — man sieht nur die Sätze.

Popup-Widget (Erweiterungssymbol)

Ein Klick auf das JustZix-Symbol in der Erweiterungsleiste von Chrome öffnet das Popup-Widget — ein kompaktes Steuerpanel für den aktuellen Tab. Von oben nach unten:

• Bearbeitungspanel — ein Button, der den Bearbeitungsmodus (die Optionsseite) in einem neuen Tab öffnet.
• Plugin enabled — ein großer Schalter für den globalen Hauptschalter der Erweiterung (grün = ein, grau = aus).
• Leisten-Bearbeitungsmodus — Schalter für den Bearbeitungsmodus der Aktionsleiste für den aktuellen Tab.
• AI Helper — Schalter, der das KI-Assistentenfenster auf dem aktuellen Tab öffnet/schließt.
• URL-Adresse des aktuellen Tabs.
• Liste der Verzeichnisse, die zur Seite passen — eine Checkbox zum Ein-/Ausschalten jedes Verzeichnisses sowie ein „eye-off"-Symbol, das den schwebenden Button für diese Seite ausblendet.
• Aktionsleisten — ein Abschnitt mit einer Checkbox pro Leiste (persistentes actionBar.enabled).
• Schwebenden Button wiederherstellen — ein Link, der erscheint, wenn der Button für die aktuelle Seite ausgeblendet wurde.

Aktionsleisten (ActionBars)

In einem Workspace kannst du mehrere Aktionsleisten haben — jede mit eigenem Namen, eigener Ausrichtung, eigener Hintergrundfarbe, eigenem Button-Satz und unabhängiger Position pro Browserfenster. Eine Leiste kann einem Verzeichnis, einer Gruppe oder einem einzelnen Satz zugeordnet sein (das bestimmt Sichtbarkeit und Kaskade).

Leiste erstellen und bearbeiten

Im Editor eines Verzeichnisses, einer Gruppe oder eines Satzes gibt es einen Button „Aktionsleisten (N)". Ein Klick öffnet das Verwaltungs-Modal für Leisten. Im Modal:

• Leiste hinzufügen — du wählst die Zuordnungsebene (Verzeichnis / Gruppe / Satz des aktuellen Kontexts)
• Name (max. 6 Zeichen GROSSBUCHSTABEN) — ein optionaler Tab mit dem Namen ragt über den Rand der Leiste hinaus
• Ausrichtung — horizontal oder vertikal
• Hintergrundfarbe — Color Picker (JustZix-Brand-Palette)
• Eingeschaltet — bei deaktiviertem Häkchen wird die Leiste überhaupt nicht gerendert (nicht nur visuell ausgeblendet). Der Zustand ist im Storage gespeichert, unabhängig von der fensterbezogenen Position

Sichtbarkeit nach unten vererbt

• Eine Verzeichnis-Leiste ist für alle aktiven Sätze dieses Verzeichnisses sichtbar (sie aggregiert deren Aktionen über barId).
• Eine Gruppen-Leiste — nur für die Sätze dieser Gruppe.
• Eine Satz-Leiste — nur wenn der Satz aktiv ist.
• Eine Leiste ohne sichtbare und eingeschaltete Aktion in dem jeweiligen Zweig wird überhaupt nicht gerendert.

Aktion einer Leiste zuordnen

Jede Aktion im Reiter „Aktionen" der Satzkarte hat ein Dropdown „Aktionsleiste" — du wählst die Zielleiste aus der Liste der für diesen Satz sichtbaren Leisten (eigene Leisten des Satzes + Gruppenleisten + Verzeichnisleisten).

Leisten verbinden (Snap & Connect)

Beim Ziehen einer Leiste erkennt die Erweiterung die Ränder benachbarter Leisten und des schwebenden Buttons im Abstand ≤ 12 px. Es erscheint ein Sticky-Visual-Indikator, und nach dem Loslassen verbinden sich die Leisten zu einer Verbindungsgruppe. Danach:

• Verbundene Leisten bewegen sich gemeinsam (Group Drag).
• Der schwebende JustZix-Button kann ebenfalls an Verbindungen teilnehmen (__float als Pseudo-Leiste).
• Verbindungen werden pro Fenster im Sitzungsspeicher gemerkt.

Rechtsklick auf den Drag-Griff einer Leiste → Kontextmenü:

• Diese Leiste ausblenden (bis zum Neuladen) — Runtime-Hide pro Browserfenster. Die Leiste kehrt nach F5 / URL-Wechsel / Schließen und Öffnen des Tabs zurück. Dauerhaftes Ausschalten: siehe Leisten anzeigen/ausblenden weiter unten.
• Trennen von: X () — erscheint für jede benachbarte Verbindung.
• Alle Verbindungen trennen () — wenn die Leiste mit mehr als einer verbunden ist.

Im Leisten-Bearbeitungsmodus ist dieses Menü deaktiviert; der Rechtsklick auf ein Label bietet dann die Option „Label löschen".

Leisten anzeigen/ausblenden — von 3 Stellen aus

Zum dauerhaften Ein-/Ausschalten von Aktionsleisten (ohne F5) bietet die Erweiterung drei Einstiegspunkte, die alle auf dasselbe actionBar.enabled im Storage abgebildet werden — eine Änderung von einer Stelle propagiert zum Bearbeitungspanel und zu den übrigen Oberflächen:

1. Floating-Panel (Rechtsklick auf den schwebenden JustZix-Hauptbutton) — der Abschnitt „Aktionsleisten" unter der Liste der Verzeichnisse/Gruppen/Sätze. Eine Checkbox pro Leiste zeigt den persistenten Zustand. Klick → schaltet actionBar.enabled um.
2. Popup-Widget (Klick auf das Erweiterungssymbol neben der Adresse) — der Abschnitt „Aktionsleisten" unter der Verzeichnisliste. Plus ein kleines „eye-off"-Symbol pro Verzeichnis — blendet den schwebenden Button für die aktuelle Seite aus (Wiederherstellung über den Link „Schwebenden Button wiederherstellen").
3. chrome.contextMenus (Rechtsklick auf der Seite → JustZix → Aktionsleisten) — ein dynamisches Untermenü mit einer Checkbox pro Leiste. Die Liste wird pro aktivem Tab und bei jeder Zustandsänderung neu aufgebaut.

Leisten-Bearbeitungsmodus — freies Layout

Der Bearbeitungsmodus der Aktionsleiste wird auf drei Wegen aktiviert: per Kürzel Ctrl+Alt+S (funktioniert von jeder Stelle der Seite aus), per Schalter im Popup-Widget der Erweiterung sowie über das Chrome-Kontextmenü (Rechtsklick → „Leisten-Bearbeitungsmodus"). Oben am Bildschirm erscheint eine Infoleiste; die erneute Verwendung eines beliebigen Schalters verlässt den Modus.

Im Bearbeitungsmodus ist das normale Verhalten der Elemente ausgesetzt (ein Klick führt keinen Code aus, Felder nehmen keinen Fokus an) — stattdessen lassen sich Elemente anordnen und skalieren:

• Auswählen — Klick = einzelnes Element; Ctrl+Klick = zur Auswahl hinzufügen/entfernen; Klick auf leere Fläche oder Esc = alles abwählen. Shift+Ziehen über die leere Fläche = Bereichsauswahl (Rechteck).
• Verschieben — Ziehen der Auswahl mit der Maus. Mehrere ausgewählte Elemente bewegen sich gemeinsam.
• Größe eines Elements ändern — bei einer Einzelauswahl erscheint ein Rahmen mit 8 Griffen (4 Ecken + 4 Kanten).
• Größe der Leiste ändern — die Leiste hat Griffe am rechten Rand, am unteren Rand und in der Ecke (Änderung der Größe der Arbeitsfläche).
• Labels — der Button „+ Label" über der Leiste fügt ein statisches Text-Label an der ersten freien Stelle hinzu. Ein Doppelklick auf ein Label öffnet den Editor (Text, Schrift, Größe, Farbe, „Löschen"). Labels werden wie Aktionselemente verschoben und skaliert.
• Labels löschen — die Taste Delete löscht alle ausgewählten Labels auf einmal; ein Rechtsklick auf ein Label bietet die Option „Label löschen"; es gibt auch einen Button „Löschen" im Label-Editor. Aktionselemente werden im Bearbeitungspanel gelöscht (sie gehören zu den Regeln).
• Leiste zurücksetzen — der Button „Leiste zurücksetzen" über der Leiste stellt das Standardlayout (flow) wieder her: er entfernt benutzerdefinierte Positionen und Größen der Elemente sowie alle Labels (mit Bestätigung).
• Rückgängig — Ctrl+Z macht die letzte Änderung rückgängig (Verschieben, Größenänderung, Hinzufügen/Bearbeiten/Löschen eines Labels, Zurücksetzen). Die Historie umfasst die aktuelle Bearbeitungssitzung.

Der Bearbeitungsmodus ist „hart": Verschieben und Größenänderung rasten an einem 8-px-Raster ein, ein Element lässt sich weder aus der Leiste herausziehen noch über ein anderes legen — bei einer Kollision erhalten beide Elemente (das verschobene und das darunterliegende) einen roten Rahmen, und nach dem Loslassen kehrt das Element an seine vorherige Position zurück. Die Leiste lässt sich nicht so verkleinern, dass ein Element nach außen gerät; wenn ein neues Element oder Label nicht in die Leiste passt, vergrößert sich die Arbeitsfläche der Leiste automatisch. Ein Rechtsklick auf die Leiste im Bearbeitungsmodus zeigt nicht das Menü „Leiste ausblenden/trennen".

Leisten-Layoutmodi: Die Leiste startet im Modus flow (klassisches Flexbox — Elemente hintereinander, vertikal oder horizontal). Das erste Verschieben oder Skalieren eines Elements konvertiert die Leiste in den Modus custom (Arbeitsfläche mit freier Positionierung) — visuell ohne Änderung, da das aktuelle Layout als Ausgangspunkt als Snapshot festgehalten wird.

Aktionstypen: BUTTON / SELECT / INPUT / SLIDER / TEXTAREA / TOGGLE3

Jede Aktion hat einen Typ — wählbar über ein Dropdown am Anfang jeder Aktion in der Satzkarte. Es stehen 6 Typen zur Verfügung:

Statische Text-Labels sind kein Aktionstyp — sie werden direkt auf der Leiste im Bearbeitungsmodus hinzugefügt (siehe „Leisten-Bearbeitungsmodus" → Labels).

Gemeinsame Felder

• Label — max. 6 Zeichen (Großbuchstaben, Monospace). Auf dem Button angezeigt, als Platzhalter von INPUT/TEXTAREA oder als Tab über SELECT/SLIDER/TOGGLE3.
• Farbe — Color Picker (Elementhintergrund; bei TOGGLE3 = Hintergrund des aktiven Zustands).
• Zweite Farbe (colorText) — ein Picker neben dem ersten, plus ein Hex-Feld mit nativem Strg+C/V. Semantik je nach Typ:
  • BUTTON / SELECT (Vorderseite) / INPUT / TEXTAREA — Textfarbe
  • SLIDER — Farbe der Leiste (Accent-Color des Schiebereglers); Text von Label und Wert sind separate Felder (siehe „Granulare Farben" weiter unten)
  • TOGGLE3 — Textfarbe des aktiven Zustands
  Jeder Picker hat einen Button ×, der den Standard wiederherstellt (leer = Renderer-Fallback auf den CSS-Standard — meist Weiß).
• Aktionsleiste — ein Dropdown, das die Aktion einer bestimmten ActionBar zuordnet.
• Sichtbarkeit — die Checkbox „sichtbar" ermöglicht ein schnelles Ausblenden ohne Löschen.
• Tastaturkürzel — klicke und drücke eine Kombination (reservierte Chrome-Kürzel werden mit einer Warnung versehen).
• JS-Code — wird bei der Aktivierung ausgeführt. Verfügbare Variablen: value, $el (DOM-Element), $action ({ id, label, type, el }); bei TOGGLE3 zusätzlich stateIdx (0-2) und stateLabel.

SELECT — Optionen-Modal

Ein Klick auf „Optionen (N)" in der Karte einer Aktion vom Typ SELECT öffnet ein Modal:

• Variant: static (Optionen werden hier konfiguriert) oder js (Code befüllt das native <select>).
• Optionsliste für static: jede Zeile ist ein { name, value }. name = was der Benutzer sieht, value = was als Variable value ins JS gelangt.
• Granulare Dropdown-Farben — für beide Varianten gemeinsam:
  • colorDropdownBg — Hintergrund des Popup-Panels (static) + Hintergrund von <option> (js-Variante)
  • colorOption — Textfarbe des Optionsnamens im Dropdown
  • colorSelected — Hintergrund der gewählten Option (static; bei js browser-spezifisch nativ)
  • colorHover — Hintergrund der Option unter dem Cursor (static)
• Stabile Aktions-ID — die vollständige action.id mit Kopier-Button + ein Beispiel-JS-Selektor.

INPUT — Konfigurations-Modal

• Placeholder — der Text, der vor der Eingabe sichtbar ist.
• Default value — der Anfangswert (wenn kein Eintrag im Memory vorhanden ist).
• colorPlaceholder — die Textfarbe des Platzhalters (über eine CSS-Variable, da das Pseudoelement ::placeholder nicht inline stylebar ist).
• Stabile Aktions-ID + ein Beispiel-JS-Selektor.

SLIDER — Konfigurations-Modal

• Min / Max — der Zahlenbereich (z. B. 0–100). Erforderlich: min < max.
• Step — Schritt (z. B. 1, 5, 0.1). Standard 1.
• Default value — der Anfangswert (wenn kein Memory vorhanden ist). Standard (min+max)/2.
• Unit — die nach dem Wert angezeigte Einheit (z. B. „px", „%"). Optional.
• colorLabel — die Farbe des Labels links von der Leiste.
• colorValue — die Farbe der Zahl+Einheit rechts.
• JS-Code — wird bei change ausgeführt (Maustaste loslassen / Tab / Enter). value = der numerische Wert.

TEXTAREA — Konfigurations-Modal

• Placeholder / Default value — analog zu INPUT (der Anfangswert kann \n für Zeilenumbrüche enthalten).
• Rows — die Anzahl sichtbarer Zeilen (1-20, Standard 3). Steuert die Höhe des Feldes.
• colorPlaceholder — analog zu INPUT.
• JS-Code — wird bei change ausgeführt (Blur, NICHT Enter — Enter in einem Textarea ist ein echter Zeilenumbruch). Der Benutzer verlässt das Feld → der Wert wird gespeichert und der Code ausgelöst. value = String mit Zeilenumbrüchen.

TOGGLE3 — Konfigurations-Modal

• 3 Zustände — genau 3, jeder mit den Feldern label (max. 5 Zeichen, Großbuchstaben) und value (String, der dem Code als value übergeben wird). Standard-Labels: OFF / MID / ON.
• Default state — ein Radio-Button bei jedem Zustand gibt an, welcher der Anfangszustand ist (wenn kein Memory vorhanden ist). Standard 0.
• colorBg — Hintergrund des Wrap-Containers (der gesamte Segmented Control).
• colorHover — Hover-Hintergrund eines inaktiven Buttons.
• colorInactiveText — die Textfarbe der inaktiven Zustände (der aktive Zustand verwendet colorText).
• JS-Code — wird bei jeder Zustandsänderung ausgeführt (Klick auf einen inaktiven). Variablen: value (state.value, Fallback auf state.label), stateIdx (0-2), stateLabel, $el (Container-Div).

Persistentes Memory (SELECT, INPUT, SLIDER, TEXTAREA, TOGGLE3)

Auswahl / Wert / Schiebereglerposition / Textarea-Inhalt / aktiver Toggle3-Zustand werden automatisch pro Aktion gemerkt. Nach F5 kehrt der Wert zurück; nach dem Schließen des Tabs und erneutem Öffnen (auf einer zur Regel passenden Seite) ebenfalls. Singleton pro action.id — ein Wert, unabhängig von der konkreten URL.

Format des Wertes im Memory je nach Typ:

• SELECT (beide Varianten), INPUT, TEXTAREA → String
• SLIDER → Number (oder string-numerisch nach dem Roundtrip aus dem Storage)
• TOGGLE3 → Integer 0-2 (INDEX des aktiven Zustands, nicht value)

Storage:

• Primär: sessionStorage — synchron, F5-sicher, pro Tab.
• Backup: chrome.storage.local.actionMemory[id] — tab-übergreifend, dauerhaft.

Keine geräteübergreifende Synchronisierung: Das Memory bleibt lokal. Zwei Computer können unterschiedliche Werte haben (z. B. ein anderer Filter pro Benutzer).

Stabile Aktions-ID

Jede Aktion hat eine unveränderliche action.id (Format a_<base36>_<random>). In der Satzkarte gibt es neben jeder Aktion ein Badge mit der Zeilennummer — ein Klick kopiert die vollständige ID in die Zwischenablage, der Tooltip zeigt die vollständige ID.

Im User-JS beziehst du dich über data-jz-action-id:

const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');
el.value = 'neuer Wert';
el.dispatchEvent(new Event('change'));

Oder über die window.JZ-Helfer — siehe Aktionen programmatisch aus JS aufrufen.

Chrome-Kontextmenü

Rechtsklick auf einer beliebigen Seite → JustZix:

• Schwebenden Button für diese Seite ein-/ausschalten — schaltet die Sichtbarkeit des schwebenden Hauptbuttons um (analog zu „eye-off" im Popup).
• Leisten-Bearbeitungsmodus (ein/aus) — schaltet den Leisten-Bearbeitungsmodus auf dem aktiven Tab um; der dritte Einstiegspunkt neben dem Kürzel Ctrl+Alt+S und dem Schalter im Popup.
• AI Helper (ein/aus) — öffnet oder schließt das KI-Assistentenfenster auf dem aktiven Tab.
• Aktionsleisten ▸ — ein Untermenü mit einer Checkbox pro Leiste. Die Liste enthält ausschließlich für den aktiven Tab relevante Leisten. Checkbox = persistenter actionBar.enabled-Zustand.
• CSS-Fenster ▸ / JS-Fenster ▸ / JS-Konsolen ▸ / Output-Konsolen ▸ — analoge Untermenüs für jeden der 4 Typen von Fenstern im Vordergrund (siehe Abschnitt unten). Checkbox = enabled-Zustand pro Fenster.
• Temporäres Fenster (TEMP) ▸ — ein Untermenü mit 4 Einträgen: TEMP CSS-Pane / TEMP JS-Pane / TEMP JS-Konsole / TEMP Output-Konsole. Klick = Umschalten (erstellen oder schließen). Funktioniert auf jeder Seite, unabhängig von einer Verzeichnis-Übereinstimmung.

Die Fenster-Untermenüs werden bei folgenden Ereignissen neu aufgebaut: tabs.onActivated, tabs.onUpdated (URL-Wechsel) und storage.onChanged für folders/groups/rules/actionBars/cssPanes/jsPanes/jsConsoles/outputConsoles/floatingHidden. Das TEMP-Untermenü ist statisch (immer 4 Einträge).

Fenster im Vordergrund (CSS / JS / Konsolen)

Die Erweiterung bietet vier Typen schwebender Fenster, die neben den Aktionsleisten auf die Seiten eingeschleust werden. Jedes Fenster ist einem Verzeichnis, einer Gruppe oder einem Satz zugeordnet (es erbt die Sichtbarkeit kaskadiert, genau wie die Aktionsleisten) und erscheint auf Seiten, die per URL passen.

Verwaltung: Im Editor eines Verzeichnisses / einer Gruppe / eines Satzes findest du einen Button „Fenster ▾ (N)". Ein Klick öffnet ein Menü mit 4 Typen — du wählst einen Typ, es öffnet sich ein Modal mit der Liste der Fenster dieser Ebene (plus von höheren Ebenen geerbte Fenster). Du fügst hinzu, benennst, färbst, löschst.

CSS-Pane

Ein schwebendes Fenster mit einem Textfeld für CSS. Jede Änderung (nach einer kurzen Pause) aktualisiert das eingeschleuste <style> — du siehst den Effekt live. Der Inhalt wird pro Browser-Tab gemerkt (überlebt F5, verschwindet beim Schließen des Tabs). Ideal zum schnellen Testen von CSS, ohne es in einer Regel zu speichern.

JS-Pane

Ein Textfeld für JavaScript, das im Kontext der Seite ausgeführt wird. Der Code startet nach einer Änderung (mit Verzögerung) oder manuell per Button ▶ Run / Kürzel Strg+Enter. Ausführungsfehler erscheinen in einer roten Leiste unter dem Code. Wenn der Code seit der letzten Ausführung geändert wurde, leuchtet der Run-Button gelb (Zustand „dirty").

JS-Konsole (REPL)

Eine vollwertige Konsole in der Seite. Du gibst Code in das untere Feld ein, Strg+Enter (oder ▶) führt aus, das Ergebnis wird dem Log-Bereich darüber hinzugefügt. Funktionen:

• Befehlshistorie — die Pfeile ↑/↓ in der ersten/letzten Zeile der Eingabe blättern durch frühere Befehle (wie in einem Terminal).
• Strg+L — leert die Ausgabe.
• Erfassung von console.* — Aufrufe von console.log/warn/error/info während der Ausführung werden im Log angezeigt (je nach Typ eingefärbt).
• Eingefärbte Zeilen: Befehl (blau), Ergebnis (hell), Fehler (rot), console.log (grau), console.warn (gelb).

Eingabe, Ausgabe und Historie werden pro Tab gemerkt. Die Konsole führt Code in der MAIN-World der Seite aus — du hast Zugriff auf alle Variablen und Funktionen der Seite.

Output-Konsole

Eine Nur-Lese-Vorschau der Logs — erfasst automatisch alles, was auf der Seite geschieht: console.log/warn/error/info/debug, nicht abgefangene Ausnahmen, unbehandelte Promise-Rejections, den Netzwerkverkehr sowie Pushes in den dataLayer und auch deinen eigenen Logger window.JUSTZIX.*. Im Gegensatz zur JS-Konsole (wo du selbst Code eingibst) — hier fließen die Logs von selbst.

Sechs Reiter mit Zählern

Das Fenster ist in 6 Reiter unterteilt, jeder mit einem Zähler für Einträge (Badge):

Leiste mit kontextbezogenen Filtern

Zwischen den Reitern und dem Suchfeld gibt es eine Filterleiste, die sich je nach gewähltem Reiter ändert:

• All — keine zusätzlichen Filter.
• JZconsole / Console — Auswahlfelder für Levels: log, info, warn, error, debug. Level abwählen → die Zeilen verschwinden aus der Vorschau.
• Network — drei Reihen: Ressourcentyp (document, script, stylesheet, image, xhr/fetch, font, …), HTTP-Statusklasse (2xx/3xx/4xx/5xx) sowie Schieberegler für Größen- und Zeitbereich (0–100000 ms) plus ein Feld zum Filtern nach Domain. Die Checkbox-Reihen haben Kürzel für alle auswählen / alle abwählen.
• Errors — keine Checkboxen; jeden Fehler klappst du auf, um die Details zu sehen.
• DataLayer — das Fenster teilt sich in zwei Hälften (siehe unten).

Suche

Unter der Filterleiste befindet sich ein dauerhaft sichtbares Suchfeld. Es filtert die Einträge des aktiven Reiters live (Teilstring-Abgleich, ohne Groß-/Kleinschreibung). Esc leert das Feld.

Konsolen-Logs — aufklappbar wie in den DevTools

Einträge von console.* sind standardmäßig zugeklappt — sie zeigen eine gekürzte Vorschau (z. B. [PickupMap][2026-05-16T15:25Z] AUTO_SELECTION_SKIPPED: {reason: 'Lower priority source', …}). Ein Klick klappt die vollständigen Argumente auf (Objekte/Arrays als aufklappbarer JSON-Baum), analog zur DevTools-Konsole.

Reiter Network

Network erfasst Anfragen über chrome.webRequest (Berechtigung webRequest im Manifest). Jeder Eintrag zeigt u. a. die Methode, URL, den Status, Ressourcentyp, die Größe, Dauer, die Remote-Adresse (Remote address) und den Initiator (Initiator). Der Anfragenpuffer wird im Hintergrund vorgehalten, sodass auch Einträge von vor dem Öffnen des Fensters erscheinen.

Reiter DataLayer

Das DataLayer-Fenster ist in zwei Spalten geteilt:

• Links — Neue Pushes: ein Strom der aufeinanderfolgenden dataLayer.push(...)-Aufrufe in der Reihenfolge der Ereignisse.
• Rechts — Aktueller Zustand: der Live-Inhalt des Objekts window.dataLayer als indizierter (0:, 1:, …) aufklappbarer JSON-Baum — du gehst in verschachtelte Daten hinein, analog zum Objekt-Inspektor in den DevTools. Der Snapshot aktualisiert sich nach jedem Push. In der Kopfzeile der rechten Spalte gibt es die Buttons alle aufklappen / alle zuklappen — sie wirken rekursiv auf den gesamten Baum.

Klicks auf die eigene Oberfläche von JustZix (Aufklappen von Baumknoten, Fenster-Buttons) gelangen nicht in diesen Reiter. Würde die Seite click-Ereignisse erfassen (z. B. GTM-Auto-Event), würde ein Klick ins Fenster einen Push an dataLayer erzeugen und das Aufklappen des Baums zurücksetzen — die Erweiterung erkennt solche Pushes und meldet sie nicht (der echte window.dataLayer der Seite bleibt unberührt).

Eigener Logger — window.JUSTZIX

Die Output-Konsole stellt ein globales API zum Loggen aus deinem Code (JS-Pane, Aktionen, Seitencode) bereit:

JUSTZIX.log('normales Log');
JUSTZIX.warn('Warnung');
JUSTZIX.error(new Error('Fehler'));   // zeigt den Stack-Trace
JUSTZIX.info({ obj: 1, arr: [2,3] });
JUSTZIX.debug('Details');             // standardmäßig ausgeblendet (Filter)

Verfügbare Aliasse:

• window.JUSTZIX — primär, funktioniert immer
• window.__JUSTZIX__ — ein immer verfügbarer Alias
• window.JZ — ein Alias nur, wenn die Seite kein eigenes window.JZ hat (manche Seiten, z. B. Google Ads, belegen diesen Namen)

Nach dem Erscheinen der Output-Konsole siehst du im Log eine Begrüßungszeile, die mitteilt, welcher Alias auf dieser Seite verfügbar ist.

Was erfasst wird

• console.log/warn/error/info/debug(...) von der Seite — gelangen auch in die normale DevTools-Konsole (wir blockieren nicht)
• window.JUSTZIX.*(...) — dein dedizierter Kanal (geht nicht in die DevTools)
• Nicht abgefangene Ausnahmen (throw new Error(...)) — rot angezeigt mit der Fehlerstelle
• Unbehandelte Promise-Rejections — Promise.reject(...) ohne .catch

Fehler von fetch/XHR-Anfragen gelangen nicht in den Reiter Errors (das sind keine JS-Ausnahmen) — du findest sie im Reiter Network beim Status 4xx/5xx. Wir erfassen weder CSP-Verstöße noch interne Chrome-Warnungen.

Schnellhilfe — Strg+Umschalt+H

Strg+Umschalt+H öffnet ein verschiebbares Schnellhilfe-Fenster — eine Anleitung zur Nutzung von JustZix auf der Seite: globale Kürzel, Kürzel innerhalb der Fenster, die Output-Konsole, Maus-Bedienung der Fenster, der Leisten-Bearbeitungsmodus und das Protokollieren in die Output-Konsole. Es funktioniert auf jeder Seite. Du ziehst das Fenster an der Kopfzeile; Esc / Klick außerhalb / × / erneutes Strg+Umschalt+H schließt es.

Anpassung des Fensteraussehens

Farben: Im Verwaltungs-Modal (Bearbeitungspanel) hat jedes Fenster einen Color Picker — der Punkt der Kopfzeile, Hintergrund und Text der Kopfzeile, Hintergrund und Text des Bodys, die Farbe der Aktionsbuttons.

Schrift und Größe: Rechtsklick auf die Kopfzeilenleiste des Fensters → ein Menü mit der Auswahl der Schrift (Consolas, Menlo, Monaco, Courier New und andere Monospace-Schriften) sowie der Größe (10–24 px).

Ziehen, Andocken und Verbinden

Jedes Fenster ziehst du an der Kopfzeilenleiste. Beim Annähern eines Rands an ein anderes Fenster / eine Aktionsleiste / den schwebenden Button (≤ 12 px) erscheint eine magnetische Anziehung — die Fenster verbinden sich zu einer Gruppe. Das Ziehen einer verbundenen Gruppe bewegt alle Elemente gemeinsam. Die Positionen werden pro Browserfenster gemerkt.

Größenänderung des Fensters

Jedes Fenster hat 8 Resize-Griffe: 4 in den Ecken (Änderung von Breite und Höhe gleichzeitig) sowie 4 an den Kanten (Änderung nur einer Achse). Der gezogene Griff hält den gegenüberliegenden Rand an Ort und Stelle. Bereich: Breite 180–1200 px, Höhe 120–900 px. Die neue Größe (pane.size) wird gespeichert — für dauerhafte Fenster zwischen Geräten synchronisiert, für TEMP-Fenster pro Tab.

Scrollen innerhalb des Fensters

Das Scrollen mit dem Mausrad innerhalb eines Fensters scrollt nur den Inhalt dieses Fensters — die darunterliegende Seite scrollt nicht. Das gilt auch, wenn der Fensterbereich das Ende des Scrollens erreicht oder der Cursor über einem nicht scrollbaren Bereich steht (Kopfzeile, Filterleiste).

Rechtsklick auf die Fenster-Kopfzeile

• Nach vorne / Nach hinten — Reihenfolge der Fenster ändern, wenn sie sich überlappen (einmaliger Sprung über / unter alle überlappenden Nachbarn).
• Trennen von: X / Alle Verbindungen trennen — wenn das Fenster verbunden ist.
• Fenster [Typ] schließen — blendet das Fenster aus (es lässt sich über das Panel / Popup wieder einschalten).
• Schrift / Größe — Auswahl der Schrift und Textgröße.

Schließen-Button und Doppelklick auf die Kopfzeile

Jedes Fenster (sowohl temporäre TEMP als auch persistente) hat in der rechten Ecke der Kopfzeile einen × Schließen-Button. TEMP werden ausgeblendet (öffne sie erneut über das Seiten-Kontextmenü oder ein Kürzel), persistente — deaktiviert (per Checkbox im Popup wieder aktivieren). Doppelklick auf die Kopfleiste:

• Persistent (CSS-Pane / JS-Pane / JS Console / Output Console) — klappt das Fenster auf die Kopfzeile ein/aus. Zustand wird gemerkt.
• TEMP — schaltet die gemerkte Größe ↔ Standard um.
• AI Helper — schaltet die gemerkte Größe ↔ Standard um.

Snappen und Kanten-Highlight

Wenn sich eine Fensterkante einem anderen JustZix-Fenster nähert (12 px-Schwelle), erscheint eine rote Kante an der Snap-Seite (an beiden Fenstern). Loslassen des Cursors in dieser Position führt den Snap aus — die Fenster bewegen sich danach als Gruppe. Alle Fenster der Erweiterung nehmen an diesem Mechanismus teil: Aktionsleisten, FAB, persistente Panes (CSS/JS/Console/Output), TEMP und der AI Helper.

TEMP-Panes — temporäre Fenster

Du kannst ein temporäres Fenster auf einer beliebigen Seite erstellen — sogar auf einer, für die du kein Verzeichnis hast. TEMP-Panes sind ein schnelles Ad-hoc-Werkzeug: du testest CSS/JS auf einer fremden Seite, ohne Regeln zu konfigurieren.

Eigenschaften von TEMP-Panes:

• Funktionieren auf jeder Seite (überspringen die Verzeichnis-Übereinstimmung)
• Werden pro Tab gemerkt — überleben F5, verschwinden beim Schließen des Tabs. Synchronisieren sich nicht zwischen Geräten.
• Andere Farbe als die Standardfenster — orange (CSS), rot (JS), rosa (JS-Konsole), cyan (Output) — der gesamte Fensterrahmen in dieser Farbe.
• „TEMP" im Namen.
• Rotes Kreuz × in der oberen rechten Ecke der Kopfzeile — schließt das Fenster. Die Daten (Code, Log, Geometrie) bleiben in der Sitzung — das erneute Öffnen eines Fensters desselben Typs stellt sie wieder her. Sie verschwinden erst beim Schließen des Tabs.
• Papierkorb-Symbol in der Kopfzeile von TEMP CSS / TEMP JS — löscht den Editor-Inhalt mit einem Klick. Die Löschung landet im Undo-Verlauf des Browsers (Ctrl+Z macht sie rückgängig). Für CSS wird der lebende <style> sofort aktualisiert.
• Höchstens ein Exemplar eines bestimmten Typs — ein erneutes Drücken des Kürzels schließt das bestehende Fenster; ein drittes öffnet es erneut mit dem erhaltenen Inhalt.
• Größengedächtnis (pro Gerät) — nachdem ein TEMP-Fenster in der Größe geändert wurde, wird seine letzte Größe für jeden Typ separat (CSS / JS / JS-Konsole / Output) im Gerätespeicher gemerkt. Sie übersteht einen Browser-Neustart und synchronisiert sich nicht zwischen Geräten. Ein neu geöffnetes TEMP-Fenster startet in der Standardgröße (380×240).
• Doppelklick auf die Kopfzeile = Größenumschalter — ein Doppelklick auf die Kopfzeile eines TEMP-Fensters schaltet es zwischen der Standardgröße und der gemerkten Größe um.

Erstellen / Schließen (Umschalten):

• Ctrl+Alt+G — TEMP CSS-Pane
• Ctrl+Alt+H — TEMP JS-Pane
• Ctrl+Alt+J — TEMP JS-Konsole
• Ctrl+Alt+K — TEMP Output-Konsole
• oder: Rechtsklick auf der Seite → JustZix → Temporäres Fenster (TEMP) ▸

AI Helper — KI-Assistent

Der AI Helper ist ein in die Erweiterung integrierter KI-Assistent, der dabei hilft, eine CSS/JS-Lösung für eine konkrete Aufgabe auf der aktuellen Seite vorzubereiten und umzusetzen. Das Modell kann die Seite untersuchen, Code live in TEMP-Fenstern testen und — nach deiner Zustimmung — ein fertiges Verzeichnis, eine Gruppe und einen Satz erstellen.

Konfiguration der API-Schlüssel

Im Einstellungsmenü der Sidebar öffnet der Eintrag „AI Helper" ein Konfigurations-Modal:

• API-Schlüssel für drei Anbieter: OpenAI, Anthropic und Gemini (Google). Der Schlüssel eines Anbieters genügt, um den Assistenten zu nutzen.
• Standardanbieter und Standardmodell — werden beim Öffnen des Chatfensters verwendet (das Modell kann auch automatisch abgerufen werden — dann wird das höchste verfügbare gewählt).
• Bei jedem Schlüssel gibt es eine Checkbox „synchronisieren" (standardmäßig deaktiviert).

Chatfenster

Das AI-Helper-Fenster ist ein schwebendes Fenster (pro Tab, wie die TEMP-Fenster — ziehbar, mit 8 Griffen skalierbar, mit Schließkreuz, eine Instanz). Du öffnest / schließt es:

• per Kürzel Ctrl+Alt+\,
• per Schalter „AI Helper" im Popup-Widget,
• über das Chrome-Kontextmenü → JustZix → AI Helper.

Im Fenster: die Auswahl des Anbieters (wenn du mehr als einen Schlüssel hast) und des Modells (die Liste wird live abgerufen), der Gesprächsverlauf, ein Button zum Leeren des Gesprächs sowie ein Textfeld (senden per Button oder Ctrl+Enter). Das Modell erhält automatisch den Kontext der aktuellen Seite — URL, Titel und ein HTML-Fragment.

Agenten-Workflow

Der AI Helper führt das Gespräch nach einem festgelegten Workflow:

1. Fragt nach Details — URL-Bereich, Namen von Verzeichnis/Gruppe/Satz, Farben, das genaue Ziel.
2. Untersucht die Seite mit dem Werkzeug query_page (Selektoren, DOM-Struktur), bevor er Code schreibt.
3. Setzt den vorbereiteten CSS/JS-Code in ein temporäres TEMP-Fenster ein, das du live auf der Seite siehst.
4. Prüft Fehler selbstständig — mit den Werkzeugen read_temp_pane und read_console prüft er, ob der getestete Code keine Fehler meldet, bevor er dir das Ergebnis zeigt.
5. Bittet um eine Prüfung des Effekts und fragt ausdrücklich, ob der Test gelungen ist.
6. Wenn der Test nicht funktioniert hat — korrigiert er den Code und testet erneut.
7. Erst nach deiner Bestätigung verewigt er die Lösung: er erstellt Verzeichnis → Gruppe → Satz und bei Bedarf auch eine Aktionsleiste und Aktionen. Jede Erstellung einer Entität erfordert eine separate Bestätigung in der Erweiterung.

Das Modell verwendet Werkzeuge über ein einfaches Textprotokoll (der Block @@JZ_TOOL@@ … @@END@@), das für OpenAI, Anthropic und Gemini identisch funktioniert. Werkzeugaufrufe und ihre Ergebnisse erscheinen im Fenster als separate „Chips". Verfügbare Werkzeuge:

Aussehen des AI-Helper-Fensters

Ein Rechtsklick auf die Kopfzeile des AI-Helper-Fensters öffnet ein Menü mit den Optionen „Nach vorne" / „Nach hinten" (Reihenfolge der JustZix-Fenster ändern, wenn sie sich überlappen), „Trennen von: X" (wenn der AI Helper mit einem anderen Fenster verbunden ist) und „Aussehen…". Im Panel „Aussehen…" kannst du vier Rollen im Chat separat stylen: deine Nachrichten, KI-Antworten, Tool-Ergebnisse, Inline-Formulare — jede mit eigener Schrift, Größe, Textfarbe und Hintergrund. Werte werden pro Gerät gespeichert.

Snappen mit anderen Fenstern und Z-Order

Das AI-Helper-Fenster nimmt am gleichen Snap-Mechanismus teil wie Aktionsleisten, persistente Fenster (CSS / JS / Console / Output) und TEMP-Fenster. Ziehen einer Kante in die Nähe eines anderen JustZix-Fensters (12 px-Schwelle) → magnetisches Anziehen, eine rote Kante zeigt die Snap-Seite an beiden Fenstern. Verbundene Fenster bewegen sich als Gruppe.

Wenn sich Fenster überlappen, machen die Optionen „Nach vorne" / „Nach hinten" im Kontextmenü jedes Fensters (Rechtsklick auf die Kopfzeile) einen einmaligen Sprung — das Fenster geht über / unter alle überlappenden Nachbarn, kein wiederholtes Klicken nötig.

Seiten-Screenshot (für Vision-Modelle)

Das Werkzeug screenshot_page erfasst die aktuelle Seitenansicht und sendet sie dem Modell als Bild. Die gesamte JustZix-Oberfläche wird vor der Aufnahme automatisch ausgeblendet (FAB, Aktionsleisten, AI Helper, persistente Panes, TEMP). Ein Puffer der 3 letzten Screenshots, einmalig an die nächste Anfrage angehängt (nach dem Senden — aus dem Puffer entfernt, um Tokens zu sparen). Erfordert ein vision-fähiges Modell (z. B. gpt-4o, claude-3+/4, gemini-1.5+/2). Unter dem Tool-Result-Chip im Chat wird ein Miniaturbild angezeigt — Klick öffnet die Vollbildansicht.

Tastaturkürzel

Global (funktionieren von jeder Stelle der Seite aus)

Innerhalb eines Fensters (wenn es den Fokus hat)

Code-Editoren (Bearbeitungspanel)

Export und Import

Die Erweiterung bietet fünf Exportformate (vollständig, partiell, Verzeichnis, Gruppe, Satz) mit automatischer Erkennung des Dateityps beim Import, um ein versehentliches Überschreiben zu vermeiden.

Export — vollständig oder ausgewählte Elemente

Im Einstellungsmenü der Sidebar: Einstellungen exportieren. Das Modal öffnet zwei Modi:

• Alles — exportiert alle Verzeichnisse, Gruppen, Sätze und globalen Einstellungen (schwebender Button, ausgeblendete Panels usw.)
• Ausgewählte — zeigt einen Baum Verzeichnis → Gruppen → Sätze mit Checkboxen:
  • Die Checkbox eines Verzeichnisses / einer Gruppe wählt alle darunterliegenden Elemente aus
  • Der Zustand indeterminate (Strich) zeigt eine partielle Auswahl auf jeder Ebene
  • Die Buttons Alle auswählen / Alle abwählen für eine schnelle Bedienung
  • Eine Live-Zusammenfassung am unteren Rand zeigt, was exportiert wird

Dateien des partiellen Exports heißen justzix-partial-DATUM.json (vs. justzix-backup-DATUM.json für den vollständigen) und enthalten das Flag partial: true sowie das Feld groups[].

Export eines einzelnen Verzeichnisses (mit Auswahl)

In der Verzeichnisleiste: Export — öffnet ein Modal mit einem Baum aus Gruppen und Sätzen (analog zum partiellen Export, aber auf dieses Verzeichnis beschränkt). Exportiert werden nur die ausgewählten Sätze sowie die Gruppen, zu denen sie gehören — leere Gruppen gelangen nicht in die Datei.

Format justzix-folder — die Datei enthält das Feld groups[] mit der Hierarchie der Gruppen und Sätze des Verzeichnisses.

Export einer Gruppe

In der Gruppenleiste: Export — ein Modal mit der Liste der Sätze der Gruppe (Checkboxen). Datei: justzix-grupa-<name>-<datum>.json, Format justzix-group.

Export eines einzelnen Satzes

In der Satzansicht: Satz exportieren — lädt die Datei sofort herunter (ohne Modal). Format justzix-rule, Name: justzix-zestaw-<name>-<datum>.json.

Import — automatische Typerkennung (Modal des vollständigen Imports)

Nach dem Laden einer Datei / Einfügen von JSON erkennt die Erweiterung automatisch den Typ und zeigt ein farbiges Erkennungspanel:

Modi des partiellen Imports (violettes Panel)

• Mit den aktuellen zusammenführen (Standard) — gleicht Verzeichnisse nach ID ab, fügt neue hinzu; die übrigen Verzeichnisse in den aktuellen Einstellungen bleiben unberührt.
  Bei einem ID-Konflikt erscheint ein Prompt mit 3 Optionen:
  • 1 / nadpisz — überschreibt vorhandene Verzeichnisse (löscht deren Gruppen und Sätze)
  • 2 / kopia (Standard) — importiere als Kopien mit neuen IDs, „(import)" im Verzeichnisnamen, kein Verlust vorhandener Daten
  • Abbrechen — den Import abbrechen
• Aktuelle ersetzen — leert alles und fügt nur die ausgewählten Elemente aus der Datei ein.

Import eines einzelnen Verzeichnisses

In der Verzeichnisleiste: Import. Prüft Konflikte nach ID und Name:

• Als neues importieren — mit dem Zusatz „(import)" im Namen
• Überschreiben — löscht die alten Gruppen und Sätze des Verzeichnisses und fügt neue ein
• Zusammenführen — fügt neue Gruppen / Sätze zum vorhandenen Verzeichnis hinzu (beide bleiben erhalten)

Import einer Gruppe

In der Gruppenleiste: Import — akzeptiert 3 Formate:

• justzix-group — fügt alle Sätze der Gruppe aus der Datei ein
• justzix-folder — fügt alle Sätze aus allen Gruppen des Verzeichnisses ein
• justzix-rule — fügt einen Satz ein

Alle Sätze aus der Datei gelangen mit neuen IDs in die aktuelle Gruppe (die Operation ist immer vom Typ „Kopie hinzufügen" — keine Konflikte).

Import eines einzelnen Satzes

In der Satzansicht: Satz importieren — akzeptiert nur justzix-rule. Ein Prompt mit 3 Optionen:

• 1 / zastap — den Inhalt des aktuellen Satzes ersetzen (id und groupId bleiben erhalten)
• 2 / kopia (Standard) — als neuen Satz neben dem aktuellen hinzufügen, in derselben Gruppe, mit dem Zusatz „(import)"
• Abbrechen — abbrechen

Praktische Anwendungen des partiellen Exports

• Teilen mit dem Team — exportiere 2-3 Verzeichnisse mit der Projektkonfiguration, Kollegen importieren sie im Modus „Zusammenführen" ohne Verlust ihrer Einstellungen
• Backup nur wichtiger Konfigurationen — z. B. die Produktion bleibt, Experimente überspringst du
• Partielle Migration — übertrage nur einen Satz zwischen Geräten
• Versionierung — exportiere ein bestimmtes Verzeichnis zusammen mit der Projektdokumentation nach Git

Cloud-Synchronisierung

Einstellungen → Cloud-Synchronisierung öffnet das Modal des Synchronisierungskontos. Die Erweiterung hält deine Bibliothek (Verzeichnisse, Gruppen, Sätze, Aktionen, Aktionsleisten, Fenster im Vordergrund) in der Cloud von justzix.com und hält sie geräteübergreifend konsistent. Die Synchronisierung funktioniert nur bei Anmeldung — ohne Konto arbeitet die Erweiterung ausschließlich lokal.

Konto und Sync-Schlüssel

• Registrierung — die Erweiterung generiert einen Sync-Schlüssel (das eindeutige Geheimnis des Kontos). Bewahre ihn sicher auf — er ist die einzige Möglichkeit, sich auf einem anderen Gerät anzumelden.
• Anmeldung — du fügst den Sync-Schlüssel sowie optional eine Gerätebezeichnung ein (z. B. „Arbeitslaptop"). Du kannst entscheiden, ob der Schlüssel im Speicher der Erweiterung gemerkt oder nur für die Sitzung behalten wird.
• Eine E-Mail kann mit dem Konto verknüpft werden (per Link bestätigt) — sie dient zur Wiederherstellung des Zugriffs.

Erste Synchronisierung — Konfliktlösung

Bei der Anmeldung vergleicht die Erweiterung die lokalen Daten mit den Daten in der Cloud:

• Nur die Cloud hat Daten → sie werden auf dieses Gerät heruntergeladen.
• Nur das Gerät hat Daten → sie werden in die Cloud gesendet.
• Beide haben Daten → ein Konflikt-Modal erscheint mit drei Strategien:

Du kannst auch Abbrechen — die Erweiterung meldet sich dann ab und ändert nichts.

Laufende Synchronisierung

Nach dem ersten Abgleich läuft die Synchronisierung im Hintergrund: Die Erweiterung sendet Änderungen und ruft neue Entitäten etwa einmal pro Minute ab. Eine auf einem Gerät vorgenommene Änderung erscheint nach kurzer Zeit auf den anderen. Der Statuspunkt neben dem Eintrag „Cloud-Synchronisierung" zeigt an, ob das Konto verbunden ist.

Reiter Status — Cloud-Bibliothek, Verlauf, Aktionen

Der Reiter Status des Synchronisierungs-Modals zeigt den Kontostatus und bietet Aktions-Buttons:

• Jetzt synchronisieren — ein sofortiger Push von Änderungen und Pull neuer Entitäten.
• Vollständiger Snapshot — lädt einen Snapshot der Bibliothek vom Konto herunter.
• Kontodaten aktualisieren — aktualisiert die Kontoinformationen und die Liste der aktiven Sitzungen.
• Vollständige Synchronisierung mit Konto — bidirektional: zuerst lädt sie die gesamte Bibliothek vom Konto herunter, dann sendet sie lokale Entitäten, die auf dem Konto fehlen. Sie repariert lokal „feststeckende" Entitäten — solche, die nie auf den Server gelangt sind (abgelehnter Push, im ersten Abzug fehlend) und die die normale Synchronisierung nicht erfasst, weil sie sich nicht ändern. Nicht destruktiv: bereits auf dem Konto vorhandene Entitäten werden übersprungen (ohne neuere Versionen zu überschreiben), und auf einem anderen Gerät gelöschte Entitäten werden nicht wiederbelebt.

Cloud-Bibliothek

Zähler der Entitäten, die sich auf dem Konto befinden: Verzeichnisse, Gruppen, Sätze, Aktionen, Aktionsleisten, Fenster im Vordergrund. Gezählt werden ausschließlich erreichbare Entitäten im Baum (eine Gruppe muss ein vorhandenes Verzeichnis haben, ein Satz — eine Gruppe, eine Leiste/ein Fenster — einen vorhandenen Elternknoten) — konsistent mit den Zählern des Dashboards. Sie aktualisieren sich beim Öffnen des Panels und nach einer manuellen Synchronisierung.

Synchronisierungsverlauf

Ein gerätelokales Protokoll der letzten Synchronisierungen. Auf der Seite sind die letzten 10 Einträge sichtbar; der Button „Vollständigen Verlauf anzeigen" öffnet ein Fenster mit der vollständigen Liste (bis zu 100 Einträge). Jeder Eintrag enthält:

• die Zeit sowie das auslösende Gerät — Name und numerische Sitzungs-ID (dieselbe wie in „Aktive Sitzungen");
• eine numerische Zusammenfassung — ↑ gesendet, ↓ abgerufen, ✕ gelöscht;
• konkrete Änderungen — nach Typ gruppiert mit einem Zähler (z. B. „Aktionen ×10") sowie den Namen der Elemente, sofern bekannt;
• der mengenmäßige Zustand der Bibliothek nach der Synchronisierung (sechs Zähler).

Das Protokoll ist lokal — es wird nicht zwischen Geräten synchronisiert. Ein Eintrag entsteht nach jedem Synchronisierungs-Tick, der tatsächlich etwas geändert hat; ein manuelles „Jetzt synchronisieren" hinterlässt immer einen Eintrag, auch bei null Änderungen.

Was synchronisiert wird und was nicht

• Synchronisiert: Verzeichnisse, Gruppen, Sätze, Aktionen, Aktionsleisten, Fenster im Vordergrund (CSS-/JS-Panes, Konsolen), das Theme (hell/dunkel) und die Oberflächensprache sowie API-Schlüssel des AI Helper — aber nur die mit aktivierter „sync"-Checkbox neben dem Schlüssel (siehe AI Helper).
• Nicht synchronisiert (gerätespezifischer Zustand): die Positionen schwebender Fenster und Leisten, Fenstergrößen, der SELECT/INPUT-Wertespeicher, TEMP-Fenster, API-Schlüssel ohne aktivierte Checkbox.

Die Nutzungsstatistik (CSS-Anwendungen, JS-Ausführungen, Fensteranzeigen) wird als separate gerätespezifische Entitäten synchronisiert — die Kachel im Dashboard summiert sie über alle gekoppelten Geräte. Theme und Sprache werden als gemeinsame Kontoeinstellung synchronisiert und beim nächsten Öffnen des Panels auf einem anderen Gerät angewendet.

Teilen per Link (Shares)

Eine Alternative zum Versenden einer JSON-Datei per Messenger. Du erstellst einen öffentlichen Link mit einer Lebensdauer (1h / 6h / 12h / 24h / 48h) und gibst ihn dem Empfänger weiter. Das Backend justzix.com hält die Payload bis zum Ablauf in der Cloud, danach wird sie gelöscht.

Erfordert ein angemeldetes Synchronisierungskonto (Sync). Der Token selbst ist ein öffentliches Geheimnis — jeder mit dem Link kann herunterladen, versende ihn also nicht über öffentliche Kanäle, wenn der Inhalt sensibel ist.

Token-Format

JZS-XXXX-XXXX-XXXX-XXXX (16 Zeichen Crockford-Base32, ~80-Bit-Entropie). Akzeptiert wird auch die vollständige URL https://www.justzix.com/s/JZS-... — die Erweiterung parst und normalisiert sie (verwechselbare Buchstaben I/L→1, O→0, U→V).

Kontolimits

• max. 20 aktive Links pro Konto
• max. 50 MB insgesamt
• max. 5 MB pro einzelnem Share
• max. 30 neue Links pro Stunde

Eine Überschreitung des Limits = ein Fehler mit einer Meldung. Widerrufe ungenutzte Links im Panel Meine Shares.

Link erstellen (Absender)

Der Button „URL teilen" an vier Einstiegspunkten, neben „Datei herunterladen":

• Gesamter Export — Einstellungen → Einstellungen exportieren → Button „URL teilen" (Typ justzix-full)
• Verzeichnis — Verzeichnisleiste → Export → „URL teilen" (Typ justzix-folder)
• Gruppe — Gruppenleiste → Export → „URL teilen" (Typ justzix-group)
• Satz — Toolbar in der Satzansicht → „URL teilen" neben Export / Import (Typ justzix-rule)

Ein Klick öffnet ein Modal zur Linkgenerierung: Betreff + Zusammenfassung dessen, was du teilst, ein Radio mit TTL (Standard 24h), „Link generieren". Nach Erfolg wechselt das Modal zur Ergebnisansicht mit zwei kopierbaren Werten:

• Vollständige URL https://www.justzix.com/s/JZS-... — zum Senden an jemanden ohne Erweiterung (zeigt eine Landing-Seite)
• Nur der Token JZS-XXXX-XXXX-XXXX-XXXX — zum Einfügen in der Erweiterung des Empfängers unter „Aus URL importieren"

Jeder hat seinen eigenen Button „Kopieren". Es wird auch die Ablaufzeit in der lokalen Zeitzone angezeigt.

Panel „Meine Shares"

Einstellungen → Meine Shares (ein separates Modal, kein Teil der Synchronisierung — das sind zwei verschiedene Funktionen). Es zeigt die Liste der aktiven Links: ein Zähler in der Kopfzeile X/20 aktiv · Y MB / 50 MB und für jeden Share eine Karte mit:

• Typ (Gesamter Export / Verzeichnis / Gruppe / Satz) und ID
• Ablaufzeit („läuft ab in Xh Ymin") sowie einem Download-Zähler
• Token in Monospace (anklicken = wählt das Ganze aus)
• Zusammenfassung X Verzeichnisse · Y Gruppen · Z Sätze · N JS-Zeilen · A KB
• Buttons Link kopieren / Token kopieren / Widerrufen

Ein Widerruf nimmt bereits heruntergeladene Inhalte nicht zurück. Wenn jemand die Payload heruntergeladen hat, hat er sie lokal bei sich. Ein Share ist ein „best-effort time-limit", kein DRM.

Aus einem Link importieren (Empfänger)

Einstellungen → Aus URL importieren (zwischen „Einstellungen importieren" und „Cloud-Synchronisierung", Ketten-Symbol). Das Modal hat zwei Schritte:

Schritt 1 — Eingabe. Du fügst den Link oder nur den Token ein. Client-seitige Validierung: der Token wird aus der URL extrahiert, Crockford-Base32-normalisiert, 16 Zeichen + Format werden geprüft. Falsches Format → eine Meldung mit einem Hinweis auf das korrekte Format.

Schritt 2 — Vorschau. Die Erweiterung zeigt eine Zusammenfassung des Shares:

• Absender (Anzeigename oder „anonym", wenn keiner gesetzt wurde)
• Läuft ab in (relative Zeit)
• Typ (Gesamter Export / Verzeichnis / Gruppe / Satz)
• Größe der Payload
• Inhalt (Anzahl der Verzeichnisse / Gruppen / Sätze / Aktionen)
• CSS-Zeichen / JS-Zeilen
• Downloads

Wenn der Share JavaScript enthält (jsLines > 0), erscheint ein rotes Warnbanner mit dem Link „JavaScript-Code anzeigen". Er öffnet ein Overlay mit dem vollständigen JS-Code jeder Regel und Aktion — sieh ihn dir vor dem Import an, denn der Code wird auf passenden Seiten ausgeführt.

Schritt 3 — Import. Klick auf „Importieren" → das Backend gibt die vollständige Payload zurück → die Erweiterung erstellt neue Entitäten mit immer frischen IDs (überschreibt nie vorhandene nach ID):

Name des neuen Containers: <Name-des-Absenders oder "Import"> <Datum> — du kannst ihn danach beliebig umbenennen / verschieben.

Fehler beim Empfänger

Das Backend unterscheidet 404 „hat nie existiert" nicht von 404 „abgelaufen / widerrufen" — bewusst, um nicht preiszugeben, ob ein Token jemals existiert hat.

Aktionen programmatisch aus JS aufrufen

Jede Aktion (aus dem Reiter „Aktionen" in der Satzkarte) kannst du programmatisch aus dem JS des Satzes oder dem Code einer anderen Aktion aufrufen. Der globale Namespace window.JZ wird automatisch vor jeder Ausführung von User-JS in der MAIN-World installiert.

API — Aktionen

Beispiel — Werte lesen und setzen

// === Lesen ===
const filter = JZ.value('FILT');           // INPUT/TEXTAREA — String
const opacity = JZ.value('OPAC');          // SLIDER — string-numerisch ("75")
const mode = JZ.value('MODE');             // SELECT static — String (option.value)
const theme = JZ.value('THM');             // TOGGLE3 — state.value des aktiven Zustands

// === Setzen ===
JZ.setValue('FILT', 'neuer Wert');         // INPUT/TEXTAREA — String + dispatch input+change
JZ.setValue('OPAC', 75);                   // SLIDER — clamp auf min/max, dispatch input+change
JZ.setValue('SRT', 'prod');                // SELECT(js) — natives select + dispatch change
JZ.setValue('MODE', 'staging');            // SELECT static — content.js führt den Ablauf aus (Memory + UI + Code)
JZ.setValue('THM', 'dark');                // TOGGLE3 — Lookup nach state.value (Fallback auf label, dann idx)
JZ.setValue('THM', 2);                     // TOGGLE3 — gleichwertig; ein numerischer idx funktioniert auch

API — Leisten und schwebender Button

Context-Variablen im Aktionscode

Im Feld „JS-Code" einer Aktion hast du automatisch verfügbare Variablen — die vom Background-Service-Worker vor der Ausführung als const eingeschleust werden:

Snippet in der UI

Im Konfigurations-Modal einer Aktion vom Typ SELECT und INPUT zeigt das Panel „Stabile Aktions-ID" die vollständige action.id mit Kopier-Button sowie einen Beispiel-JS-Selektor (document.querySelector('[data-jz-action-id="..."]')). Unter der Liste der BUTTON-Aktionen siehst du Chips JZ.click('LBL') — ein Klick auf einen Chip kopiert das Snippet in die Zwischenablage.

Voraussetzungen

• Das Aktionselement muss in der Aktionsleiste sichtbar sein auf der aktuellen Seite (die Aktion hat visible: true, die Leiste ist im Baum sichtbar + die Seiten-URL passt zu den Regeln).
• Eine unsichtbare Aktion oder eine Seite, auf der die Leiste ausgeblendet ist → JZ.click() gibt false zurück, JZ.action() gibt null zurück.
• Ein für eine Aktion definiertes Tastaturkürzel hat einen eigenen Mechanismus (ein Keydown-Listener in der Capture-Phase in content.js) — es erfordert kein JZ.click().

Beispiel — Aktion AUTO, die eine Sequenz aufruft

// Code der Aktion "AUTO"
JZ.click('LOAD');                          // Klick auf die Aktion LOAD (z. B. lädt Daten)
setTimeout(() => JZ.click('PROC'), 500);   // 500ms später PROC (verarbeitet)
setTimeout(() => JZ.click('SAVE'), 1500);  // 1500ms später SAVE (speichert)

Beispiel — JS des Satzes, das auf das DOM reagiert

Nachdem ein dynamisches Element erscheint, klicke die Aktion an, die es entfernt:

// JS-Code des Satzes — ein Observer für ein Modal, das dynamisch erscheint
const observer = new MutationObserver(() => {
  if (document.querySelector('.cookie-banner')) {
    JZ.click('CCK');  // klicke die Aktion an, die das Banner entfernt
    observer.disconnect();
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Beispiel — programmatisches Setzen eines INPUT-Wertes

// JZ.click auf ein INPUT ändert den Wert nicht — verwende das Muster mit dispatch 'change':
const el = JZ.action('SRCH');           // oder JZ.actionById('a_mp1deeq3_uimd8l')
if (el) {
  el.value = 'neuer Filter';
  el.dispatchEvent(new Event('change'));
}

Direkter Zugriff über das DOM

Wenn du lieber direkt mit dem DOM arbeitest (z. B. einen Style änderst, nicht aufrufst):

// Lookup nach der stabilen ID (empfohlen — robust gegenüber einer Label-Änderung):
const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');

// Lookup nach Label (case-insensitive — GROSSBUCHSTABEN in data-jz-key):
const btn = document.querySelector('[data-jz-key="MYBT"]');
btn.style.opacity = '0.5';      // abdunkeln
btn.dataset.busy = 'true';      // eigenes Attribut

Wo die Aktionselemente im DOM leben:

Alle Elemente haben das Attribut data-jz-action-id (eine eindeutige stabile Kennung). Der Selektor .jz-actions-bar ist sicher — er kollidiert nicht mit dem DOM der Seite.

Ausgewählte Funktionen

Suche in der Sidebar

Das Feld „Suchen" filtert den Verzeichnisbaum. Abgleichlogik:

• Übereinstimmung nach Verzeichnisnamen oder URL → das gesamte Verzeichnis mit allen Sätzen bleibt sichtbar und wird automatisch aufgeklappt
• Übereinstimmung nach Satznamen, Tag oder CSS/JS-Inhalt → es werden nur die passenden Sätze im Verzeichnis angezeigt, das Verzeichnis wird automatisch aufgeklappt
• Keine Ergebnisse → die Meldung „Keine Ergebnisse für [Abfrage]"

Der Abgleich ist case-insensitive, die gelbe Hervorhebung zeigt die Übereinstimmungsstelle.

Globaler Hauptschalter

Nach einem Klick auf das Erweiterungssymbol in der Chrome-Toolbar erscheint das Popup-Widget mit einem großen grün/grauen Schalter „Plugin enabled". Im ausgeschalteten Modus wird auf keiner Seite CSS/JS eingeschleust, unabhängig von den Verzeichniseinstellungen. Der schwebende Button ist dann ausgeschaltet (Halt Red, Opacity 0.7). Der Zustand überlebt einen Neustart von Chrome.

URL aus Tab einfügen

Ein Button neben dem URL-Muster-Feld — fügt protocol://host/* aus dem aktiven Tab ein. Erstellt ein Verzeichnis in 2 Sekunden. Die Adresse der Optionsseite der Erweiterung wird übersprungen — es wird der frischeste externe Tab genommen.

Live-URL-Validierung

Inline rechts neben dem URL-Feld erscheint die Information „Passt auf X offene Tabs" oder eine Warnung. Fängt Tippfehler sofort ab.

Änderungshistorie des Satzes

Ein Snapshot von CSS und JS wird 3 Sekunden nach der letzten Bearbeitung erstellt (Debounce). Limit von 5 Versionen — die älteste wird verdrängt. Beim Wiederherstellen einer Version wird der aktuelle Inhalt als neuester Snapshot zur Historie hinzugefügt, sodass du das Rückgängigmachen immer rückgängig machen kannst.

Tags und Suche nach Tags

In der Kopfzeile der Satzkarte gibt es ein Feld für Tags — gib sie durch Kommas getrennt ein. Sie erscheinen als kleine Labels in der Sidebar neben dem Satznamen. Die Suche findet auch nach Tags.

Verzeichnis-Label und -Farbe

Jedes Verzeichnis kann ein eigenes Label auf dem schwebenden Button haben (max. 3 Buchstaben, GROSSBUCHSTABEN) und eine Farbe (Color Picker). Label und Farbe helfen, visuell zu erkennen, welches Projekt auf einer Seite aktiv ist.

Klickstatistik der Aktionen

Jeder Aktionsbutton zählt, wie oft er angeklickt wurde. Hilft zu sehen, welche wirklich genutzt werden.

CSS-Validierung

Unter dem CSS-Editor wird eine Leiste mit der Liste der Syntaxprobleme angezeigt:

• Nicht geschlossener Kommentar /* ... */
• Nicht geschlossene Klammern (es fehlt })
• Überzählige schließende Klammer } (mit Zeilennummer)

Das ist eine einfache Syntaxvalidierung — sie prüft nicht die Korrektheit von Properties/Values. CSS mit einem Fehler wird trotzdem eingeschleust (der Browser überspringt fehlerhafte Regeln einfach).

JS-Vorschau beim Import

Im Modal Import eines einzelnen Verzeichnisses erscheint nach dem Laden der Datei eine Liste der Sätze mit Metriken:

Dateiinhalt (3 Sätze):
  Auto-login                  CSS: 0L • JS: 4L                    JS
  Cookie-Banner ausblenden    CSS: 8L • JS: 0L
  Debug GTM                   CSS: 0L • JS: 12L • 2 Aktionen (8L) JS

Eine Warnung mit der Anzahl der JS-Zeilen, falls welche vorhanden sind. Ein Klick auf den JS-Button zeigt den vollständigen Code zur Durchsicht vor dem Import.

Try/catch-Isolierung von JS

Jeder JS-Satz wird separat mit eigenem try/catch ausgeführt. Ein Fehler in einem Satz blockiert die Ausführung anderer nicht. Fehler werden in der Konsole mit dem Namen des Satzes/der Aktion und dem vollständigen Stack-Trace geloggt.

Speicherkontingent

Eine Anzeige des Speicherverbrauchs im Einstellungsmenü der Sidebar (z. B. 1.2 MB / 10 MB). Rot oberhalb von 80%.

Filter „Nur aktive"

Eine Checkbox über der Liste — blendet die als unabhängig (○) markierten Sätze aus und zeigt nur die im Verzeichnis aktiven (●). Hilft, „manuelle" Sätze auszusortieren, wenn ein Verzeichnis viele davon hat. Reagiert sofort auf Änderungen der Schalter.

Aktualisierung der Erweiterung

Die Erweiterung hat einen festen Schlüssel im Manifest (der Firefox-Build — eine feste gecko.id), was bedeutet, dass die Erweiterungs-ID zwischen Aktualisierungen unveränderlich ist — die Daten (Verzeichnisse, Sätze, Einstellungen) bleiben erhalten. JustZix wird für vier Browser ausgeliefert: Chrome, Edge, Opera und Firefox.

Benachrichtigung über neue Version

Im Menü Einstellungen (neben der Versionsnummer) erscheint ein grünes Banner „Eine neue Version ist verfügbar", wenn der Server ein neueres Paket als das installierte veröffentlicht. Das Banner enthält einen Download-Link. Die Prüfung erfolgt stillschweigend — ohne Netzwerk wird das Banner einfach nicht angezeigt.

Aktualisierungsverfahren (Chrome / Edge / Opera)

1. Lade das neue ZIP mit der Aktualisierung herunter
2. Entpacke es überschreibend in denselben Ordner, in dem die vorherige Version war
3. Finde in chrome://extensions/ (Edge: edge://extensions/) die Erweiterung und klicke auf das Aktualisierungssymbol auf der Kachel
4. Die Erweiterung lädt mit den neuen Dateien neu, die Daten bleiben

Firefox

Der Firefox-Build wird über about:debugging → „Dieser Firefox" → „Temporäres Add-on laden" geladen (dabei auf die manifest.json im Ordner justzix_firefox/ zeigen). Eine Aktualisierung = erneutes Laden nach dem Überschreiben der Dateien.

CSS-Beispiele

/* Typische Werbung ausblenden */
.ad, .ads, .advertisement,
.banner-ad, [class*="ad-banner"],
[id*="google_ads"] {
  display: none !important;
}

/* Cookie-Banner ausblenden */
.cookie-banner, #cookie-notice {
  display: none !important;
}

html {
  filter: invert(0.92) hue-rotate(180deg);
}
img, video, picture, iframe, [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

/* Alle Elemente mit data-testid einfärben */
[data-testid] {
  outline: 2px dashed #f59e0b !important;
  outline-offset: -2px;
}
[data-testid]::before {
  content: attr(data-testid);
  position: absolute;
  background: #f59e0b;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 9999;
}

/* Lesbarkeit von Admin-Tabellen erhöhen */
table.admin-list td, table.admin-list th {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

/* Sticky-Header der Tabelle */
table.admin-list thead {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

/* Abwechselnde Zeilen */
table.admin-list tbody tr:nth-child(odd) {
  background: #f9fafb;
}

/* Oft haben Seiten eine starre max-width 1200px - erzwinge die Breite */
.container, .main-content, main {
  max-width: 95% !important;
  width: 95% !important;
}

body::before {
  content: "DEV-UMGEBUNG";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #dc2626;
  color: white;
  text-align: center;
  padding: 4px;
  font-weight: bold;
  z-index: 999999;
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
body { padding-top: 28px !important; }

JavaScript-Beispiele

// Nur für dev! Speichere niemals echte Passwörter
window.addEventListener('load', () => {
  const login = document.querySelector('input[name="login"]');
  const pass = document.querySelector('input[name="password"]');
  if (login) login.value = 'admin@dev.local';
  if (pass) pass.value = 'devpass123';
});

// dataLayer.push abfangen (GTM)
const origPush = window.dataLayer?.push;
if (origPush) {
  window.dataLayer.push = function(...args) {
    console.log('%c[GTM]', 'color:#16a34a;font-weight:bold', args);
    return origPush.apply(window.dataLayer, args);
  };
}

// gtag abfangen
const origGtag = window.gtag;
if (origGtag) {
  window.gtag = function(...args) {
    console.log('%c[GA4]', 'color:#2563eb;font-weight:bold', args);
    return origGtag.apply(window, args);
  };
}

// Alle 500ms für 10s prüfen und „Akzeptieren"-Buttons klicken
let attempts = 0;
const interval = setInterval(() => {
  if (++attempts > 20) return clearInterval(interval);

  const buttons = [...document.querySelectorAll('button, a')];
  const target = buttons.find(b =>
    /akzeptieren|zustimmen|accept all/i.test(b.textContent || '')
  );
  if (target) {
    target.click();
    clearInterval(interval);
  }
}, 500);

document.addEventListener('keydown', (e) => {
  // Ctrl+Shift+S - Formular speichern
  if (e.ctrlKey && e.shiftKey && e.key === 'S') {
    e.preventDefault();
    document.querySelector('button[type="submit"]')?.click();
  }
  // Ctrl+Shift+E - zur Bearbeitung wechseln (ungetestetes Beispiel)
  if (e.ctrlKey && e.shiftKey && e.key === 'E') {
    e.preventDefault();
    document.querySelector('a.edit-link')?.click();
  }
});

// Lästige confirm und beforeunload für die Dauer der Tests überspringen
window.confirm = () => true;
window.alert = (msg) => console.log('[unterdrückter alert]', msg);
window.onbeforeunload = null;
window.addEventListener('beforeunload', e => {
  e.stopImmediatePropagation();
}, true);

// Denk daran - reines CSS kann das nicht, wenn der Elternknoten display:none hat
window.addEventListener('load', () => {
  const target = document.querySelector('.important-info');
  const newParent = document.querySelector('.sidebar');
  if (target && newParent) {
    newParent.prepend(target);
  }
});

// Alle versteckten input type="hidden" anzeigen
document.querySelectorAll('input[type="hidden"]').forEach(input => {
  const wrapper = document.createElement('div');
  wrapper.style.cssText = 'background:#fef3c7;padding:4px;font-size:11px;font-family:monospace;border:1px dashed #f59e0b;';
  wrapper.innerHTML = `${input.name}: ${input.value}`;
  input.parentNode.insertBefore(wrapper, input);
});

Beispiele für Aktionsbuttons

document.querySelectorAll('input, textarea, select').forEach(el => {
  if (el.type === 'hidden') return;
  if (el.type === 'checkbox' || el.type === 'radio') {
    el.checked = false;
  } else {
    el.value = '';
  }
  el.dispatchEvent(new Event('change', { bubbles: true }));
});

const data = {
  email: 'test@example.com',
  phone: '600000000',
  firstName: 'Jan',
  lastName: 'Testowy',
  street: 'Testowa 1',
  city: 'Warszawa',
  zip: '00-001'
};
Object.keys(data).forEach(name => {
  const el = document.querySelector(`[name="${name}"]`);
  if (el) {
    el.value = data[name];
    el.dispatchEvent(new Event('input', { bubbles: true }));
    el.dispatchEvent(new Event('change', { bubbles: true }));
  }
});

// Für einen typischen Shop — den ersten „in den Warenkorb"-Button klicken
const btn = document.querySelector('.add-to-cart, [data-action="add-to-cart"]');
if (btn) btn.click();
else alert('Kein „in den Warenkorb"-Button gefunden');

navigator.clipboard.writeText(location.href).then(() => {
  console.log('Kopiert:', location.href);
});

// Extrahiert ein JWT-Token aus localStorage / Cookies zum Debuggen
const token = localStorage.getItem('authToken')
  || document.cookie.match(/token=([^;]+)/)?.[1];
if (token) {
  navigator.clipboard.writeText(token);
  alert('Token kopiert. Erste Zeichen: ' + token.slice(0, 20) + '...');
} else {
  alert('Kein Token vorhanden');
}

// Alle fetch abfangen und in der Konsole anzeigen
const origFetch = window.fetch;
window.fetch = async function(...args) {
  console.log('%c[FETCH]', 'color:#2563eb', args[0]);
  const res = await origFetch.apply(this, args);
  return res;
};
console.log('Fetch-Logging aktiviert. Jeder Aufruf erscheint in der Konsole.');

const info = {
  url: location.href,
  userAgent: navigator.userAgent.split(' ').pop(),
  cookies: document.cookie.split(';').length,
  localStorage: Object.keys(localStorage).length,
  framework: window.React ? 'React' : window.Vue ? 'Vue' : window.jQuery ? 'jQuery' : 'unknown'
};
alert(JSON.stringify(info, null, 2));

Anwendungsszenarien

1. Arbeit mit mehreren Kunden / Projekten

Jedes Projekt hat ein eigenes Verzeichnis mit eigenem URL-Muster. Du kannst Verzeichnisse haben:

• justzix.com — Produktionsmodifikationen
• justzix dev — für https://dev.justzix.com/* mit rotem „DEV"-Banner
• Kunde X — Modifikationen auf einer anderen Domain

Im rechten Panel lassen sich einzelne Verzeichnisse schnell ein-/ausschalten. Der Export eines einzelnen Verzeichnisses ermöglicht es, die Konfiguration mit dem Team zu teilen.

2. Entwicklungsumgebung mit visueller Kennzeichnung

Füge auf jeder Dev/Staging-Umgebung ein Banner und Auto-Login hinzu. Ein CSS-Satz (Banner) und ein JS (Auto-Fill). Du erstellst ein separates Verzeichnis für jede Umgebung, es lässt sich mit einer einfachen Checkbox zusammenführen.

3. Werkzeuge für Product Manager / QA

Ein Aktionspanel mit Buttons: FILL (Testdaten), CART (Testkauf), CLR (Formular leeren), STATE (App-Zustand in einem alert anzeigen). Ohne Entwickler, ohne Konsole, ein Klick.

4. Modifikationen öffentlicher Seiten

Lieblingsblogs/-dokumentationen mit besserer Lesbarkeit — größerer Container, Schriftart, dunkler Modus. Jede Seite in einem separaten Verzeichnis, „Aktiv" dauerhaft eingeschaltet gelassen.

5. Debuggen von Analytics / GTM

Ein Satz für jede Domain mit JS, das dataLayer.push und gtag abfängt. Du schaltest ihn ein, wenn ein Kunde ein Problem mit Analytics meldet, ohne den Seitencode zu berühren.

6. Arbeit an Administrationspanels

Das Muster *://*.justzix.com/admin/* und CSS, das Tabellen, Listen, Formulare verbessert. Plus eine Aktion „Testfilter", die automatisch Filter für einen typischen Workflow setzt.

7. Sichere Tests in der Produktion

Die Aktion RO (read-only) schleust CSS ein, das alle Buttons „Löschen", „Speichern", „Senden" ausblendet — ein temporärer „Nur-Lese-Modus", um sich nicht zu vertun.

// Gefährliche Buttons ausblenden
document.querySelectorAll(
  'button[type="submit"], .delete-btn, .danger-btn, [class*="delete"]'
).forEach(b => b.style.display = 'none');
console.warn('READ-ONLY-MODUS aktiviert');

Häufige Probleme und Lösungen

JavaScript wurde nicht ausgeführt

• Prüfe, ob die Seite zum Muster passt — der schwebende Button sollte sichtbar sein
• JS startet einmal pro Lebenszyklus der Seite — Code geändert? Lade die Seite neu (F5)
• Prüfe die DevTools-Konsole — JS-Fehler werden dort als [JustZix] JS error geloggt
• Der Satz muss eingeschaltet sein — „Aktiv" allein genügt nicht

CSS funktioniert nicht

• Spezifität — die Seite hat eigene Styles; verwende !important oder spezifischere Selektoren
• Dynamische Klassen — manche Frameworks generieren Klassen wie .css-1abcd, die sich ändern. Verwende Attribute ([data-testid]) oder stabile Selektoren
• Shadow DOM — manche Elemente befinden sich im Shadow DOM und CSS von außerhalb hat keinen Zugriff auf sie. Hier braucht es JS

Der schwebende Button erscheint nicht

• Die URL passt zu keinem Muster
• Der Button wurde zuvor ausgeblendet — klicke im Popup-Widget auf Schwebenden Button wiederherstellen
• Die Seite hat eingeschleuste Skripte blockiert (selten)

Nach der Aktualisierung der Erweiterung habe ich Daten verloren

Die Erweiterung hat einen festen Schlüssel im Manifest — nachfolgende Updates bewahren die Daten. Wenn die Daten trotzdem verschwunden sind:

• Exportiere die Einstellungen regelmäßig (Export)
• Aktualisiere durch Überschreiben desselben Ordners — ändere nicht den Pfad
• Verwende in chrome://extensions/ den Aktualisierungs-Button, lösche nicht und installiere nicht erneut
• Wenn du Daten verlierst, importiere den vorherigen Export — 1-2 Klicks genügen

Die Positionen der Buttons/Panels werden zurückgesetzt

Das ist normal — die Positionen sind pro Browserfenster und werden im Sitzungsspeicher abgelegt (chrome.storage.session). Nach dem Schließen des Fensters verschwinden die Positionen, in einem neuen Fenster startest du von den Standardwerten. Die Position überlebt die Navigation zwischen Tabs im selben Fenster.

Der partielle Export hat einige globale Einstellungen ausgelassen

Ja — der partielle Export enthält nur die ausgewählten Verzeichnisse und Sätze plus die zugehörigen Sichtbarkeitseinstellungen. Er enthält nicht die Positionen der schwebenden Panels (sie sind pro Fenster) oder andere globale Präferenzen. Für ein vollständiges Backup verwende den Modus „Alles".

Der partielle Import hat mir ein zuvor nicht vorhandenes Verzeichnis überschrieben

Der Modus „Zusammenführen" gleicht Verzeichnisse nach ID ab. Wenn die importierte Datei eine ID hatte, die mit einem vorhandenen Verzeichnis kollidiert (z. B. dieselbe Datei wurde bereits einmal importiert), erscheint ein Prompt: 1 überschreiben / 2 Kopie (Standard, sicher) / Abbrechen. Mit der Wahl von 2 erhältst du Kopien mit neuen IDs und dem Zusatz „(import)" im Verzeichnisnamen — du verlierst nichts.

Der Verzeichnisbaum klappt nicht auf

Der Aufklapppfeil erscheint nur, wenn ein Verzeichnis Sätze hat. Ein leeres Verzeichnis hat einen ausgegrauten Punkt statt eines Pfeils. Der Aufklappzustand jedes Verzeichnisses wird in chrome.storage.local gemerkt.

Ich sehe den Export/Import-Button des Verzeichnisses nicht

Diese Buttons befinden sich in der Verzeichnisleiste (oben im Bearbeitungsbereich), neben dem Button „Verzeichnis löschen". Nicht zu verwechseln mit den Buttons im Einstellungsmenü, die die gesamten Einstellungen betreffen.

Der AI Helper antwortet nicht

• Kein API-Schlüssel — gib in den Einstellungen → AI Helper den Schlüssel mindestens eines Anbieters ein (OpenAI / Anthropic / Gemini).
• Ungültiger Schlüssel — das Fenster zeigt den vom Anbieter zurückgegebenen Fehler; prüfe den Schlüssel und die Kontolimits beim Anbieter.
• Der Schlüssel hat sich nicht auf das zweite Gerät synchronisiert — die Synchronisierung funktioniert nur für Schlüssel mit aktivierter Checkbox „synchronisieren" und erfordert ein angemeldetes JustZix-Synchronisierungskonto.

Konflikt mit der Content Security Policy

Das JS von Regeln und Aktionen läuft im Seitenkontext über eine geschichtete Strategie, die gegen strikte Content-Security-Policy-Regeln resistent ist. Die meisten Seiten — auch große Dienste wie Facebook — funktionieren sofort, ohne Konfiguration.

Seiten mit sehr strikter CSP (manche Banken, Unternehmensseiten) können die Ausführung blockieren. Damit JS auf jeder Seite läuft, aktiviere für JustZix die Option „Benutzerskripte zulassen": öffne chrome://extensions, gehe zu den JustZix-Details und schalte den Schalter ein (ältere Browser benötigen zusätzlich den Entwicklermodus). Wenn eine Seite die Ausführung blockiert, zeigt das JavaScript-Fenster / die JS-Konsole eine entsprechende Meldung.

JustZix — Anleitung