AI接管浏览器:Claude Code+Chrome MCP自动化完全指南

每天重复登录网站、手动收集数据、整理报表?这些琐碎操作正在消耗你宝贵的创造力。

现在,通过Claude Code与Chrome MCP的结合,将会在一定程度上解决你的困境,你的浏览器将获得一位24小时在线的智能助手。

想象一下:喝着咖啡时,运营数据已自动生成报告;专注创作时,竞品动态正被实时监控。

今天带着大家,从安装 Chrome MCP 插件,mcp server,再到将其接入claude code,完成一个实战案例,让大家看到一个24小时在线智能助手的完整搭建过程。

一、安装 Claude Code

可以参考上一篇文章,安装 Cluade Code,并配置好国内大模型,无需任何门槛,这里不再赘述,教程地址:看这一篇就够了!Claude Code 接入四大国产编程模型 DeepSeek、GLM、Qwen、Kimi 全指南

二、安装Chrome MCP

Chrome MCP Server 是一款基于 Chrome 插件的模型上下文协议 (MCP) 服务器,它将 Chrome 浏览器的功能无缝暴露给 Claude 等 AI 助手,实现复杂的浏览器自动化、深度内容分析和智能语义搜索。

与传统浏览器自动化工具(如 Playwright)有本质区别,Chrome MCP Server 直接利用我们日常使用的 Chrome 浏览器,完整保留我们的用户习惯、个性化配置及登录状态,使各类大语言模型或聊天机器人能够真正接管您的浏览器,成为日常工作中得心应手的智能助手。

其核心使命是:将 Chrome 浏览器转变为智能助手------通过 AI 接管浏览器操作,将其升级为功能强大的 AI 控制自动化工具,支持跨标签页上下文理解、内置向量数据库、截图功能、网络监控、交互操作、书签管理及浏览历史记录等 20 余种实用工具,且全部在本地运行,显著提升您的工作效率。

github地址:github.com/hangwin/mcp...

一)从 github 上下载 mcp-chrome 的浏览器插件

下载地址:github.com/hangwin/mcp...

下载完以后,解压

二)安装插件

  • 打开 Chrome 并访问 chrome://extensions/,并打开右上角的 开发者模式

  • 启用 "开发者模式"

  • 点击 "加载已解压的扩展程序",选择你下载插件的位置

  • 点击右上角扩展程序并置顶插件

  • 点击插件图标打开插件,发现服务未连接

是因为mcp-chrome服务其实比并未启动,需要安装该服务,接着往下看!

三)安装 mcp-chrome-bridge

安装指令:

复制代码
npm install -g mcp-chrome-bridge

mcp-chrome-bridge 相当于是充当了claude code 和 插件之间的桥梁,安装以后,和上一步安装的chrome插件打通,这样就可以让AI操作安装了插件的浏览器了

服务安装完成后,回到浏览器点开置顶的插件图标,并点击连接 ,就可以连接到 MCP Server了。

插件界面上还把MCP Server的服务配置信息都准备好了,你只需要点击复制配置 即可把该MCP Server添加到任何支持MCP的客户端,比如 Cursor,cherry studio, LM studio等支持MCP的客户端,甚至Dify,n8n 都可以。

今天我们主要演示 把该MCP接入Claude Code来帮我们完成日常工作中的自动化任务。请继续往下看

三、在Claude Code 中添加MCP服务

为什么要选择Claude Code 呢?

因为他是命令行工具,我们可以直接通过输入 claude 的指令执行任务,这就意味着,可以通过定时任务自动化了,我们不需要天天手动启动任务了。

一)将MCP Server添加到claude code

我们需要先把MCP添加进Claude Code,这样才能让AI帮我们控制浏览器。

首先,命令行终端输入 claude ,然后,输入/quit 退出

这样,在我们系统的用户home下就会自动生成一个 .claude.json 的隐藏文件,打开后可以看到claude的配置信息都在这里

然后,我们在命令行输入一下指令添加我们的能操作浏览器的MCP Server:

csharp 复制代码
claude mcp add --transport http mcp-chrome http://127.0.0.1:12306/mcp --scope user

