BrowserSkill VOM视觉观察模型解析从页面构建语义图的完整流程【免费下载链接】BrowserSkillLet AI agents use your real, logged-in browser without interrupting your work. CLI extension for browser automation across any shell-capable AI agent.项目地址: https://gitcode.com/GitHub_Trending/br/BrowserSkillBrowserSkill 是一个让 AI Agent 直接使用你真实、已登录的浏览器进行网页自动化的开源项目由 CLI 与浏览器扩展组成。其中的VOMVisual Observation Model视觉观察模型负责把复杂网页构建成一张带坐标与语义的语义图让 AI 无需截图就能看懂页面并精准操作任意元素。一、VOM 是什么让 AI看懂页面的观察模型对 AI 来说原始网页是天书DOM 树里混杂着大量无语义的空壳标签而浏览器无障碍树AX又缺少精确的坐标与样式信息。VOM 的思路是把两者融合再叠加几何事实位置、尺寸、绘制顺序、指针事件最终投影成一个扁平的 VomScene 场景每个节点都带role角色、name名称、rect视口坐标、paintOrder绘制顺序、pointerEvents、sensitive是否敏感等字段见 VomNode 定义渲染后是一行行带**短引用ref**的文本AI 只需引用[e3]这样的编号即可点击对应元素引用与真实 DOM 的映射由 VomRef 保存ref → backendNodeId frameId。整个场景由一条流水线构建统一入口是 buildSemanticVomScene它串联了「构建 → 解析 → 规范化 → 投影」四步。二、从快照到语义图完整流程六步走 总览帧图/快照采集 → 稀疏数据解码 → 语义图构建 → 角色与名称解析 → 结构规范化 → 投影渲染。1️⃣ 采集一张快照拿到 DOM、布局与表单事实captureObservationFacts 是整个观察流程的起点先取 CDP帧图Frame Graph把页面拆成若干 frameiframe 各自独立按目标target分组并行采集固定 4 个 worker 的线程池 控制并发避免压垮浏览器支持两种快照档位BASIC_SNAPSHOT仅基础样式与VISUAL_SNAPSHOT额外采集 transform、overflow、clip-path 等 18 种视觉样式定义在 snapshot.ts全程可被AbortSignal中断并用 document-identity.ts 校验文档没在采集中途发生跳转。2️⃣ 解码把 Chrome 的稀疏数组还原成节点Chrome 的 DOMSnapshot 返回的是稀疏数组只有index → value的映射decodeDocument 将其还原为节点列表标签、属性、布局 bounds、绘制顺序、表单值等。两个值得注意的细节每 256 个节点插入一次可中断检查点大页面解码不会卡死密码框的值直接丢弃只保留空/已填写状态isSensitiveFormControl从源头保护隐私。3️⃣ 构建语义图AX 与 DOM 按 backendNodeId 融合这是 VOM 最核心的一步实现在 buildSemanticGraph每个 frame 的 DOM 节点与 AX 节点分别入图节点 ID 形如[frameId, dom, backendNodeId]或[frameId, ax, axNodeId]AX 节点若带有backendDOMNodeId就直接挂载到对应 DOM 节点上见 融合逻辑——同一个按钮因此同时拥有语义角色和精确坐标补全父子关系domParentId/axParentId并把被排除节点如扩展自身的悬浮层连同其子树一并排除排除传播防止 AI 误点 UI 浮层。4️⃣ 解析角色、名称从哪里来resolve.ts 决定每个节点是什么、叫什么角色优先级AX 角色 DOM 显式role属性 原生标签推断nativeRole 映射表button→button、select→combobox、input[typerange]→slider…敏感输入类型password、credit-card、one-time-code被单独标记SENSITIVE_INPUT_TYPES渲染时可脱敏为掩码名称缺失时name-enrichment.ts 用邻近文本等证据补全避免 AI 面对一堆按钮 [e12]无法分辨。5️⃣ 规范化与投影剪枝、编号、输出场景结构规范化给每个节点一个 StructureDecision保留有语义、视为透明包装、推断分组或剔除冗余/不可见projectSemanticGraph 只保留与根 frame 连通的 iframe为节点重新编号1、2、3…输出扁平的VomScene——这是喂给渲染器前的最后形态。6️⃣ 渲染生成带引用的观察文本renderVom 把场景渲染成VomResult { text, refs, truncated }跳过无语义角色、按 遮挡层检测modal/mask标注被弹窗挡住的元素、支持redactValues表单脱敏。AI 最终看到的就是button 登录 [e3] · textbox 邮箱 [e7] · link 找回密码 [e11]再配合--hover等参数capture.ts 会真实触发悬浮探测严格限制 6 次触发、2.6 秒总预算见 预算常量把悬停才出现的菜单也一并写入surfaces。视觉类内容Canvas、图片区域则由 visual-discovery.ts 与 visual-dedup.ts 发现并去重。三、核心模块路径速查阶段模块采集协调capture-coordinator.ts快照解码snapshot.ts语义图构建semantic-graph/build.ts角色/名称解析semantic-graph/resolve.ts结构规范化semantic-graph/structure.ts场景投影semantic-graph/project.ts渲染输出packages/vom/src/render.ts悬浮探测capture.ts官方文档可参考 docs/architecture.md。四、给新手的 4 点设计启示 backendNodeId 是万能胶水DOM、AX、截图坐标全部通过它对齐跨数据源融合只需一把钥匙双源互补语义靠 AX几何靠 DOM 快照谁缺位另一方兜底处处设预算4 个 worker、6 次悬浮触发、2.6 秒探测上限——观察不能比被观察的网页还卡隐私内建密码值在解码阶段就丢弃敏感字段标记后渲染时脱敏安全不靠事后过滤。理解了这条从原始网页 → 语义图 → 可引用文本的流水线你就掌握了 BrowserSkill 让 AI 稳定操作真实浏览器的关键所在。【免费下载链接】BrowserSkillLet AI agents use your real, logged-in browser without interrupting your work. CLI extension for browser automation across any shell-capable AI agent.项目地址: https://gitcode.com/GitHub_Trending/br/BrowserSkill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考