PageGuide:将大模型答案锚定到网页 DOM 的浏览器辅助扩展 PageGuide: Browser extension to assist users in navigating a webpage and locating information
一款把 LLM 答案直接锚定到 HTML DOM 元素的 Chrome 扩展,通过 Find/Guide/Hide 三种模式让用户可视化地验证、跟随和隐藏网页内容。
前置知识
HTML DOM 与 Set-of-Marks (SoM)
HTML DOM(Document Object Model)是浏览器把网页解析成一棵由节点组成的树,每个节点对应一个段落、按钮、链接等可见或可交互元素。Set-of-Marks(标记集合)是给这棵树里每一个「可见、承载文本或可交互」的节点分配一个独一无二的整数索引 i,形成一个结构化的元素清单 $\mathcal{D}=\{(id_j, text_j, tag_j, bbox_j)\}_{j=1}^{m}$,相当于把页面「打格子编号」,让 LLM 可以用编号来引用具体元素,而不是直接吐一坨原始 HTML。
PageGuide 的核心机制(高亮证据、指引按钮、隐藏元素)全部依赖把页面元素离散化成可寻址的索引号,再由 LLM 通过 prompt 返回这些编号。理解 SoM 才能看懂 Find 的 [N:"text"] 内联引用、Guide 的目标索引以及 Hide 的元素评分是怎么工作的。
Mixed-Initiative Copilot(混合主动协作)
混合主动交互是一种人机协作模式:AI 提议动作或信息,但每一步都让用户确认、修改或否决,用户始终保留最终控制权;与之相对的是 fully-autonomous agent(完全自主代理),它替用户执行完所有步骤再返回结果。PageGuide 在 Guide 模式里典型地实现了这一范式:LLM 生成「点击 Settings 标签 → 点 Collaborators → 输入密码」的一串动作,但每一步都要用户点 Next 才推进,点 Stop 就终止。
论文的核心论点就是:现有 Operator、Browser Use、ChatGPT Atlas 等工具过度自动化,导致用户盲信不可验证的输出;理解 mixed-initiative 才能把握 PageGuide 把「自主性」换「可验证性」这一设计取舍的本质。
Grounded Reasoning(基于证据的推理)
Grounded reasoning 指模型在给出结论时,把推理链条中的每一步都锚定到具体的输入片段(比如一个段落、一个表格、一段代码),让外部读者可以追溯「为什么这么答」。HoT(Highlighted Chain-of-Thought)就在 CoT 的中间步骤里嵌入类似 [N:"text"] 的证据标签,但标签只出现在模型的文本输出里,网页本身并不变。PageGuide 的关键差异是把同样的思路搬到了 DOM 层:在网页上直接高亮对应元素。
理解 grounded reasoning 这一脉络(包括 HoT、ScreenAI、WebQuest 等工作)以及它们「证据只出现在文本里」的局限,才能看懂 PageGuide 真正的新意:把 evidence 从 sidebar 答案搬到 live DOM overlay。
Manifest v3 Chrome 扩展与 Content Script
Manifest v3 是 Chrome 浏览器扩展的当前标准架构,它通过 content script 把一段 JavaScript 注入到用户访问的每个网页里,从而获得对该页面 DOM 的读写权限;扩展本身还可以调用外部 LLM API(如 OpenRouter),并通过 side panel API 弹出侧边栏 UI。PageGuide 正是以此方式把 LLM 实时接入页面 DOM、读写节点、加 overlay、跳 viewport。
PageGuide 的「在网页上直接高亮、隐藏、跳转」能力不是浏览器原生功能,而是扩展通过 content script 操纵 DOM 实现的;理解 manifest v3 才能明白它是怎么做到读 SoM、改 display:none、加动画 overlay、滚 viewport 的。
研究动机
现有 Web Agent(Operator、Browser Use、ChatGPT Atlas、Claude in Chrome、Gemini in Chrome、Dia Browser 等)虽然能自动读网页、点击、输入并返回答案,但它们的设计哲学是「端到端自动化」——把任务做完再把结果丢给用户,从不暴露推理依据在网页本身上。论文 Figure 1a 给出了三个具体的失败场景:在 Amazon 河 Wikipedia 页面上 ChatGPT Atlas 答对了源头河流,却不告诉用户哪段文字是证据;在 TradingView 上它解释了如何移动价格刻度,但不指出右上角的 Settings 图标在哪;在 Threads 上 Gemini Agent 无法真正「隐藏」Ronaldo 的负面评论。这些问题的根源是同一个:用户被迫盲信 agent 的中间步骤,一旦答案错了或者页面非常长(论文提到 62.8% 的网民把信息检索列为上网的首要目的),用户必须自己滚动整页去找证据。论文还引用 DECEPTICON、Agent-SafetyBench、SafeArena 等近期工作指出:在高风险场景下这些 agent 经常误删数据、误下单、被伪装成「Download」的恶意按钮诱导。
本文的目标是PageGuide 想做一个「不替用户做主、但让用户做事更轻松」的浏览器扩展,把 LLM 的输出(答案、步骤、隐藏决定)通过 visual overlay 直接锚定到 HTML DOM 的具体元素上,从而让用户能够在原网页上一眼看到证据在哪、点哪个按钮、隐藏哪个区块,最终实现三类用户需求的统一支持:(1) Find——找到并高亮答案证据,让用户原地即时验证;(2) Guide——一步一步指引多步任务,每步用户主动确认;(3) Hide——按自然语言意图隐藏干扰元素,每个被隐藏的元素都附带一句解释。
与已有工作不同的是,论文通过两个正交的设计维度(autonomy 与 output grounding)把现有工具定位到「高自主、低 grounding」的象限,PageGuide 显式选择了「低自主(即用户驱动每步)、高 grounding(答案/步骤/隐藏决定都锚到具体 DOM 节点)」的镜像象限。和 HoT、ScreenAI、WebQuest 等 grounded reasoning 工作相比,这些方法只在 LLM 的文本输出里加 [N:"text"] 标签,但网页本身纹丝不动,用户还是得自己翻页找证据;PageGuide 的差异是把 evidence 从 sidebar 搬到 live DOM overlay——把 grounding 从「文本特性」升级成「交互层」。和 Adblock、Purpose Mode、Task Mode 等内容过滤工具相比,那些工具靠固定 CSS 规则或 URL 匹配,无法理解「隐藏所有政治倾向的帖子」这种自然语言意图,也不能给出 per-element 的隐藏理由;PageGuide 用 LLM 解读意图并对每个候选 DOM 元素打分 + 解释,把「透明 + 可逆 + 意图驱动」补上。
核心方法
PageGuide 是一个 Manifest v3 Chrome 扩展,通过 content script 注入到所有网页,获得 HTML DOM 的实时读写权限。整体架构是一条三阶段流水线:(1) 把页面元素用 Set-of-Marks 风格离散化成有编号的清单 $\mathcal{D}=\{(id_j, text_j, tag_j, bbox_j)\}_{j=1}^{m}$;(2) 一个意图路由器(Router)把用户的自然语言查询分类成 Find/Guide/Hide 之一;(3) 对应的 handler 再次读取 $\mathcal{D}$ 并调用 LLM(默认 Gemini-3-Flash,通过 OpenRouter 调用),让 LLM 返回带元素编号的结构化输出,最后由扩展直接 mutate DOM(高亮 span、加 overlay、跳 viewport、应用 display:none)。和 Operator 这类全自动 agent 不同,PageGuide 强调 mixed-initiative:Guide 模式每一步都要用户点 Next 才推进,Hide 模式在隐藏前要弹出 review 对话框让用户取消勾选。换句话说,DOM mutation 始终在用户监督下执行,扩展是「copilot」而不是「autopilot」。
PageGuide 的核心创新可以浓缩成一句话:把 grounded reasoning 从 LLM 的文本输出层搬到浏览器 DOM 层。与 HoT(Highlighted Chain-of-Thought)相比,HoT 在模型回答里插入 [N:"text"] 证据标签,但网页本身不变;PageGuide 解析同样的标签后,会真的去 DOM 里找到第 N 个节点,把对应 text span 包上颜色编码的动画 overlay,并把视口滚到那里——证据不再是「模型说它在 42 号元素」,而是用户肉眼可见的高亮块。三种模式共用这个机制但落地方式不同:Find 把答案文本里每个事实点都贴上可点击的 [N:"text"] 内联引用;Guide 把当前步骤的目标按钮在页面上做脉冲 beacon 动画,并在 tooltip 里给出下一步预告;Hide 把每个被隐藏的元素附一句理由悬浮在原位。这本质上把「理解 vs. 执行」之间的黑箱打开,让用户无需离开当前页面就能 inspect、override 或 undo 任何 AI 决定。
方法步骤详情
完整流程可以拆为五个具体步骤。第一步,DOM 序列化:扩展 content script 遍历当前文档,把每个 visible、text-bearing、interactive 的节点赋予唯一整数 id,存进结构化索引 $\mathcal{D}=\{(id_j, text_j, tag_j, bbox_j)\}_{j=1}^{m}$,bbox 是屏幕坐标,方便后续做 overlay。第二步,路由:用户输入查询 $q$ 后,Router 用一段结构化 prompt(含 find/guide/hide/image_find/pdf_find 五个 handler 定义和例子)让 LLM 返回 $\text{mode}=f_{\text{router}}(q, C)$,其中 $C$ 是 page title 和 content type 等简略上下文;在 1,208 条标注查询上 Router 整体准确率 97.68%,find 类 97.4%、guide 类 100%、hide 类 97.2%(详见 Table 1)。第三步,分派处理:Find 是 single-pass,给 LLM 传入 $\mathcal{D}$ 和查询,让它输出形如「The movie was directed by [45:"Nolan"]...」的答案,每个 [N:"text"] 引用都对应 SoM 编号 N 和精确短语 text;Guide 是 iterative,LLM 一次只生成一个动作 $\{instruction, target\_index, action\_type, hint\}$,用户点 Next 后扩展重新读 DOM 再生成下一步;Hide 也是 single-pass,LLM 返回最多 15 个匹配元素,每个元素带 reason 和 snippet。第四步,DOM mutation:扩展解析 LLM 输出的编号,把 Find 的引用 span 用 luminance-aware 配色包成动画 overlay 并把视口滚到第一个引用;Guide 把目标元素加脉冲 beacon、显示 tooltip;Hide 在确认前弹出 review 对话框,每行带序号、隐藏理由、内容片段和 jump-to 按钮。第五步,错误恢复与状态机:Guide 在每次确认后重读 DOM,如果点击后页面状态和预期不符就重新规划剩余步骤;所有跨组件交互用 Playwright + GitHub Actions 做端到端 CI。
技术新颖性
从技术新颖性上看,PageGuide 的核心贡献是把「grounded reasoning」做成了浏览器扩展里的一个可触摸的 UI 层,而不再停留在论文层面。具体新颖点包括:(1) SoM 风格的 DOM 索引被复用为统一的「寻址协议」,让 router、Find、Guide、Hide 共享同一份页面表征而不必各自重新解析 HTML;(2) Find 模式的 [N:"text"] 内联引用实现了「答案文本可点击、点击跳转到高亮 span」的双向链接,与 HoT 相比它不只是文本证据标签,而是真正可交互的 DOM overlay;(3) Guide 模式采用 mixed-initiative 单步确认协议(Next/Stop),并把「下一步会发生什么」做成 hint tooltip,让用户在点击前能预期结果,避免传统 agent 的「黑箱操作」;(4) Hide 模式把 LLM 当成「DOM 元素打分器」,配合 confirm-before-hide 的 review 对话框和每元素一句解释,把内容隐藏从「opaque background process」变成「transparent user-steered interaction」;(5) 系统在 N=94 的 within-subject 用户研究中,三个模式都跑出了统计显著的提升,特别是 Hide 模式准确率从 30% 跃升到 56%(+26 pp,相对提升 86.7%)、任务时间从 104s 降到 31.7s(-70%),这一类端到端的可用性证据在 Web Agent 文献里相当少见。
实验结果
实验分两部分:自动评测(Tables 1–5,appendix D)和用户研究(Figures 5–10,N=94,within-subject,counterbalanced,6 tasks per participant,max 3 min/task)。Router 在 1,208 条查询上整体准确率 97.68%(Table 1),find/guide/hide 三类分别为 97.4%/100%/97.2%,错误集中在 find→guide 混淆(如「find me a...」)。Find 自动评测(Table 2 & Table 3):在 Natural Questions 上 Gemini-3-Flash 相比 Gemini-2.5-Flash 召回 +9.08、答案正确率 +12.91、Precision 略低 1.26;在 QASPER 学术 PDF 上 Answer F1 提升 +5.90、Evidence F1 略降 -5.26,平均综合分 +0.32。Guide 在 Online-Mind2Web(Table 4)上的平均任务成功率 35.17%,比 SeeAct 基线的 30.00% 高 +5.17,Easy split 60.76% vs 51.80%、Hard split 18.18% vs 9.50%。Hide 在自建 312 样本集(Table 5)上 Precision 45.98 / Recall 59.36 / F1 47.42,相比 2.5-Flash 召回提升 +12.52、F1 +5.86。用户研究核心结果(Figure 5):Find 准确率 81% → 86%(+5 pp,t=-1, p=0.32,未达显著因为天花板效应)、Guide 完成率 23% → 53%(+30 pp,t=-5.1, p<10⁻⁸)、Hide 准确率 30% → 56%(+26 pp,t=-4.4, p<10⁻⁵)。任务完成时间(Figure 6,仅含正确完成样本):Find 中位数 65.2s → 52.8s(-19%,p=0.024)、Hide 104s → 31.7s(-70%,p<10⁻¹³)、Guide 95.8s → 66.7s(-30%,p<10⁻⁴)。行为信号(Figure 7 & 8):Ctrl+F 调用次数从 0.26 降到 0.05(-80%)、文本选区 0.18 → 0.08(-55%)、鼠标点击 8.22 → 4.78(-42%)、滚动 ~13 → 5(-60%)、鼠标移动 6968px → 5490px(-21%),Find 和 Hide 一致下降,而 Guide 模式因为引导跨页跳转导致 page visits +35%、鼠标距离也上升——这是设计预期的副作用。主观问卷(Figure 9):Find/Hide 在「ease of use」上都达到 89–91% 同意,Hide 的「without it hard」达 72%,是所有模式里最强信号。任务完成自报(Figure 10):Hide 完成率从 28% 跃升到 83%,Guide 在 extension 下 partial completion 占比上升——说明 extension 主要是让用户「更愿意继续做下去」而非保证完成。
查看结构化数据
| 任务 | 指标 | 本文 | 基线 | 提升 |
|---|---|---|---|---|
| 意图路由(3 类,1,208 queries) | Overall accuracy | 97.68% | 无基线(Router 单独评测) | find 97.4% / guide 100% / hide 97.2% |
| Find on Natural Questions | Recall | 83.17 | 74.09(Gemini-2.5-Flash) | +9.08 |
| Find on Natural Questions | Answer Correctness | 91.40 | 78.49 | +12.91 |
| Find on QASPER(学术 PDF QA) | Answer F1 | 39.72 | 33.82(Gemini-2.5-Flash) | +5.90 |
| Guide on Online-Mind2Web | 平均任务成功率 | 35.17% | 30.00%(SeeAct) | +5.17 |
| Guide Hard split | 任务成功率 | 18.18% | 9.50%(SeeAct) | +8.68 |
| Hide 自建 312 样本 | Recall | 59.36 | 46.84(Gemini-2.5-Flash) | +12.52 |
| Hide 自建 312 样本 | F1 | 47.42 | 41.56 | +5.86 |
| 用户研究 Find 准确率 | 正确任务比例 | 86% | 81%(裸浏览器) | +5 pp(不显著,p=0.32) |
| 用户研究 Guide 完成率 | 达到目标状态比例 | 53% | 23%(裸浏览器) | +30 pp(p<10⁻⁸) |
| 用户研究 Hide 准确率 | 正确识别隐藏目标比例 | 56% | 30%(裸浏览器) | +26 pp(+86.7% 相对,p<10⁻⁵) |
| 用户研究 Find 完成时间 | 中位数秒 | 52.8s | 65.2s | -19%(p=0.024) |
| 用户研究 Hide 完成时间 | 中位数秒 | 31.7s | 104s | -70%(p<10⁻¹³) |
| 用户研究 Ctrl+F 使用 | 每任务调用次数 | 0.05 | 0.26 | -80% |
局限与改进
作者在 Section 5 明确列出了四个局限性。(1) Single-mode dispatch 限制:当前 Router 把每条 query 派给唯一的 handler,无法处理像「先找到设置页,然后引导我改密码」这种复合任务,需要多步 planner 把查询拆成 Find→Guide 序列。(2) Find 高亮不能跨页持久化:当前实现只在单页内高亮 cited spans,在内容密集页面上会一次性显示很多高亮让人眼花;用户跨页跳转后必须重发 query,无法累积一个跨页 evidence trail。(3) Guide 的逐步确认机制对老用户是 overhead:作者承认每步点 Next 增加了交互成本,未来想做「自适应步长」把显而易见的动作合并、或加入 skip/undo。(4) Hide 没有跨 session 记忆:用户每次都得重新描述想隐藏什么,未来想做持久化用户偏好 profile。我自己的观察还包括:(5) 所有评估都基于 Gemini-3-Flash/2.5-Flash,没有 cross-LLM 鲁棒性测试,换成开源模型(如 Qwen-VL、Llama-3)效果会怎样未知;(6) N=94 的用户全部是学生志愿者且无报酬,可能偏向年轻、数字素养较高的群体,结论对中老年用户的代表性存疑;(7) 数据集偏小(Find 仅 10 条、Guide 138 条选 7、Hide 108 条选 10),自动评测结果的统计意义有限;(8) Hide 的 56% 准确率虽然相对提升 86.7%,但绝对值仍只有一半多一点,意味着近一半目标元素仍会被漏掉或误伤。
独立分析的弱点
独立审视后可以挑出几个值得改进的弱点。第一,自动评测数据集明显偏小且对模型有依赖性。Find 整个测试只有 10 条用户研究题目 + Natural Questions + QASPER 两个老 benchmark,没有任何针对「网页环境」的专项评估;Hide 的 312 条自建样本来自 100 个网站,但 67 条 easy 占了 65%,难度分布不均。改进方向是引入更大、更现代的网页 QA benchmark(如 WebArena、WebVoyager 的真实网站实例)和 Hide 专用的 content-filtering 评测集。第二,Hide 的 LLM 评分逻辑是 prompt-based black-box,缺少对「漏掉元素」和「误伤元素」的细粒度归因分析。从 Table 5 看 Recall 59.36 仍偏低,意味着近一半本该隐藏的广告/推广没被识别,改进方向可以是先用 embedding 检索候选元素,再用 LLM 重排序,而不是单次直接生成。第三,Guide 的 Next/Stop 协议虽然符合 mixed-initiative 原则,但缺乏「undo last step」机制——一旦用户点错下一步就卡住只能从 Stop 重来。改进方向是引入 session-level 状态机和可撤销栈。第四,SoM 序列化只考虑 visible + text-bearing + interactive 节点,对 iframe 内部、shadow DOM、CSS pseudo-element(如 ::before 文本)覆盖不全,导致部分关键按钮可能没被索引。改进方向是支持 iframe traversal 和 shadow DOM piercing。第五,论文未量化 LLM 调用成本与延迟——一次 Find 调用可能引发多次 OpenRouter 调用(router + find + 可能的 fallback),在低端网络或高负载下用户体验会显著下降,建议增加端侧缓存或对常见 query 做 template-based fast path。
未来方向
作者在 Section 5 提出的未来工作包括:(1) 用 multi-step planner 替代 single-mode Router,让「Find+Guide」复合任务能在一句话内完成;(2) 给 Find 加 re-ranking 把最相关的高亮排在前面,并持久化跨页 evidence trail;(3) Guide 加自适应步长粒度和 skip/undo;(4) Hide 引入用户偏好历史 profile,跨 session 学习。基于论文成果还可以延伸几个方向:(5) 把 grounded DOM 范式推广到更多内容类型——论文附录 G 已经展示了 PDF reading、Visual Question Answering(上传图片比对网页)、Page-Off(不绑定当前 tab 的 free-form question)三个扩展功能,未来可以再加 voice/AR 模态;(6) 把「用户每步确认」的协议推广到 autonomous agent 安全研究,用 PageGuide 的 overlay + confirm-before-hide 作为 agent 行为审计的可视化层,对应 DECEPTICON、Agent-SafetyBench 等论文关心的高风险操作;(7) 在企业 SaaS(Notion、Salesforce、Workday)里部署 PageGuide,把「跨应用文档查找」任务变成统一 DOM-grounded 检索;(8) 研究 LLM 在不同 page layout(dynamic SPA、virtual scroll list、infinite feed)下的 SoM 稳定性,这是当前评估里完全没覆盖的场景;(9) 把用户研究扩展到更异质的群体(年龄、职业、阅读能力)以验证外部效度。
复现评估
复现性整体较好但仍有几个门槛。第一,开源情况:论文宣称「Code and demo is at: PageGuide.github.io」(论文摘要末尾),但论文正文未给出 GitHub URL,且根据上下文(IRB 通过、Manifest v3 Chrome 扩展、Playwright + GitHub Actions CI)应该会开源扩展源码、Prompt 模板和评估脚本,但目前需要到作者主页确认是否真的 release。第二,数据:Find 子集 10 条基于 Google Natural Questions + 自加 5 条,Guide 子集 138 条覆盖 37 个网站(来自 Wikipedia 最常访问列表),Hide 子集 108 条来自 100 个多样网站(社交、论坛、电商、内容平台)——这些数据集在论文中没有完整放出,需要联系作者获取;附录 F 描述了三条数据生成 pipeline 的步骤(collect → filter → annotate → validate),复现路径清晰。第三,模型:默认用 OpenRouter 调用 google/gemini-3-flash-preview 和 google/gemini-2.5-flash-preview(见 Appendix E),这两个模型都是 preview 版本,不保证长期可用,建议复现时锁定 snapshot 或改用 stable 版本。第四,算力:用户研究本身是 94 人 × 6 任务 × 3 分钟 ≈ 28 小时的人工实验,需要实验室、IRB 批准和招募渠道,自动化复现只需 GPU 推理 LLM 的算力(Gemini-3-Flash 通过 API 调用,本地无 GPU 要求)。第五,难度:扩展本身的端到端测试用 Playwright 跑,开发者需要熟悉 Manifest v3、content script 注入、side panel API,门槛中等;Prompt 模板在 Figures 13–16 全部公开,可以直接 copy-paste 调试。
论文图表
(a) 展示了三个现有 web agent 的失败场景:ChatGPT Atlas 在 Wikipedia 上答对 Amazon 河源头但不指证据;ChatGPT Atlas 在 TradingView 解释移动价格刻度但不点 Settings 图标;Gemini Agent 在 Threads 上无法真正隐藏 Ronaldo 负面评论。(b) 在 Amazon 河 Wikipedia 页面上,用户在 PageGuide 侧边栏提问「Which stream emerges from Nevado Mismi...」,系统返回带 [1]/[2]/[3]/[4]/[5]/[6] 内联引用的完整答案,每个引用点击后会在页面相应位置高亮 Nevado Mismi、Quebrada Carhuasanta、Quebrada Apacheta、Río Lloqueta、Río Hornillos、Río Apurímac 共 6 处文本。
这张图是论文的「motivation 一图胜千言」——它同时展示了问题(agent 输出不可验证、不可定位、不可隐藏)和 PageGuide 的解法(证据直接锚定到 DOM 高亮),是理解全文核心论点最快的入口。
五行表:Model × Precision/Recall/F1/Ans.Correctness。Gemini-2.5-Flash:65.23/74.09/66.01/78.49;Gemini-3-Flash:63.97/83.17/68.66/91.40;Δ:-1.26/+9.08/+2.65/+12.91。说明 3-Flash 召回更高、答案更完整,但 Precision 略低(更激进地高亮)。
这是 Find 模式 backbone 选择的实验依据——3-Flash 在 NQ 上 Recall +9.08、答案正确率 +12.91,是论文默认用 3-Flash 的主要原因。