开发自动化浏览器插件，遇到wujie 虚拟 iframe 沙箱

wujie 虚拟 iframe 沙箱原理

wujie 是京东开源的一个微前端框架，核心思路是用 iframe 隔离 JS，用 Web Component 渲染 UI：

架构

主页面 (douyin.com)
├── content script（你的脚本注入点）
├── <wujie-app data-wujie-id="chat">     ← Web Component
│   └── #shadow-root
│       └── 子应用 DOM 内容              ← 通过代理渲染到这里
└── <iframe name="wujie-chat" hidden>     ← 隐藏的沙箱 iframe
    └── 子应用的 JS 逻辑运行在这里

工作流程

1. 创建隐藏 iframe — 加载子应用（如美团客服），JS 在 iframe 内执行，实现沙箱隔离
2. 劫持 DOM 操作 — wujie 代理了 iframe 内 document.createElement、appendChild 等 API
3. DOM 渲染到 Shadow DOM — 子应用的 DOM 节点实际被渲染到主页面 <wujie-app> 的 shadowRoot 中
4. 事件代理 — iframe 内的事件通过代理冒泡到主页面

为什么 all_frames: true 必须打开

你的 content script 需要访问 wujieApp.shadowRoot.firstElementChild 来操作子应用 DOM。但 shadowRoot 内的元素事件处理和部分操作需要在子应用（iframe）的上下文才能正常工作。

如果 all_frames: false，脚本不注入 wujie 的 hidden iframe，那么：

• 在美团/视频号等场景下的点击、输入操作可能失效
• simulateClick、simulateEditableInput 需要的事件上下文不完整

简单类比

把 wujie 想象成：iframe 里跑 JS，但 UI 画在主页面墙上。你的脚本既要能摸到墙上的 UI（通过 shadowRoot），有时也需要和 iframe 里的 JS 通信（通过 all_frames: true）。