浏览器自动化工具

Claude Code提供的四层浏览器自动化工具,帮助用户导航、检查和交互网页及桌面应用。

  • by gene-jelly
  • 本地部署
  • 3 星标
  • 更新于
在 GitHub 查看 gene-jelly/browsing-all-you-need

使用说明

浏览:所有你需要的

浏览器自动化实用指南 克劳德代码 --让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服务器——只需安装扩展程序,它就会自动连接。

文档

Claude代码技能(便携式)

把这些放进去 ~/.claude/skills/ 有关上下文感知浏览器自动化指南:

这是给谁的

  • Claude Code用户 谁想要自动化浏览器工作流程
  • 团队 为基于网络的任务(费用报告、表单填写、数据输入)设置克劳德代码
  • 开发者 构建人工智能辅助的浏览器自动化管道

先决条件

  • 克劳德代码 已安装并配置
  • Node.js 18+(适用于npx)
  • 谷歌Chrome浏览器(用于基于扩展程序的工具)

相关项目

这是Claude Code高级用户模块化工具包的一部分:

Repo 它涵盖了什么
浏览你需要的一切 浏览器自动化(您在这里)
所有你需要的凭证 机密和凭证管理
印迹 持久内存基础架构

许可证

此存储库中的原始内容已获得许可 麻省理工学院.

本指南引用了具有自己许可证的第三方工具——请参阅 属性.md.

贡献

找到我们错过的怪癖了吗?有新浏览器模式的解决方法吗?PR欢迎。