Browsing All You Need

浏览：所有你需要的

浏览器自动化实用指南 克劳德代码 --让Claude导航、检查网页和桌面应用程序并与之交互的4层方法。

问题

Claude Code有权访问 四种不同的浏览器自动化工具，每个都有不同的优势和局限性。没有一个工具可以处理每种情况。真正的技能是知道 *哪个* 使用 *当* --以及它们是如何组合在一起的。

4层堆栈

⚠️ 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欢迎。