给浏览器装了个「AI 操作员」：纯聊天帮你完成任何任务
不用云端浏览器，不用 Selenium/Playwright，不用背 XPath。 一个 Chrome 扩展，带着你真实的登录态，在你自己的浏览器里完成任务。
项目地址（顺手点个 Star ⭐）：github.com/btcSteven/b...
它能干什么
装上扩展、配好一个支持函数调用的模型，在侧边栏说一句目标：
- 「订一张武汉到北京的机票」------自己拆步骤、选城市、选日期、点搜索、进订单页
- 「把这个商品在三个平台上的价格对比一下」------自己开标签页、逐个查看、汇总结果
- 「把这页 50 条数据整理出来」「总结一下这篇长文」
- 复杂表单填写、抢票、秒杀下单、信息采集......
它不是问答机器人，是一个任务 Agent。你只发布目标，剩下的它自己来：观察页面 → 拆解任务 → 动手操作 → 再观察 → 继续操作，直到任务完成，或者明确告诉你「卡在哪了、需要你做什么」。
整个过程在侧边栏里可见，橙色光标会在页面上真实移动，你随时能点「终止」。
3 分钟跑起来（只用侧边栏，零进程）
bash
git clone https://github.com/btcSteven/browser-use-agent
cd browser-use
npm install- 打开
chrome://extensions，开启右上角「开发者模式」 - 「加载已解压的扩展程序」→ 选择仓库里的
extension/目录 - 把扩展钉到工具栏，点图标打开侧边栏
- 在侧边栏齿轮里填好模型接口地址、API Key、模型名称，确认
模型不挑厂商：任何兼容 OpenAI 协议、支持函数调用的接口都行 ，本地 Ollama（http://127.0.0.1:11434/v1）也可以。
然后打开你要操作的网页，在侧边栏输入目标即可。不用启动任何本地服务。
补充一句：如果你在用 Cursor、Claude Code 这类外部 Agent，项目还附带了一个可选的 MCP 本机桥（
npm start），让它们也能调用同一套浏览器能力。不用也完全不影响侧边栏的功能，核心能力 100% 在扩展里。
核心原理：扫描页面 → 元素树 → 编号 → 动手
AI 操控浏览器最大的难题是模型「看不见」网页。截图猜坐标又慢又贵、分辨率一变就点偏。这个项目的做法是把页面翻译成模型能读懂的「元素清单」，五步形成闭环：
text
┌─────────┐ ① 扫描 DOM ┌──────────────┐
│ 当前网页 │ ─────────────► │ content.js │
└─────────┘ │ 构建结构化快照 │
▲ └──────┬───────┘
│ │ ② 元素编号 e1...en
│ ▼
│ ┌──────────────┐
│ ④ 执行动作│ 大模型 │ ③ 读树拆任务
│ 点击/悬停/输入/滚动│ │ 下发指令
│ └──────────────┘
└────────── ⑤ 动作后重新扫描，循环直到 finish① 扫描页面，把 DOM 变成对象树
内容脚本（content.js）用 30 多种选择器捞出所有可交互元素（链接、按钮、输入框、各类 ARIA 角色），剔除不可见的；React/Vue 自研组件没有语义标签，就再靠 cursor: pointer 兜底识别。同时提取标题和 H1~H3，让模型知道自己在什么页面。
② 给每个元素编号 e1、e2 ...... en
元素被序列化成结构化文本快照，每个元素拿到一个 ref 编号，标签按 aria-label → placeholder → 可见文本的优先级提取：
text
Page: 机票预订
URL: https://xxx.com/flights
Interactive elements (use ref ids to click/type):
[e1] <input type=text> "出发城市"
[e2] <input type=text> "到达城市"
[e3] <input type=text> "日期"
[e4] <button> "搜索" (submit)
[e5] <a> "特价机票" → /deals
...跨域 iframe 里的元素编号加前缀（如 f123_e4），执行时自动路由回对应 frame，模型用起来和普通元素没区别。
③ 模型读树、拆任务、下指令
模型读的是文本而不是像素：对照目标找到元素编号，直接输出动作序列------填 e1、填 e2、点 e3、点 e4。提示词还规定：后续控件已在快照里就批量发出 ，筛选没填完不许点结果，完成必须主动 finish，所以它不磨叽、不反复确认。
④ 真正动手：点击、悬停、输入、滚动
扩展靠「编号 → DOM 元素」映射表找到目标，执行五类操作。其中点击最关键：合成的 element.click() 是 isTrusted=false，携程这类网站直接无视，所以用 chrome.debugger 下发真实鼠标事件序列，和真人点击无异，失败再自动降级：
javascript
await chrome.debugger.sendCommand(target, 'Input.dispatchMouseEvent', { type: 'mouseMoved', x, y });
await chrome.debugger.sendCommand(target, 'Input.dispatchMouseEvent', press);
await chrome.debugger.sendCommand(target, 'Input.dispatchMouseEvent', { ...press, type: 'mouseReleased' });其余四类各管一件事：hover 触发悬停菜单；输入 走原生 value setter 再派发 input/change 事件（React/Vue 受控组件才能正确识别），支持回车提交；按键 支持 Enter、Esc、Control+a 等组合键；滚动返回滚动位置和页高，模型据此判断是否到底。操作全程有一只橙色光标在页面上移动，你能随时旁观和终止。
⑤ 动作后立刻重新扫描
点击、输入、滚动后自动附带一份最新快照，下一步拿到的编号永远有效，省掉一轮「先看再点」；发生跳转或新开标签会自动跟过去再扫。如此循环到 finish（done / blocked / ask 三种状态，中文告知结果或卡点）。
另外两个小细节：结果列表页几百张重复卡片会自动瘦身，只留表单和前几条结果并提示「直接点第一条」；编号每次快照重生成，旧快照立即作废，防止拿着过期编号乱点。
长任务为什么跑不爆：一套上下文治理
订票是几十步的长任务，每页快照几千 token，朴素实现三轮就把上下文塞满了。侧边栏（panel.js）里为此做了四层治理：
- 动作自带新鲜快照，省掉「先看再点」的往返；
- 旧快照即时折叠，只保留最新一份页面数据；
- 页面跳转即压缩：检测到真实导航后，把之前的操作历史压成一条简短的「动作日志」------保留「做过什么」，扔掉已经失效的死页面；
- 滑窗兜底 ：真超预算时，先裁剪冗长的旧工具结果、丢弃旧截图，再按「步骤组」淘汰最老的历史，但永远保留你最初发布的那条任务。
模型不挑，标签页不乱动
- 推理模型（DeepSeek-R1、Qwen3 等）的思考链会被自动分离，既不会回你一条空白消息，也不会把大段思考再烧回上下文；
- 万一模型把工具调用写成了文本（服务端解析器不匹配），客户端还能从
<tool_call>、name({...})、裸 JSON 等多种格式里自动恢复成真正的指令； - 任务开始时当前标签会被锁定，放进一个橙色「执行中」标签组；模型要去别的网站永远新开标签，你最初的页面不会被覆盖、不会被关闭（关闭原始标签的操作会被直接拒绝）。
最后：它真的很轻
整个项目纯 JavaScript，零构建步骤 ，npm 依赖只有 3 个，核心代码 2000 多行。想二次开发？改完在 chrome://extensions 点一下重新加载即可，没有打包、没有编译、没有黑盒。
它在 Ember Browser Agent（MIT）基础上二次开发，针对真实订票、表单场景做了大量打磨：真实点击、新标签跟随、动作批处理、列表页瘦身......commit 记录里全是被真实网站「毒打」出来的修复。
如果你想给自己的重复性网页工作流找个「自动驾驶」，或者想学习一个能在真实网站上跑通的浏览器 Agent 是怎么设计的，欢迎 Star、Fork、提 Issue：
GitHub 地址：github.com/btcSteven/b...
装好扩展，配好模型，打开一个网页，对它说一句你一直想自动化的事。剩下的，让它自己扫描、自己点。