你有没有这种感觉：让 AI 操作浏览器，每次调用都像在烧钱？
这还真不是错觉。
你打开一个普通网页，内置的浏览器工具会给你返回一个巨大的“可访问性树”──密密麻麻的节点、层级、坐标，读起来像是在读一篇中篇小说。然后 AI 需要在这堆信息里找到“登录按钮”，再告诉你“点击第37个元素”。
一个简单操作，消耗几千甚至上万 Token。一天跑下来，账单让人倒吸一口凉气。
browser-js 这个 Skill，就是来解决这个问题的。
重新思考“如何让 AI 操作浏览器”
大多数 AI 浏览器工具的思路是：把整个页面结构翻译成 AI 能理解的形式。
这没问题，但太贵了。
browser-js 换了一个思路：只给 AI 需要的那一点点信息。
它通过 Chrome DevTools Protocol（CDP）直接和浏览器对话，执行完命令后返回给你的，是一个极度精简的编号列表：
[0] (link) Hacker News → https://news.ycombinator.com/news
[1] (link) new → https://news.ycombinator.com/newest
[2] (input:text) q
[3] (button) Submit
就这么多。
然后你告诉 AI：“click 3” 或者 “type 2 什么是 AI”，它直接干活。
没有 Accessibility Tree，没有海量文本解析，没有上下文爆炸。 就是这么简单。
Token 节省：不是优化，是数量级差距
| 方案 |
每次交互 Token 消耗 |
10步流程总消耗 |
| 内置浏览器工具 |
2,000-5,000 |
20,000-50,000 |
| 内置浏览器+思考模式 |
3,000-8,000 |
30,000-80,000 |
| browser-js |
50-200 |
500-2,000 |
3-10倍的节省不是小优化，是量级上的碾压。
一个需要50步操作的复杂浏览器自动化流程，用传统方案可能烧掉几十万 Token，用 browser-js 几千个 Token 搞定。钱是真金白银，差距是实打实的。
Shadow DOM？它穿得过去
这是另一个让大多数浏览器自动化工具翻车的场景。
现代网站大量使用 Web Components，组件内部是一个独立的 Shadow DOM──外部的工具根本看不到里面有什么。
Reddit 的评论折叠按钮、GitHub 的下拉菜单、很多管理后台的组件……都在 Shadow DOM 里藏着。
传统的 Playwright/Selenium + AI 方案遇到这些就跪了。
browser-js 的 elements 命令会递归穿透所有 Shadow Root，把里面每一个可交互元素都找出来编号。该点哪个就点哪个，不需要任何特殊处理。
文件上传，不用弹对话框
普通浏览器自动化工具想做文件上传，得先想办法触发 OS 文件选择对话框，然后让 AI 去操作那个系统弹窗。
browser-js 换了个底层方式：直接用 CDP 的 DOM.setFileInputFiles 把文件路径注入到 <input type="file"> 元素里。
没有对话框，没有等待，没有 OS 层面的干扰。
bjs upload ~/docs/resume.pdf # 自动找到上传按钮
bjs upload ~/photos/avatar.png "input.drop" # 指定目标元素
Instagram 发图、Twitter 上传媒体、任何需要传文件的地方，都能这么玩。
跨域 iframe 的最后一公里
有些东西不在主 DOM 里──验证码的勾选框、第三方支付表单、OAuth 授权弹窗，这些都嵌在跨域 iframe 里，普通 DOM 查询根本摸不进去。
browser-js 提供了坐标级别的精确控制：
# 先拿到 iframe 的位置
bjs iframe-rect 'iframe[title*="验证码"]'
# 输出: x=95 y=440 w=302 h=76 center=(246, 478)
# 然后用坐标点击
bjs click-xy 125 458
还有 hover-xy（悬停菜单）、drag-xy（拖拽滑动条）、click-xy --double（双击）、click-xy --right（右键菜单）──绕过 DOM 层，直接在浏览器坐标系统里操作。
真实鼠标事件，不被框架忽略
这里有个很细节但很关键的技术点：
大多数自动化工具点击按钮，用的是 JavaScript 的 .click()。
但 React、Vue、Angular 这些现代框架不傻──它们绑定的不是原生 click 事件，而是合成的 Synthetic Event。.click() 根本触发不了。
browser-js 用的是 CDP 的 Input.dispatchMouseEvent，发送真实的 mousePressed + mouseReleased 序列。框架的合成事件处理器会被正常触发。
GitHub 的按钮能点、Instagram 的点赞能触发、LinkedIn 的动态能加载──真实交互，不假打。
用起来有多简单？
bjs open https://example.com # 打开网页
bjs elements # 看看页面上有啥
bjs click 5 # 点击第5个元素
bjs type 12 "hello world" # 给输入框打字
bjs text # 读取页面文字
bjs screenshot /tmp/result.png # 截图存档
会 Bash 就能上手。没有复杂配置，没有漫长的学习曲线。
这不是优化，是范式转移
browser-js 背后的思路其实很朴素：
与其让 AI 学会理解一整棵树，不如让树变成一张编号列表。
正是这种极简的交互模式，让 AI Agent 的决策效率迎来了质的飞跃。由此带来的影响是深远的：
- Token 消耗从天文数字降到零头
- 操作速度大幅提升
- AI 的决策空间从“在一堆噪音里找信号”变成“看编号点菜”
- Shadow DOM、跨域 iframe、React 合成事件……这些曾经的技术壁垒，现在都是默认支持
AI 和浏览器交互这件事，被重新定义了。
在 云栈社区，你可以找到更多这样的实用技能，与众多开发者一起探索浏览器自动化与 AI 落地的更多可能。
安装方式：
skillhub install browser-js
前提：需要 Chrome/Chromium 浏览器运行在 --remote-debugging-port 模式。OpenClaw 的内置浏览器直接支持，无需额外配置。
发表于 3 小时前
|
查看: 5|
回复: 0
