惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

The GitHub Blog
The GitHub Blog
IT之家
IT之家
B
Blog RSS Feed
罗磊的独立博客
GbyAI
GbyAI
博客园 - Franky
Y
Y Combinator Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Google DeepMind News
Google DeepMind News
博客园 - 聂微东
N
Netflix TechBlog - Medium
博客园 - 三生石上(FineUI控件)
人人都是产品经理
人人都是产品经理
U
Unit 42
博客园 - 叶小钗
Jina AI
Jina AI
MyScale Blog
MyScale Blog
雷峰网
雷峰网
B
Blog
Hugging Face - Blog
Hugging Face - Blog
Blog — PlanetScale
Blog — PlanetScale
Recent Announcements
Recent Announcements
腾讯CDC
酷 壳 – CoolShell
酷 壳 – CoolShell

张洪Heo

OpenClaw 接管你的油猴脚本:让 AI 直接读改网页脚本,不用再复制粘贴 为 iPhone Duo 做设计:苹果官方设计原则全解读 看到了淘宝闪购的AI评论,引发了我的思考 如何在网页插入 livephoto ?实况照片 PVT 在线生成、动态JPG生成工具与嵌入工具 MacBook不进入休眠全新邪修:十几块钱的绿联HDMI欺骗器 OpenClaw 2.0:稳定性提升不少,我还迁移了我的记忆系统 将你的 HeoID 卡片添加到 Apple 钱包 智谱codingplan耐用程度分析:只用 GLM-5.3-Flash 够不够用? 软路由内网穿透访问方案全链路教程:从 ZeroTier 到 Nginx 再到 certd 证书管理 我与我的 OpenClaw 凉透了焦虑和解了 ntfsmac 上手:不关 SIP 让 Mac 读写 NTFS 和 ext 硬盘 个人小项目vibecoding方案推荐:opencode spark 1.2 和 zcode 分享一下博客的全新聚合搜索 给DeepSeek-V4-Flash借一双眼睛:ZCode视觉子Agent方案 Mole Mac 上手:界面精美,优秀好用的Mac清理工具 Agentation 油猴脚本:让AI指哪改哪,配合 Claude Code 的开发神器 洪绘压图网页版上线,这下可以随时随地在线压缩图片了 分享一下我最近制作的一些AI音乐,以及解决唱歌错字和音质的一些小技巧 洪绘敲木鱼支持“竹知了”模式了,可以自定义音效的电子竹知了App 洪绘烧纸:一个网页在线电子烧纸,电子祭祀工具 WebMCP适配教程:为浏览器AI预备好,让网页向 AI 提供工具,本博客已支持 报错回顾:给OpenClaw添加错误行为记忆机制,让自己写的skill不断成长 腾讯miora上手:设计师又又又失业的一集? Mac 合盖不休眠:用 pmset 彻底禁止系统睡眠 如何用 OpenClaw 配置早报晚报,科技新闻信源、微博热搜获取 给 SearXNG 接入豆包搜索,解决 OpenClaw 信源难题 OpenClaw记忆系统升级:从memory-core到memory-lancedb-pro的迁移与配置 screenpipe:开源本地的 AI 记忆引擎,让电脑更懂你 混元hy3模型上手:腾讯送了云函数个人版6个月,怎么才能用上 给OpenClaw加上rm删除保护:防止AI误删你的整个电脑
BrowserSkill上手:让AI接入浏览器,还能录制动作教它学习
张洪Heo · 2026-08-27 · via 张洪Heo

BrowserSkill上手:让AI接入浏览器,还能录制动作教它学习摘要图

这篇文章介绍了如何通过 BrowserSkill 让 AI 连接浏览器,使用 bsk CLI 观察页面并执行点击、输入等操作。重点介绍 动作录制:把网页操作保存为 trace bundle,记录动作链和页面状态,之后交给 AI 参考或复现。文中还说明 Agent Window 的隔离方式,以及验证码、登录、支付等步骤的安全注意事项,也补充了录制时的隐私边界。

我一直觉得,让 AI 只会聊天有点浪费。很多事情明明已经打开网页了,最后一步却还得我自己点:搜索、填写、切换页面、提交。

BrowserSkill 做的事情很直接,让 AI 真正接入浏览器。