当然,添加MCP server的方式很多,具体可以参考官方文档:

docs.anthropic.com/en/docs/cla...

输入:claude mcp list 看下已经添加的mcp 服务列表:

进入用户目录下,找到 .claude.json 看下添加的mcp server:

二)进入Claude Code使用MCP Server

首先,命令行输入 claude 进入后,输入 /mcp 查看服务列表:

两次回车后,可以看到mcp 的 tools 列表:

mcp-chrome 提供了丰富的工具供我们完成日常绝大多数场景下的自动化:

可以再按两次esc 键回退到命令行输入界面

四、测试场景

一)分析知乎博主账号信息

复制代码
帮我收集一下知乎博主的账号粉丝数,文章发布数量等账号信息,然后生成一份该博主的账号分析报告,博主名称是:阿坡RPA

二)分析结果

这个 MCP server通过执行不同的tools完成了搜索,点击,找到了博主账号的信息,并根据采集到的数据形成了账号分析报告

五、如何定时自动化完成任务?

如上,如果仅仅只是通过claude交互界面,手动发出指令,完成任务,这不叫自动化,真正的自动化要完全解放我们的双手,现在还剩最后一公里,那就是:让机器替我们给AI发出指令。

一)命令行执行测试

claude code 允许我们通过命令的的形式,在不进入他的交互界面与AI交互,下面还是以上面的测试例子,来通过命令行指令让 claude code 执行任务:

css 复制代码
claude --dangerously-skip-permissions -p 帮我收集一下"阿坡RPA"这个知乎博主的账号粉丝数,文章发布数量等账号信息,然后生成一份该博主的账号分析报告,并把这份报告保存到 D:\wample\coding\me\mcp-chrome 目录下

注意:--dangerously-skip-permissions 参数是允许 claude code 跳过所有权限检查 -p 后面要跟上你自己的提示词,需要先在claude code 里面调试好,确保运行没问题,再通过 -p 参数执行命令

命令行测试一下执行效果:

二)执行终端命令结果

三)打开八爪鱼RPA

测试命令没问题后,接下来通过八爪鱼RPA,创建一个RPA应用,通过dos指令,填入以上指令,让RPA帮我们执行这个指令

三)设置定时任务触发器

用定时触发器执行这个流程,这样就完成了完全自动化的闭环,不用每天手动执行指令了,每天指定时间自动触发执行任务

到这里,最后一公里完成~

六、结语

通过本教程,你已成功将Chrome MCP与Claude Code结合,打造出强大的浏览器自动化系统。这不仅实现了从手动操作到智能自动化的升级,更带来了工作效率的质的飞跃。

现在你可以轻松实现竞品监控、数据收集、内容分析等场景的自动化处理。通过命令行接口和定时任务,真正实现24小时无人值守运营。

立即动手尝试,让AI成为你的智能助手,开启智能浏览新时代!关注我(vx:ao-ai-coding)获取更多自动化实战技巧。

相关推荐
用户5191495848454 小时前
突破矩形边界:探索PWA窗口控件叠加技术
人工智能·aigc
aneasystone本尊4 小时前
GraphRAG 索引构建之知识提取(二)
人工智能
PAQQ4 小时前
使用node-red+opencv+mqtt实现相机图像云端查看
人工智能·opencv·计算机视觉
zzywxc7875 小时前
如何利用AI IDE快速构建一个简易留言板系统
开发语言·前端·javascript·ide·vue.js·人工智能·前端框架
是乐谷5 小时前
Python图片转WebP常用库推荐:Pillow、Wand、cv2
大数据·运维·开发语言·人工智能·python·开源·pillow
机器之心5 小时前
混乱、内耗、丑闻:Meta考虑向Google、OpenAI低头
人工智能·openai
葫三生5 小时前
三生原理的“阴阳元”能否构造新的代数结构?
前端·人工智能·算法·机器学习·数学建模
人工智能训练师5 小时前
部署在windows的docker中的dify知识库存储位置
linux·运维·人工智能·windows·docker·容器
AI 嗯啦6 小时前
深度学习----卷积神经网络实现数字识别
人工智能·深度学习·cnn