Der AI-Helper lebt jetzt in einem Shadow DOM — das Seiten-CSS kann seine UI nicht mehr kaputt machen
Bis v3.2.75 wurde das AI-Helper-Fenster in JustZix als gewöhnliches Element im DOM-Baum der Seite gerendert — was bedeutete, dass aggressives Seiten-CSS (globales * { font-family: … } oder button { border: 0 }) in die Erweiterungs-UI durchsickerte und ihr Aussehen kaputt machte. In v3.2.76 haben wir das Fenster in ein Shadow DOM verpackt — Seiten-CSS kann die AI-Helper-UI nicht mehr anfassen, und sie funktioniert auf jeder Domain identisch.
Was kaputt ging
Seiten wissen nicht, dass eine Erweiterung neben ihnen sitzt — ihr CSS ist global. Wenn sie body * { box-sizing: border-box !important; } setzen, trifft das auch jedes Element, das die Erweiterung injiziert. Klassische Übeltäter, die wir gesehen haben:
- play.google.com —
font-family: 'Google Sans', sans-serifseitenweit erzwungen zog Google Sans auch ins AI-Helper-Fenster und brach die visuelle Konsistenz mit dem Rest der Erweiterung. - Unternehmensseiten mit aggressiven CSS-Resets —
* { margin: 0; padding: 0 }hat das Padding im Fenster auf null gesetzt, alles lief ineinander. - Seiten mit
!importantauf Buttons — manche Hintergrundfarben in den AI-Helper-Buttons verschwanden, weil die Seite ihr eigenesbackground-colorerzwang.
Was ein Shadow DOM ist
Shadow DOM ist ein W3C-Standard, den jeder moderne Browser unterstützt (Chrome 53+, Firefox 63+). Die Idee: Jedes Element kann eine „shadow root" haben — einen parallelen DOM-Teilbaum, an den das CSS und die Selektoren der Seite NICHT herankommen. Die gleiche Isolation, die ein <video>-Element für seine nativen Controls bekommt — die Seite kann sie nicht umstylen.
Ein Komponenten-Autor deklariert sein eigenes CSS innerhalb der Shadow Root — und nur dieses CSS greift. Aus Sicht der Seite ist die Shadow Root eine Blackbox.
Wie es jetzt aussieht
Das AI-Helper-Fenster (.jz-pane-ai) rendert als Shadow Root, die an ihr Host-Element im DOM-Baum angehängt ist. Drinnen bringt es seine eigenen Styles mit — Farben, Schriften, Padding, Ränder — alles, was es braucht. Seiten-Styles überschreiten die Grenze nicht:
- Ihr
font-family: 'Google Sans'aufbodykommt nicht rein. - Ihr
* { margin: 0 }mit!importantkommt nicht rein. - Nicht einmal ihr
body button { background: red }kommt rein.
Beim Testen auf einer breiten Palette von Domains (Google, Facebook, GitHub, Banken, Intranets) sieht das Fenster jetzt überall identisch aus.
Was das für dich bedeutet
Der einfachste Effekt: das AI-Helper-Fenster sieht immer so aus, wie wir es entworfen haben. Egal, ob du auf einem aggressiv gestylten Dienst wie Notion / Gmail / Slack bist, auf einem minimalistischen Blog oder in einem Unternehmens-Intranet mit eigener CSS-Bibliothek — die AI-Helper-UI trägt konsistente Farben, die Monospace-Schrift für Code, das richtige Feld-Padding, lesbare Buttons.
Der zweite Effekt: du musst keine „die Erweiterung sieht auf X komisch aus"-Bugs mehr melden. Diese ganze Klasse von Problemen ist weg.
Warum jetzt
Shadow DOM gibt es schon seit Jahren, aber die Übernahme erforderte den Umbau des Renderings der Komponente — Stylesheet an die Shadow Root angehängt, Event-Verteilung, das Anhängen von Maus-Down (Resize, Drag) ans Host-Element. Für den AI-Helper, mit viel interaktiver Oberfläche (Chat-Eingabe, Copy-Dropdown, scrollende Historie, Tooltips), mussten mehrere Teile neu geschrieben werden. Der Rest der Entwicklerfenster (CSS-Pane, JS-Pane, JS-Konsole, Output-Konsole) bleibt vorerst im Light DOM — siehe die Fenster-Übersicht. Mehr davon zu Shadow DOM zu migrieren ist die natürliche Richtung.
Bonus: eine schnellere Output-Konsole (v3.2.30)
Ein früherer Schritt in Richtung Shadow-DOM-Isolation traf die Output-Konsole (v3.2.30). Nebeneffekt: ein ernsthafter Speed-Up. Vor Shadow DOM dauerte das Rendern von 700 Log-Einträgen ~5 Sekunden (Seitenstyles erzwangen ein Style-Recalc auf jedem Knoten). Mit Shadow DOM — ~100 Millisekunden. Dasselbe gilt für die Tabs Network, Errors und dataLayer. Eigener Post: Output-Konsole 50× schneller dank Shadow DOM.
Siehe auch
- Fenster auf der Seite — Übersicht über jedes Entwicklerfenster
- JS-Regeln funktionieren jetzt auf Facebook, X und GitHub — ein weiteres „die Seite blockiert die Erweiterung"-Problem — gelöst
- Interaktives Onboarding-Tutorial — eine Einführung in den AI-Helper und den Rest der Fenster
JustZix installieren — und bekomme eine AI-Helper-UI, die auf jeder Seite gleich aussieht.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.