Claude Code与Browserbase协同：技能、安装、使用及故障排除全揭秘

Browserbase技能

这是一组可让Claude Code通过浏览器自动化和官方的bb CLI与Browserbase协同工作的技能。此插件包含以下技能（详情见 `skills/` 目录）：

• `browser`：通过CLI命令实现网页浏览器交互自动化，支持具备反机器人隐身功能、验证码破解和住宅代理的远程Browserbase会话。
• `browserbase-cli`：使用Browserbase的官方bb CLI进行函数和平台API工作流操作，涵盖会话、项目、上下文、扩展、抓取和仪表盘功能。可使用bb CLI将无服务器浏览器自动化部署到Browserbase云。
• `site-debugger`：诊断并修复失败的浏览器自动化问题，分析机器人检测、选择器、时间安排、认证和验证码，然后生成经过测试的网站操作手册。
• `browser-trace`：在任何浏览器自动化操作的同时，捕获完整的DevTools协议跟踪信息（CDP数据流、截图、DOM转储），然后将数据流按页面分割成可搜索的存储桶。
• `bb-usage`：在终端仪表盘显示Browserbase的使用统计、会话分析和成本预测。
• `cookie-sync`：将本地Chrome的cookie同步到Browserbase持久上下文，以便 `browse` CLI能够访问需要认证的网站。
• `fetch`：在无需浏览器会话的情况下，从静态页面获取HTML或JSON，检查状态码、头部信息，处理重定向。
• `search`：在无需浏览器会话的情况下进行网络搜索，并返回结构化结果（标题、URL、元数据）。
• `ui-test`：由AI驱动的对抗性UI测试，分析git差异以测试更改，或全面探索应用程序以发现漏洞。

安装

要将这些技能安装到常用的编码代理中，可执行以下命令：

$ npx skills add browserbase/skills

在Claude Code上安装

若要添加市场源，只需运行：

/plugin marketplace add browserbase/skills

然后安装插件：

/plugin install browse@browserbase

若更喜欢手动操作界面，可按以下步骤进行：

1. 在Claude Code中输入 `/plugin`。
2. 选择选项3。
3. 添加市场源，输入：`browserbase/skills`。
4. 按回车键选择 `browse` 插件。
5. 再次按回车键进行安装。
6. 重启Claude Code使更改生效。

使用方法

安装完成后，可以让Claude进行浏览操作或使用Browserbase CLI，例如：

• “访问Hacker News，获取热门帖子的评论并进行总结”
• “对 `http://localhost:3000` 进行QA测试，修复遇到的任何漏洞”
• “帮我订一份披萨，你已经在Doordash上登录了”
• “使用 `bb` 列出我的Browserbase项目，并以JSON格式显示输出”
• “使用 `bb functions init` 初始化一个新的Browserbase函数，并解释后续命令”

Claude会处理后续操作。对于本地和localhost工作，`browse env local` 现在默认会启动一个干净的隔离浏览器。当代理需要复用现有的本地Chrome会话、cookie或登录状态时，可使用 `browse env local --auto-connect`。

故障排除

• 未找到Chrome：为平台安装Chrome：
  • macOS或Windows：[https://www.google.com/chrome/](https://www.google.com/chrome/)
  • Linux：`sudo apt install google-chrome-stable`
• 配置文件刷新：若要从主Chrome配置文件刷新cookie，可执行：`rm -rf .chrome-profile`

参考资源

• Stagehand文档
• Claude Code技能说明