L'AI Helper ora vive in un shadow DOM — il CSS della pagina non può più rompergli l'UI
Fino alla v3.2.75 la finestra dell'AI Helper in JustZix veniva renderizzata come elemento ordinario nell'albero DOM della pagina — il che significava che un CSS di pagina aggressivo (un * { font-family: … } globale o button { border: 0 }) finiva nell'UI dell'estensione e ne rovinava l'aspetto. Nella v3.2.76 abbiamo avvolto la finestra in uno shadow DOM — il CSS della pagina non può più toccare l'UI dell'AI Helper, e funziona allo stesso modo su ogni dominio.
Cosa si rompeva prima
Le pagine non sanno che un'estensione siede accanto a loro — il loro CSS è globale. Se impostano body * { box-sizing: border-box !important; }, colpisce anche ogni elemento che l'estensione inietta. I colpevoli classici che abbiamo visto:
- play.google.com —
font-family: 'Google Sans', sans-serifforzato a livello di sito tirava Google Sans anche dentro la finestra dell'AI Helper, rompendo la coerenza visiva con il resto dell'estensione. - Siti aziendali con reset CSS aggressivi —
* { margin: 0; padding: 0 }azzerava il padding dentro la finestra, tutto si appiccicava. - Pagine con
!importantsui bottoni — alcuni colori di sfondo nei bottoni dell'AI Helper sparivano perché la pagina imponeva il propriobackground-color.
Cos'è uno shadow DOM
Lo shadow DOM è uno standard W3C supportato da ogni browser moderno (Chrome 53+, Firefox 63+). L'idea: qualsiasi elemento può avere una "shadow root" — un sottoalbero DOM parallelo che il CSS e i selettori della pagina NON raggiungono. La stessa isolamento che un elemento <video> ottiene per i suoi controlli nativi — la pagina non può ri-stilizzarli.
L'autore di un componente dichiara il proprio CSS dentro la shadow root — e solo quel CSS si applica. Dal punto di vista della pagina, la shadow root è una scatola nera.
Com'è adesso
La finestra dell'AI Helper (.jz-pane-ai) viene renderizzata come una shadow root attaccata al suo elemento host nell'albero DOM. Dentro porta i propri stili — colori, font, padding, bordi — tutto ciò che le serve. Gli stili della pagina non attraversano il confine:
- Il loro
font-family: 'Google Sans'subodynon entra. - Il loro
* { margin: 0 }con!importantnon entra. - Nemmeno il loro
body button { background: red }entra.
Durante i test su un ampio ventaglio di domini (Google, Facebook, GitHub, banche, intranet) la finestra adesso appare identica ovunque.
Cosa significa per te
L'effetto più semplice: la finestra dell'AI Helper ha sempre l'aspetto che abbiamo progettato. Che tu sia su un servizio dallo stile aggressivo come Notion / Gmail / Slack, su un blog minimalista o su un'intranet aziendale con la propria libreria CSS — l'UI dell'AI Helper porta colori coerenti, il font monospaziato per il codice, il giusto padding dei campi, bottoni leggibili.
Il secondo effetto: non devi più segnalare bug "l'estensione fa uno strano effetto su X". L'intera classe di problemi è sparita.
Perché adesso
Lo shadow DOM è comune da anni, ma adottarlo ha richiesto di ricostruire il rendering del componente — foglio di stile attaccato alla shadow root, distribuzione degli eventi, agganciare il mouse-down (resize, drag) all'elemento host. Per l'AI Helper, con tanta superficie interattiva (input della chat, dropdown di copia, cronologia che scorre, tooltip), diversi pezzi sono stati riscritti. Il resto delle finestre di sviluppo (pannello CSS, pannello JS, console JS, console di output) resta in light DOM per ora — vedi la panoramica delle finestre. Migrarne altre verso lo shadow DOM è la direzione naturale.
Bonus: una console di output più veloce (v3.2.30)
Un passo precedente verso l'isolamento via shadow DOM ha toccato la console di output (v3.2.30). Effetto collaterale: un'accelerazione seria. Prima dello shadow DOM, renderizzare 700 voci di log richiedeva ~5 secondi (gli stili della pagina forzavano un ricalcolo dello stile su ogni nodo). Con lo shadow DOM — ~100 millisecondi. Stessa cosa per le schede Network, errors e dataLayer. Post dedicato: Console di output 50× più veloce grazie allo shadow DOM.
Vedi anche
- Finestre nella pagina — panoramica di ogni finestra di sviluppo
- Le regole JS ora funzionano su Facebook, X e GitHub — un altro problema "la pagina blocca l'estensione" — risolto
- Tutorial di onboarding interattivo — un'introduzione all'AI Helper e al resto delle finestre
Installa JustZix — e ottieni un'UI dell'AI Helper che appare identica su ogni pagina.
Valuta questo articolo
Nessuna valutazione — sii il primo.