浏览器扩展开发方案讨论

[Facefall]

本次讨论聚焦在 MineContext 对 浏览器上下文 信息提取处理的开发方向.

问题

MineContext 当前阶段对于浏览器的信息处理主要是基于 screenshot 截屏采集 + vlm 视觉模型分析识别.

这种方式通用，但存在明显弊端:

1. 信息密度低且噪音大：截图包含大量冗余 UI 元素、无关内容例如网页 footer, sidebar 广告等无关内容, 这些内容不需要捕获, 但截屏分析不会考虑这样. 即增加了存储成本, 也增加了模型理解成本, 加大非必要的 token 消耗.

2. 上下文理解依赖强视觉模型：准确提取文本、理解结构（如表格、列表）成本高, 尤其是在某些特定 case , 截屏会非常大. 例如当表格或者文档在页面展示很长, 或者无线下拉滚动加载新内容时, 屏幕截图会非常大. 参考 case 1 和 case 2 截屏 pdf

case1-news.pdf
case2-bilibili.pdf

3. 目前 MineContext 暂时无法对浏览器进行深度交互: 仅能"看", 不能"操作".

扩展优化: AI 浏览器自动化工具

说到 AI 浏览器自动化工具, 最著名的就是 browser-use.

如果后期我们需要浏览器操作功能，现在集成 AI 浏览器自动化 相关的 SDK 可能就是一个很好的契机.

如果基于 browser-use/stagehand/Midscene.js 来获取 dom 信息,好处有:

1. 精准数据采集：可直接获取网页的纯净HTML、结构化数据（JSON-LD）、文本内容, (与截图 + vlm 模型识别 方案对比, 优势: 数据精确+低成本)
2. 准确理解页面结构与语义：通过DOM树，能天然理解元素的层次、角色（按钮、输入框）和交互逻辑。
3. 实现主动服务闭环：不仅能“记录”你看了什么，未来还能“替你做”。例如，记录到你反复查看某航班比价页面，未来可授权它自动执行比价查询并推送结果，实现真正的“伙伴”级主动服务。

---

浏览器插件提取 dom 结构流程如下:

flowchart TD
    A[“用户浏览网页”] --> B{“触发检查”}
    
    B --> C[“定时轮询<br>（低频兜底，仅活动页）”]
    B --> D[“事件驱动<br>（主触发）”]
    
    D --> E[“标签页更新完成<br>tabs.onUpdated”]
    D --> F[“切换到标签页<br>tabs.onActivated”]
    D --> G[“SPA路由变化<br>webNavigation”]
    
    C & E & F & G --> H{“规则匹配判断”}
    
    H --> I[“是否匹配黑名单？”]
    I -- 是 --> J[“忽略，结束流程”]
    
    I -- 否 --> K[“是否匹配白名单/通配符？”]
    K -- 否 --> J
    
    K -- 是 --> L[“计算当前页面<br>内容哈希指纹”]
    
    L --> M{“指纹是否<br>与历史记录相同？”}
    M -- 是 --> N[“内容未更新，结束流程”]
    M -- 否 --> O[“执行DOM提取<br>与处理”]
    
    O --> P[“存储提取结果<br>并更新内容指纹”]

Loading

提取的 DOM 信息通过 zod 规范 JSON 结构定义.

这里以browser-use为例, 使用 case:

import { BrowserUseClient } from "browser-use-sdk";
import { z } from "zod";
 
const client = new BrowserUseClient();
 
const TaskOutput = z.object({
posts: z.array(
z.object({
title: z.string(),
url: z.string(),
}),
),
});
 
const task = await client.tasks.createTask({
task: "Search for the top 10 Hacker News posts and return the title and url.",
schema: TaskOutput,
});

鉴于作为浏览器插件而言, 网络环境并不总是那么可靠, 考虑将提取的数据存储到 IndexedDB, 并定时将 JSON(DOM Context) transform to JSONL, 并通过 mcp 通信 (类似upload_jsonl) 同步数据给后端, 复用后端提供的 StructuredFileChunker 进行 process.