大模型操控浏览器的正确打开方式
你是不是遇到过这些问题：
- Playwright 的 screenshot + GPT-4V 看图识别，根本不知道哪个按钮能点、哪个 input 输什么
- OpenAI Operator 截图驱动，慢、贵、不稳定，验证码卡死
- Selenium 写死 xpath，换一个页面就崩溃
- 自家的 AI Agent 不知道页面上有 toast 错误弹窗、红色必填星号、字数限制，操作用户永远看不到的盲区
这都不是大模型的问题——是大模型根本没看见真实页面。
AI Browser：给 Agent 一双能读 DOM 的眼睛
我们做的是一个 Electron 浏览器。不是给人类用的——是给 AI Agent 用的。
核心区别：AI Browser 不截图。它直接把整个 DOM 树结构化成语义树，推给 Agent。
Agent 看到的不再是一张图片，而是：
"标题输入框，placeholder=请输入文章标题（5～100个字），value=空"
"摘要 textarea，字数限制=0/256"
"发布按钮，disabled=false"
"红色星号 文章标签*"
"弹窗模态框：博主不存在"
这就是一个人类能看到的信息。Agent 也能看到。
跟现有方案对比：碾压级优势
| 能力 | Playwright + 截图 | OpenAI Operator | AI Browser |
|---|---|---|---|
| 理解页面结构 | 看图猜 | 看图猜 | 直接读 DOM 语义树 100+节点 |
| 看到 toast 错误 | 截图时可能已消失 | 截图时可能已消失 | 实时 push message_appeared 事件 |
| 看到红色必填星号 | 能（如果截图清楚） | 能 | 精准检测 CSS ::before 伪元素 + 文本标记 |
| 看到字数限制 0/256 | 能（如果截图截到） | 能 | 自动提取文字模式，Agent 全天候知道 |
| 识别 Draft.js/CKEditor | 不能 | 不能 | editor_type=draft/ckeditor，内置 execCommand insertText |
| 监听网络 API 响应 | 不能 | 不能 | CDP Network.enable，推 403/404/500 |
| 输入到 Vue/React input | Type 事件可能不触发 | 不稳定 | 原生 value setter + input+change 事件 |
| iframe 内编辑器识别 | 截图看不到 iframe 里 | 看不到 | 递归进入 same-origin iframe，提取 body text |
| 登录态持久化 | 要每次登 | 要每次登 | Electron persist partition，重启保留 |
| 速度 | 慢（每步截图+OCR） | 慢 | 快（直接 IPC DOM tree，几十ms） |
| 价格 | GPT-4V 每步都扣视觉 token | 贵 | 纯文本 token，无视觉开销 |
技术验证：在真实网站跑通的完整流程
我们在以下平台验证了端到端发布流程：
- CSDN— Vue textarea 标题 + CKEditor iframe 正文 + 标签 + 摘要 + 字数限制 还需输入5个字 提示消失确认 ✅
- 知乎— Draft.js 编辑器，execCommand insertText 逐段插入，发布设置/预览/发布按钮全识别 ✅
全程通过 WebSocket JSON-RPC API 驱动。Agent 需要的不是屏-幕-截-图，它需要的是看到「这个按钮 disabled 是 false」「这个输入框 value 是空」「当前页面有一个弹窗写着博主不存在」。
开源，极简
GitHub：https://github.com/Glittering/ai-browser
一个 Electron 进程 + 一个 WebSocket 端口 + 一个 preload bridge.js。没有复杂的微服务、没有 K8s、没有截图管道。
54 个测试全绿。
Agent 只要连上 ws://localhost:9223，就能理解任何网页、操作任何表单、看到任何弹窗。
现在开始
git clone https://github.com/Glittering/ai-browser.git cd ai-browser npm install npm start # 然后用你自己训练的 Agent 连 ws://localhost:9223让 Agent 真正看见网页。这才是 AI 操控浏览器正确的姿态。
