浏览：所有你需要的
浏览器自动化实用指南 克劳德代码 --让Claude导航、检查网页和桌面应用程序并与之交互的4层方法。
问题
Claude Code有权访问 四种不同的浏览器自动化工具，每个都有不同的优势和局限性。没有一个工具可以处理每种情况。真正的技能是知道 *哪个* 使用 *当* --以及它们是如何组合在一起的。
4层堆栈
| 优先级 | 工具 | 最佳选择 | 关键优势 |
|---|---|---|---|
| 1 | 剧作家MCP（扩展） | 经过身份验证的网站、表单、工作流 | 您使用Cookie的真实Chrome会话 |
| 2 | Chrome开发工具MCP | 检查、调试、监控 | 网络请求、控制台、性能⚠️ |
| 3 | Chrome中的克劳德 | SSO登录链，快速交互 | 处理跨源重定向 |
| 4 | 剧作家MCP（无头） | 刮擦、测试、无身份验证站点 | 独立Chromium，无冲突 |
| 奖金 | 电子CDP | 桌面应用程序（Slack、Notion、VS Code） | 桌面应用程序上的Chrome DevTools协议相同 |
⚠️ Chrome开发工具MCP 存在已知问题 macOS Tahoe（26.x）：Chrome 146+在默认配置文件上阻止远程调试端口。看 Chrome DevTools文档 为了解决问题。
快速开始
1.安装MCP服务器
添加到您的Claude Code MCP配置中(~/.claude.json 或项目设置）：
{
"mcpServers": {
"playwright": {
"type": "stdio",
"command": "npx",
"args": ["@playwright/mcp@latest", "--caps", "vision,devtools"]
},
"playwright-ext": {
"type": "stdio",
"command": "npx",
"args": ["@playwright/mcp@latest", "--extension", "--caps", "vision,devtools"]
},
"chrome-devtools": {
"type": "stdio",
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}2.安装Playwright MCP桥延长线
对于 剧作家扩展模式，安装 剧作家MCP桥 Chrome扩展程序。
扩展程序将提示您批准每个连接。要跳过弹出窗口，请参阅 基于令牌的身份验证.
3.Chrome中的克劳德
这 Chrome中的克劳德 扩展内置于Claude代码中。不需要单独的MCP服务器——只需安装扩展程序，它就会自动连接。
文档
- 工具选择指南 --选择正确工具的决策框架
- 剧作家设置 --配置无头模式和扩展模式
- Chrome开发工具MCP --网络、控制台和性能检查
- Chrome中的克劳德 --使用内置的Chrome扩展程序
- 多会话浏览器访问 --使用共享浏览器运行多个Claude会话
- 常见问答和解决方法 --来之不易的现实问题解决方案
- 电子应用自动化 --通过CDP自动化Slack、Notion和其他桌面Electron应用程序
- 安全注意事项 --保护凭据并避免端点警报
Claude代码技能（便携式）
把这些放进去 ~/.claude/skills/ 有关上下文感知浏览器自动化指南：
skills/browser-automation.md--掌握刀具选择技巧skills/playwright-quirks.md--UI模式解决方法
这是给谁的
- Claude Code用户 谁想要自动化浏览器工作流程
- 团队 为基于网络的任务（费用报告、表单填写、数据输入）设置克劳德代码
- 开发者 构建人工智能辅助的浏览器自动化管道
先决条件
- 克劳德代码 已安装并配置
- 18+（适用于npx）
- 谷歌Chrome浏览器（用于基于扩展程序的工具）
相关项目
这是Claude Code高级用户模块化工具包的一部分：
许可证
此存储库中的原始内容已获得许可 麻省理工学院.
本指南引用了具有自己许可证的第三方工具——请参阅 属性.md.
贡献
找到我们错过的怪癖了吗？有新浏览器模式的解决方法吗？PR欢迎。