AI Helper 现在住进了 shadow DOM——页面 CSS 再也弄不坏它的 UI
在 v3.2.75 之前，JustZix 中的 AI Helper 窗口是作为页面 DOM 树中的普通元素来渲染的——这意味着激进的页面 CSS（全局的 * { font-family: … } 或 button { border: 0 }）会泄漏进扩展 UI 并破坏它的外观。在 v3.2.76 中，我们把窗口包进了一个 shadow DOM——页面 CSS 再也碰不到 AI Helper 的 UI，并且它在每个域名上都表现一致。
过去会坏掉的东西
页面并不知道旁边坐着一个扩展——它们的 CSS 是全局的。如果它们设了 body * { box-sizing: border-box !important; }，这也会击中扩展注入的每一个元素。我们见过的典型肇事者：
- play.google.com——站点级强制的
font-family: 'Google Sans', sans-serif也把 Google Sans 拉进了 AI Helper 窗口，破坏了与扩展其余部分的视觉一致性。 - 带有激进 CSS 重置的企业站点——
* { margin: 0; padding: 0 }把窗口里的 padding 清零，所有东西挤在一起。 - 在按钮上加
!important的页面——AI Helper 按钮里的一些背景色消失了，因为页面强制了自己的background-color。
什么是 shadow DOM
Shadow DOM 是 W3C 标准，每一个现代浏览器都支持（Chrome 53+、Firefox 63+）。思路是：任何元素都可以拥有一个"shadow root"——一个平行的 DOM 子树，页面的 CSS 和选择器都无法触及。就像 <video> 元素为其原生控件所获得的那种隔离——页面无法重新样式化它们。
组件作者在 shadow root 内部声明自己的 CSS——而且只有这份 CSS 生效。从页面的视角看，shadow root 是一个黑盒。
现在的样子
AI Helper 窗口（.jz-pane-ai）以一个挂在 DOM 树宿主元素上的 shadow root 形式渲染。在里面它自带样式——颜色、字体、padding、边框——它需要的一切。页面样式不会越过边界：
- 它们写在
body上的font-family: 'Google Sans'进不来。 - 它们带
!important的* { margin: 0 }进不来。 - 就连它们的
body button { background: red }也进不来。
在覆盖广泛的域名（Google、Facebook、GitHub、银行、企业内网）的测试中，这个窗口现在在每个地方看起来都一模一样。
这对你意味着什么
最直接的效果是：AI Helper 窗口始终保持我们设计的样子。不管你身处样式激进的服务（如 Notion / Gmail / Slack）、极简博客，还是带自家 CSS 库的企业内网——AI Helper UI 都带着一致的颜色、用于代码的等宽字体、合适的字段 padding、清晰可读的按钮。
第二个效果是：你不必再为"扩展在 X 上看起来怪怪的"提 bug 了。一整类问题都消失了。
为什么是现在
Shadow DOM 已经流行多年，但要采用它需要重建组件的渲染——样式表挂到 shadow root、事件分发、把 mouse-down（resize、drag）挂到宿主元素上。对于 AI Helper 来说，由于有大量交互表面（聊天输入框、复制下拉菜单、可滚动的历史记录、tooltip），有好几块都得重写。其余的开发者窗口（CSS pane、JS pane、JS Console、Output Console）目前仍保留在 light DOM——见窗口总览。把更多窗口迁移到 shadow DOM 是自然的方向。
福利：更快的 Output Console（v3.2.30）
更早一步迈向 shadow DOM 隔离的工作落在了 Output Console（v3.2.30）上。副作用是：明显的提速。在 shadow DOM 之前，渲染 700 条日志条目大约要 5 秒（页面样式强制对每个节点做样式重算）。用上 shadow DOM 之后——大约 100 毫秒。Network、errors 和 dataLayer 标签页也是一样。专门的一篇：借助 shadow DOM，Output Console 快了 50 倍。
另见
- 页面内窗口——每一个开发者窗口的总览
- JS 规则现在能在 Facebook、X 和 GitHub 上工作——另一类"页面阻挡扩展"的问题——已解决
- 交互式入门教程——AI Helper 与其余窗口的入门介绍
安装 JustZix——获得一个在每个页面上都长一个样的 AI Helper UI。
为这篇文章评分
暂无评分 — 成为第一个。