北京
做浏览器扩展的人，第一反应通常是iframe。沙盒隔离、样式独立，看起来干净利落。作者最初也是这么选的，但很快发现这条路走不通。
核心矛盾在于字体。iframe无法继承宿主页面的字体设置，要么出现无样式内容闪烁（FOUC），要么硬编码一套字体栈，结果就是在《纽约时报》或维基百科这种有定制字体的网站上，提示框看起来格格不入。这种视觉错位用户一眼就能察觉。
影子DOM（Shadow DOM）的解法更巧妙。扩展的提示框以影子宿主形式附着，结构上与页面CSS隔离，但物理上仍在同一文档中。宿主页面的字体渲染在操作系统层面生效，提示框的正文继承相同的抗锯齿和子像素渲染，与周围文章保持一致。没有闪烁，没有错位。
但隔离并非绝对。部分CSS自定义属性（变量）能穿透影子边界——如果宿主页面在:root级别定义了--background: transparent，你需要在影子样式中显式重置。作者曾在几个深色模式站点上踩坑，提示框继承了近乎透明的背景，直到在影子根作用域添加显式的background: white才解决。
定位是iframe的另一个硬伤。绝对定位的iframe必须与宿主页面的层叠上下文和溢出规则搏斗。作者希望提示框锚定到光标位置，即读取mouseup坐标并放置DOM节点。影子DOM下，定位逻辑就是标准的position: fixed计算；换作iframe，你得在无法控制的父容器上与overflow: hidden缠斗。
这个名为rabbitholes的Chrome扩展，用影子DOM实现了一个具体场景：对任意高亮文本，调用Claude Haiku 4.5渲染行内解释。最终效果是提示框在任何网站上都视觉协调，正确继承字体无需轮询，出现时不会触发布局偏移。零遥测，Manifest V3，请求直接从浏览器发往api.anthropic.com。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
