欢迎回到《Nanobrowser 源码分析》系列。在上一篇中，我们揭秘了 AI 是如何通过简化 DOM 和无障碍树（A11y Tree）来“看见”网页的。
当 Navigator 智能体观察了页面快照，并决定“点击那个名为‘加入购物车’的按钮”时，系统是如何将这个逻辑意图转化为真实的浏览器操作的？今天，我们将深入Interaction（交互层），探究 Nanobrowser 模拟点击、滚动与输入的底层实现。
一、 指令的“长征”：从 LLM 到 DOM
在 Nanobrowser 中，一个交互动作的产生需要跨越三个核心环节：
决策逻辑 (Background Script)：LLM 返回一个 JSON 指令，例如
{"action": "click", "id": "nano-123"}。指令分发 (Message Passing)：Background 通过
chrome.tabs.sendMessage将指令发送到目标页面的 Content Script。动作执行 (Content Script)：Content Script 根据内部维护的
nano-id映射表找到真实的 DOM 元素，并触发合成事件。
二、 模拟点击：为什么不仅仅是.click()？
在源码的src/content/actions/click.ts中，你会发现 Nanobrowser 并没有简单地调用element.click()。
2.1 绕过框架监听
现代前端框架（React, Vue）通常将事件绑定在父节点或使用合成事件。简单的原生.click()有时无法触发业务逻辑。Nanobrowser 采用了更底层的MouseEvent构造函数：
TypeScript
const event = new MouseEvent('click', { view: window, bubbles: true, cancelable: true, buttons: 1 }); element.dispatchEvent(event);2.2 视觉中心点击
为了更像人类，Nanobrowser 会计算元素的几何中心：
调用
getBoundingClientRect()。获取元素的中点坐标 $(x, y)$。
在某些模式下，它甚至会模拟鼠标移动到该点后再点击，以规避简单的反爬虫检测。
三、 模拟输入：应对复杂的表单状态
对于输入框，直接设置element.value = "text"是无效的，因为这不会触发框架的状态更新（如 React 的onChange）。
3.1 序列化输入流
在src/content/actions/type.ts中，Nanobrowser 模拟了完整的按键生命周期：
Focus：首先聚焦元素。
Input 事件序列：针对每一个字符，依次触发
keydown->keypress->input->keyup。Change：最后触发
change事件确保数据同步。
| 步骤 | 模拟行为 | 目的 |
| 1 | element.focus() | 激活输入状态 |
| 2 | InputEvent | 触发框架的实时校验逻辑 |
| 3 | Delay | 在字符间加入随机微秒延迟（模拟真人） |
四、 智能滚动：AI 的“视野”扩展
由于 AI 受限于当前页面的快照，如果目标元素在屏外，它必须学会滚动。
4.1 滚动策略
Nanobrowser 实现了两种滚动模式：
精准滚动 (
scrollIntoView)：当 Planner 知道目标位置时，直接将元素平滑滚动至视口中央。探索性滚动：如果 AI 正在寻找信息，它会发出
scroll_down指令。源码中通过window.scrollBy({ top: window.innerHeight * 0.8, behavior: 'smooth' })来实现类似翻页的效果。
关键点：每次滚动结束后，Nanobrowser 会自动触发一次新的视觉快照，确保 AI 看到的永远是最新的页面状态。
五、 反检测与稳定性 (Stealth & Reliability)
在 2026 年的 Web 环境下，反爬虫技术异常强大。Nanobrowser 在交互层做了多项优化：
IsTrusted 模拟：虽然扩展程序生成的事件
isTrusted属性默认为false，但 Nanobrowser 通过模拟完整的事件链（MouseMove -> MouseDown -> MouseUp），尽可能贴合真人行为轨迹。重试机制：如果点击后页面没有发生预期的 DOM 变化（由 Validator 智能体监控），系统会自动重新计算坐标并再次尝试。
Shadow DOM 支持：源码中包含深度遍历逻辑，能够穿透 Shadow Root 寻找隐藏在 Web Components 内部的交互按钮。
六、 源码路径指引
如果你想修改 Nanobrowser 的交互逻辑，请直奔以下文件：
src/content/actions/executor.ts: 交互指令的总入口。src/content/actions/mouse.ts: 处理点击、双击、悬停。src/content/actions/keyboard.ts: 处理复杂的组合键输入。
结语
交互层是 Nanobrowser 的“手脚”。通过精密模拟原生的事件流，它成功地让 LLM 能够像真人一样操控浏览器。这种从逻辑意图到物理事件的转换，是实现真正“浏览器 Agent”的最后一块拼图。
