★ FEATURED ARTICLE 1. 这个项目到底在解决什么痛点第一次看到让 AI 直接用你已经登录好的浏览器这个描述时我的反应是终于有人把这件事做对了。做过 AI Agent 自动化的人都知道浏览器自动化最烦人的从来不是写代码而是登录态。你写一个脚本去抓某个后台的数据代码逻辑十分钟就写完了结果卡在登录页面上耗了一整天——验证码、短信验证、扫码登录、设备指纹随便一个都能让脚本原地趴窝。传统的解法无非几种要么用 Selenium 或 Playwright 启动一个全新的浏览器实例然后想办法把 cookie 塞进去要么用无头浏览器配合账号密码硬登但很多站点会检测无头特征直接拒绝要么干脆手动导出 cookie 再注入但 cookie 有有效期过期了又得重来。这些方案我都试过说实话没有一个省心的。尤其是那些带二次验证的企业系统你根本没法用脚本完成登录流程。腾讯开源的 BrowserSkill 这个项目思路完全不一样。它不去模拟登录而是直接接管你已经登录好的那个浏览器。你平时用的 Chrome该登的账号都登着该有的 cookie 都在BrowserSkill 通过某种方式让 AI 能够操作这个已经处于登录状态的浏览器实例。这就绕开了整个登录环节——因为登录这件事你早就用人手完成了。这个思路的价值在于它把人负责登录、AI 负责操作这个分工明确化了。登录这种需要人机交互、涉及安全验证的环节交给人而重复性的点击、填表、抓取、导航交给 AI。对于做 RPA、数据采集、自动化测试、AI Agent 开发的人来说这几乎是把最大的一个障碍给搬走了。适合读这篇内容的人正在做浏览器自动化的开发者、想给 AI Agent 加上网页操作能力的产品经理、被登录态问题折磨过的测试工程师以及所有对AI 操作浏览器这个方向感兴趣的技术人。下面我会从原理、部署、实操、踩坑几个维度把这个项目拆开讲清楚。2. BrowserSkill 接管已登录浏览器的核心机制2.1 为什么不能简单地复制 cookie很多人第一反应是接管已登录浏览器不就是把 cookie 复制出来吗我一开始也这么想但实际做过就知道这条路走不通原因有好几层。第一层是cookie 的绑定问题。现代浏览器的 cookie 往往和设备的指纹、User-Agent、甚至 TLS 指纹绑定。你把 cookie 复制到另一个浏览器实例里服务端一比对发现指纹对不上直接判定为异常登录轻则要求重新验证重则封号。我踩过这个坑某次把 cookie 导到脚本里跑结果账号被风控了三天。第二层是localStorage 和 IndexedDB。现在很多单页应用SPA的登录态根本不在 cookie 里而是存在 localStorage 或者 IndexedDB 中。你光复制 cookie 没用token 在 localStorage 里躺着呢。而 localStorage 是按域名隔离的你没法简单地跨实例搬运。第三层是会话的动态性。有些系统的 token 是滚动刷新的你复制出来的那一刻是有效的但几分钟后就失效了因为原浏览器已经刷新了 token而你手里的还是旧的。BrowserSkill 的做法是不复制而是连接。它通过 Chrome 的远程调试协议CDPChrome DevTools Protocol连接到你已经运行的浏览器实例上。CDP 是 Chrome 官方提供的调试接口你平时按 F12 打开开发者工具用的就是这个协议。BrowserSkill 相当于在外部扮演了一个开发者工具的角色通过 CDP 向浏览器发送指令打开这个页面、点击这个按钮、读取这个元素的内容。2.2 CDP 连接与常规自动化的本质区别这里要讲清楚一个关键区别否则后面实操容易懵。常规的 Playwright/Selenium 自动化是启动一个新的浏览器进程然后通过 WebDriver 协议或者 CDP 控制这个新进程。这个新进程是干净的没有你的登录态没有你的插件没有你的书签。BrowserSkill 走的是连接已有进程的路线。你手动启动 Chrome 的时候加一个--remote-debugging-port参数Chrome 就会在指定端口上开放 CDP 接口。BrowserSkill 连上这个端口就能操作这个浏览器里的一切——包括你已经登录的所有账号。打个比方常规自动化像是你新买了一台电脑什么都要重新配置BrowserSkill 像是你直接坐到自己的电脑前用你平时用的那个浏览器干活。区别就是这么直接。注意用--remote-debugging-port启动的 Chrome会使用一个独立的用户数据目录除非你显式指定。这一点后面部署章节会详细讲是新手最容易翻车的地方。2.3 Skill这个词背后的设计哲学项目叫 BrowserSkill这个Skill不是随便起的。它暗示了这个项目的定位把浏览器操作封装成 AI 可以调用的技能。在 AI Agent 的语境里Skill 通常指的是一种结构化的能力描述——告诉模型你能做这件事需要这些参数会返回这个结果。BrowserSkill 把打开网页点击元素输入文本提取内容这些操作封装成标准化的技能接口AI 模型通过调用这些接口来完成任务。这个设计的好处是解耦。AI 模型不需要知道 CDP 协议怎么用不需要关心元素选择器怎么写它只需要说我要点击登录按钮BrowserSkill 负责把这个意图翻译成具体的 CDP 指令。这种分层让整个系统更容易维护和扩展。从工程角度看这种设计也方便做权限控制。你可以限制 AI 只能操作某些域名或者只能执行某些类型的操作避免它乱点乱删。这在企业场景里很重要——你不会希望 AI 在你登录的银行后台里自由发挥。3. 从零跑通 BrowserSkill 的完整流程3.1 环境准备Chrome 版本与调试端口先把基础环境搭好。BrowserSkill 依赖 CDP而 CDP 的接口在不同 Chrome 版本之间有差异所以版本选择有讲究。我实测下来Chrome 109 及以上版本比较稳。为什么特别提 109因为 109 是最后一个支持 Windows 7 的主流版本很多企业内网机器还停留在 Win7这个版本号在热搜里出现频率很高说明有不少人卡在这个环境上。如果你用的是 Win10/Win11直接上最新稳定版就行。启动带调试端口的 Chrome命令是这样的# Windows C:\Program Files\Google\Chrome\Application\chrome.exe --remote-debugging-port9222 --user-data-dirC:\chrome-debug-profile # macOS /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port9222 --user-data-dir/tmp/chrome-debug-profile # Linux google-chrome --remote-debugging-port9222 --user-data-dir/tmp/chrome-debug-profile这里有个关键点--user-data-dir参数。如果你不指定这个参数Chrome 会用默认的用户数据目录但问题是——如果 Chrome 已经在运行用默认目录你再启动一个带调试端口的实例新实例会直接把参数传给已有实例然后退出调试端口根本没开起来。这是新手最常踩的坑表现为我明明加了参数怎么连不上。指定一个独立的--user-data-dir就能保证启动的是一个全新的、带调试端口的实例。但这个新实例是干净的没有你的登录态。所以你需要在这个新实例里手动登录一次之后这个 profile 目录就保留着登录态了下次启动直接可用。提示把--user-data-dir指向一个固定目录登录一次之后就别删了。这个目录就是你的已登录浏览器的载体。3.2 验证调试端口是否真的开了启动之后别急着写代码先验证端口通不通。浏览器访问http://localhost:9222/json/version如果返回一段 JSON里面有Browser、webSocketDebuggerUrl这些字段说明 CDP 接口正常。如果访问不了按这个顺序排查现象可能原因解决方式连接被拒绝Chrome 没启动成功检查命令行参数拼写看是否有报错返回空端口被占用换一个端口比如 9223能访问但列表为空没有打开的标签页手动打开一个网页再试启动后立刻退出已有实例在用同一 user-data-dir换目录或先关掉所有 Chrome我遇到过一种情况命令行启动 Chrome 后窗口一闪就没了。查了半天发现是--user-data-dir指向的目录被另一个 Chrome 进程占用了。解决办法很简单任务管理器里把所有 chrome.exe 结束掉再重新启动。3.3 安装与初始化 BrowserSkill环境通了之后装 BrowserSkill。具体安装方式取决于你用的语言栈Python 和 Node.js 都有对应的接入方式。核心逻辑是一样的建立到 CDP 端口的 WebSocket 连接然后发送指令。初始化的时候你需要指定 CDP 的地址通常是http://localhost:9222。连接建立后BrowserSkill 会列出当前所有打开的标签页你可以选择操作哪一个也可以新建标签页。这里有个实操心得先手动打开目标网站并登录好再让 BrowserSkill 连接。不要指望 BrowserSkill 帮你完成登录那不是它的强项。它的强项是在已登录状态下做后续操作。把登录这一步留给人整个流程会顺畅很多。3.4 第一个可运行的操作示例假设你要让 AI 打开某个后台页面读取一个数据表格。流程大致是手动启动带调试端口的 Chrome登录目标系统BrowserSkill 连接到该 Chrome发送导航到某 URL的指令发送等待某元素出现的指令发送提取某元素文本的指令拿到数据交给 AI 处理每一步的指令都是标准化的AI 模型只需要决定下一步做什么具体的 CDP 调用由 BrowserSkill 封装。这就是前面说的技能化的价值——把复杂的底层操作变成简单的意图表达。4. 实际使用中最容易翻车的几个地方4.1 元素定位的稳定性问题浏览器自动化最头疼的永远是元素定位。页面上一个按钮你用 class 定位结果前端一改版 class 变了脚本就挂了。用 XPath 定位嵌套层级一深稍微动一下就失效。我的经验是优先用文本内容定位其次用稳定的属性如 id、name、data-* 属性最后才用 class 和 XPath。文本内容虽然也可能变但相对稳定而且更符合人类操作的直觉。BrowserSkill 这类工具通常支持多种定位策略选对策略能省很多维护成本。还有一个技巧加等待但不要用固定 sleep。固定 sleep 要么太短导致元素还没出来要么太长浪费时间。用等待元素出现这种条件等待效率高得多。BrowserSkill 一般会提供这类等待接口。4.2 多标签页和 iframe 的坑现代网页大量使用 iframe而 CDP 操作 iframe 里的元素需要先切换到对应的 frame 上下文。如果你发现元素明明在页面上就是定位不到八成是 iframe 的问题。多标签页也是类似。BrowserSkill 连接的是整个浏览器不是单个标签页。你操作之前要明确指定操作哪个标签页否则可能操作到错误的页面上。我踩过一次坑脚本在 A 标签页操作结果因为焦点在 B 标签页点击事件发到了 B 上数据全乱了。提示每次操作前先确认当前活跃的标签页和 frame 上下文这是写稳定脚本的基本功。4.3 登录态过期与风控触发即使是接管已登录浏览器登录态也可能过期。尤其是那些有会话超时机制的系统你放着不管几个小时token 就失效了。这时候 BrowserSkill 的操作会失败因为页面跳转到了登录页。处理方式有两种一是定期检查当前 URL如果发现跳到了登录页就暂停任务并通知人工处理二是设置合理的任务间隔别让会话闲置太久。风控是另一个隐患。虽然你用的是真实浏览器、真实登录态但如果操作频率过高、行为模式太机械依然可能触发风控。我的建议是给操作加上随机延迟模拟人类的操作节奏。点击之间隔个几百毫秒到一两秒不要像机器一样精确到毫秒。4.4 调试端口的安全边界--remote-debugging-port打开的端口任何能访问这个端口的程序都能控制你的浏览器。这意味着如果你把端口暴露在公网上等于把浏览器控制权交出去了。所以调试端口只监听 localhost不要绑定到 0.0.0.0。默认情况下 Chrome 的调试端口就是只监听本地的但如果你在容器或远程环境里跑要注意网络配置别不小心暴露了。用完记得关掉带调试端口的 Chrome 实例。5. 把 BrowserSkill 接入 AI Agent 的几种思路5.1 工具调用模式让模型决定下一步最直接的接入方式是工具调用Tool Calling。把 BrowserSkill 的每个操作封装成一个工具比如open_url、click_element、extract_text然后把工具列表告诉 AI 模型。模型根据当前任务和页面状态决定调用哪个工具、传什么参数。这种模式适合目标明确但路径不确定的任务。比如帮我在这个后台找到上个月的销售报表并下载具体点哪个菜单、进哪个页面模型可以自己探索。你只需要提供工具不需要写死流程。实现上的关键是给模型足够的页面状态信息。模型看不到页面它只能通过你提供的文本描述来理解当前状态。所以每次操作后要把页面的关键信息标题、可见文本、可交互元素列表反馈给模型它才能做出下一步决策。5.2 固定流程模式把确定性交给代码如果任务流程是固定的比如每天登录后台导出数据那就没必要让模型去探索。直接用代码写死流程BrowserSkill 只负责执行。模型在这里的作用是处理异常——比如某个元素没找到让模型看看页面截图判断是页面改版了还是加载慢了。这种模式更稳定、更可控适合生产环境。我的建议是能用固定流程解决的就别上模型。模型的不确定性在自动化场景里往往是负担不是优势。5.3 混合模式固定骨架 模型兜底实际项目里我用得最多的是混合模式。主流程用代码写死保证稳定性在几个容易出问题的环节比如元素定位、页面判断留出模型介入的接口出问题时让模型来决策。举个例子脚本要点击导出按钮正常情况用选择器直接点。如果选择器失效了就把页面截图发给模型让模型告诉你导出按钮在页面右上角文字是导出报表。然后脚本根据模型的描述重新定位。这样既保证了正常情况下的效率又有了异常情况下的鲁棒性。5.4 和 Vue 项目里的地图类组件配合的场景热搜里出现了用在 vue 里的腾讯地图这类词说明有不少人在做前端项目时遇到类似需求。如果你的 Vue 项目里嵌了地图组件想让 AI 操作地图比如搜索地点、切换图层BrowserSkill 同样适用。地图组件本质也是 DOM 元素加 Canvas 渲染DOM 部分可以直接操作Canvas 部分可能需要模拟鼠标事件。这类场景的难点在于地图的交互是连续的——拖拽、缩放这些操作不是单次点击能完成的。你需要模拟鼠标按下、移动、抬起的完整序列。BrowserSkill 如果支持底层鼠标事件就能处理这类需求。6. 这套方案适合和不适合的场景6.1 强烈推荐的场景企业内部系统的自动化。这类系统通常登录复杂可能有二次验证但登录后操作相对固定。用 BrowserSkill 接管已登录浏览器能省掉最麻烦的登录环节。我见过一个财务对账的场景人工每天要花两小时在三个系统之间倒数据用这套方案后压缩到十分钟。需要保持登录态的长期任务。比如监控某个后台的数据变化或者定时抓取需要登录才能看的内容。传统方案要反复处理登录BrowserSkill 一次登录长期使用。AI Agent 的网页操作能力补充。如果你在做一个能帮用户处理网页任务的 AgentBrowserSkill 提供了一套现成的浏览器操作接口不用自己从零封装 CDP。6.2 需要谨慎的场景高并发的采集任务。BrowserSkill 连接的是单个浏览器实例并发能力有限。如果你要同时操作几十个页面这套方案不合适还是得用无头浏览器集群。对稳定性要求极高的生产系统。接管已登录浏览器意味着依赖人工登录这一步如果登录态失效而没人处理任务就断了。关键业务要有监控和告警机制。涉及敏感操作的场景。让 AI 操作你登录的银行、支付类系统风险很高。即使有权限控制也建议加人工确认环节别让 AI 全自动执行。6.3 和其他方案的对比方案登录态处理稳定性并发能力适用场景BrowserSkill 接管已登录浏览器人工登录天然保持中高低内部系统、长期任务Playwright 启动新实例脚本模拟登录中高公开网站、测试无头浏览器 cookie 注入手动维护 cookie低高简单采集纯 API 调用无需浏览器高高有开放接口的系统这张表的核心结论是没有银弹选方案要看场景。BrowserSkill 的独特价值在于已登录这三个字凡是登录态是核心痛点的场景它就值得考虑。7. 一些实操中攒下来的经验先说一个反直觉的结论别追求全自动。我早期做自动化总想着一步到位从登录到操作全让脚本干。结果就是登录环节三天两头出问题整个流程跟着崩。后来改成人工登录 自动操作稳定性直接上了一个台阶。BrowserSkill 的设计哲学其实就是在鼓励这种分工顺着它的思路走别跟它较劲。第二个经验是给 AI 的操作加上确认环节。尤其是涉及提交、删除、支付这类不可逆操作时让 AI 先描述它打算做什么人工确认后再执行。这不是不信任 AI而是工程上的风险控制。我在一个项目里加了这个环节成功拦下过一次 AI 误点批量删除的事故。第三个经验关于日志。BrowserSkill 的每次操作都要记日志什么时间、操作了哪个页面、点了什么元素、结果如何。出问题时这些日志是唯一的线索。我习惯把页面截图也存下来配合日志一起看排查效率高很多。第四个经验是版本锁定。Chrome 自动更新有时候会改变 CDP 的行为导致原本正常的脚本突然失效。生产环境里我会锁定 Chrome 版本更新前先在测试环境验证。这个习惯帮我避免了好几次半夜被叫起来处理故障。最后说一个关于用户数据目录管理的小技巧。给每个自动化任务分配独立的--user-data-dir任务之间互不干扰。目录命名带上任务标识和日期方便清理。定期备份重要的 profile 目录万一登录态丢了还能恢复。这些细节看起来琐碎但真正跑起来之后它们决定了你的方案是能长期稳定运行还是三天两头需要人工救火。
阅读完成 · 觉得有帮助？