它不是给浏览器套一个聊天窗口,而是通过 bsk CLI 和浏览器扩展建立连接,再让 AI 去观察页面、理解页面上的控件,然后执行点击、输入和选择等动作。

BrowserSkill 需要两个东西:一个是安装在电脑上的 bsk 命令行工具,另一个是加载到 Chromium 中的 browser-skill 扩展。扩展连接成功后,浏览器里会显示绿色状态。

浏览器扩展

扩展窗口

AI 发起任务时,BrowserSkill 会打开一个独立的 Agent Window。这个窗口和用户正在使用的浏览器窗口分开,AI 默认只操作自己的标签页。需要操作用户现有页面时,也可以先把指定标签页借用进来,完成后再归还。

这个隔离设计我比较喜欢。AI 要跑网页任务,就让它在自己的窗口里跑,不会突然把我正在看的网页刷新掉。

先观察,再操作

BrowserSkill 的基本工作流是:

1
2
3
4
5
6
bsk session start
bsk observe
bsk snapshot
bsk click / fill / select
bsk observe
bsk session stop

observe 用来获取页面的语义信息,能看到页面文字、按钮、输入框以及可交互控件。snapshot 则是更严格的无障碍树快照,适合在页面结构比较复杂时使用。

AI 先观察页面,再根据按钮名称或输入框的作用执行操作。网页改版后,元素位置可能变了,但只要按钮文字和页面结构没有完全改变,AI 仍然有机会找到正确的目标。

当然,它也不是开了挂。验证码、登录、短信验证和支付确认这类步骤,还是应该停下来交给人处理。任务完成后要及时结束 session,不要让 AI 长时间接管浏览器。

最有意思的功能:录制动作教 AI 学习

BrowserSkill 里我觉得最有意思的是 bsk record

功能按钮

操作录制

有些网页操作很难用语言描述。比如先打开某个后台,进入指定菜单,筛选日期,再点击导出。你可以写一大段说明,但 AI 还是可能漏掉中间某一步。

这时候可以直接录制。

指令可以让ai来操作。你填写完点击复制即可。

操作指令

然后像平时一样操作网页,完成后点击录制面板里的 Finish。BrowserSkill 会生成一个 trace bundle,里面至少包含 trace.json,新版本还会保存 states/ 目录。

trace.json 里有动作链,每一步还会关联操作前后的页面状态。states/ 里保存页面观察结果,所以 AI 看到的不只是“点击了某个按钮”,还知道点击前页面长什么样、点击后页面发生了什么变化。

这就像给 AI 做了一次网页演示。你先做一遍,它再根据记录理解流程,之后尝试复现。

录制适合哪些场景

重复执行的后台操作很适合录制,比如固定流程的数据导出、内容审核、订单查询,或者每周都要做一次的网页整理工作。

录制完成后,可以把 trace 当成任务说明的一部分交给 AI。相比只说“帮我完成这个操作”,它多了真实的页面状态和动作顺序,出错时也更容易定位到底卡在了哪一步。

不过录制时要注意隐私。不要在银行、单点登录、密码管理器等页面录制,也不要把包含敏感信息的 trace 随便发给别人。--redact-values 可以把表单值标记为 [filled][empty],但涉及账号和密码的页面,最好还是直接避开。

我怎么看 BrowserSkill

以前让 AI 操作网页,通常要么依赖复杂的浏览器自动化脚本,要么只能把网页内容读出来,真正点击时还得自己补上。

BrowserSkill 把这件事拆得比较清楚:session 负责生命周期,Agent Window 负责隔离,observe 和 snapshot 负责理解页面,click、fill、select 负责执行动作,record 则负责把人的操作变成 AI 可以参考的流程。

尤其是录制功能,适合那些“我会做,但我懒得写教程”的任务。自己操作一遍,比对着网页截图解释半天省事多了。

如果你平时经常登录后台、查资料、填表格,或者有一堆重复网页流程,BrowserSkill 值得试试。先从一个不涉及隐私的小任务开始,跑通之后再慢慢把常用流程录下来。

头像背景Guli形象

张洪Heo

分享设计与科技生活

本文使用AI辅助创作,采用 CC BY-NC-ND 4.0 协议,转载请注明出处。