Dify本地部署实战：3分钟搭建基于Chrome的网页自动化AI助手

引言

还在为复杂的网页操作而烦恼？想让AI帮你自动填表、截图、抓取数据？今天教你用Dify本地部署Chrome MCP，打造一个强大的网页自动化AI助手！

无需云服务器，本地就能跑，3分钟上手，10分钟精通。从安装到实战，手把手教你搭建属于自己的网页操作机器人。

什么是本地Chrome MCP？

Chrome MCP（Model Context Protocol）是基于Google Chrome浏览器的网页自动化工具MCP实现版本。通过Chrome DevTools Protocol提供精细的浏览器控制能力。与传统云端部署不同，本地部署具有以下优势：

• • 数据安全：所有操作在本地执行，敏感数据不上传
• • 响应速度快：无网络延迟，操作更流畅
• • 成本更低：无需购买云服务器
• • 自由度高：可访问本地文件和内网资源

核心功能：

• • 网页截图和PDF生成
• • 表单自动填写
• • 页面元素点击和交互
• • 数据抓取和提取
• • 文件上传下载

本地环境准备

系统要求

支持的操作系统：

• • Windows 10/11
• • macOS 10.15+
• • Ubuntu 18.04+
• • CentOS 7+

硬件要求：

• • 内存：至少4GB（推荐8GB）
• • 存储：至少2GB可用空间
• • CPU：双核以上

必备软件安装

1. 安装Node.js

# Windows（使用Chocolatey）
choco install nodejs

# macOS（使用Homebrew）
brew install node

# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# CentOS/RHEL
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

2. 验证安装

node --version  # 应显示v18.0.0或更高版本
npm --version   # 应显示npm版本信息

本地部署Chrome MCP

1. 创建项目目录

# 创建项目目录
mkdir chrome-mcp-local
cd chrome-mcp-local

# 初始化npm项目
npm init -y

2. 下载Chrome扩展程序

首先下载Chrome MCP扩展程序：

# 创建扩展程序目录
mkdir chrome-extension
cd chrome-extension

# 下载最新版本的Chrome扩展程序
# 访问 https://github.com/hangwin/mcp-chrome/releases
# 下载最新的扩展程序压缩包并解压到此目录

3. 安装Chrome MCP桥接工具

需全局安装桥接包，推荐使用npm或pnpm：

npm install -g mcp-chrome-bridge
# 或
pnpm install -g mcp-chrome-bridge

安装完成后注册Native Messaging host：

# 注册Native Messaging host
mcp-chrome-bridge register

4. 安装和配置Chrome浏览器

验证Chrome浏览器安装

which google-chrome || which chromium-browser

如果上述命令返回空或提示"not found"，说明Chrome浏览器未安装，请按以下方式安装：

macOS系统：

# 使用Homebrew安装
brew install --cask google-chrome

Ubuntu/Debian系统：

# 下载并安装Chrome
wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list
sudo apt update
sudo apt install google-chrome-stable

CentOS/RHEL系统：

# 添加Chrome仓库并安装
sudo yum install -y wget
wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
sudo yum localinstall google-chrome-stable_current_x86_64.rpm

加载Chrome扩展程序

1. 1. 打开Chrome浏览器，访问 chrome://extensions/
2. 2. 启用"开发者模式"
3. 3. 点击"加载已解压的扩展程序"
4. 4. 选择之前下载并解压的扩展程序文件夹
5. 5. 点击扩展程序图标，然后点击"连接"按钮启动MCP服务

验证Chrome MCP服务

1. 检查服务是否启动

当Chrome扩展程序连接成功后，MCP服务会在本地启动HTTP服务器（默认端口12306）：

curl http://127.0.0.1:12306/mcp
# 如果服务正常，应该返回MCP协议相关信息
# 如果显示"Could not connect to server"，说明Chrome扩展程序未连接

2. 通过API测试MCP工具列表

curl -X POST http://127.0.0.1:12306/mcp \
  -H "Content-Type: application/json" \
  -d '{"method": "tools/list"}'

常见问题排除

如果curl命令返回"Could not connect to server"错误：

1. 1. 检查Chrome扩展程序状态：
   • • 打开Chrome浏览器，访问 chrome://extensions/
   • • 确认Chrome MCP扩展程序已启用
   • • 点击扩展程序图标，查看连接状态
2. 2. 重新连接扩展程序：
   • • 点击扩展程序图标
   • • 如果显示"未连接"，点击"连接"按钮
   • • 等待几秒钟，直到显示"已连接"状态
3. 3. 检查Native Messaging注册：

   # 重新注册Native Messaging host
   mcp-chrome-bridge register
   # 注册后需要重启Chrome浏览器
   

4. 4. 验证端口状态：

   # 检查端口12306是否被占用
   lsof -i :12306
   # 如果没有输出，说明端口未被使用，需要启动扩展程序
   

Dify集成Chrome MCP

注意：如果你的Dify是通过Docker部署的，MCP地址不能填写127.0.0.1或localhost。应填写宿主机的实际IP地址，或使用Docker网络中的可访问地址（如host.docker.internal），否则Dify容器无法访问本地MCP服务。

1. 登录Dify控制台

• • 访问你的Dify实例（本地）
• • 进入「设置」→「工具」

2. 添加Chrome MCP工具

• • 点击「添加工具」
• • 选择「MCP工具」类型
• • 填写配置信息：

{
  "name":"Chrome MCP",
"description":"Chrome浏览器自动化工具，支持网页截图、表单填写、数据抓取等功能",
"connection":{
    "type":"http",
    "url":"http://host.docker.internal:12306/mcp"
},
"timeout":30000
}

3. 测试连接

• • 点击「测试连接」按钮
• • 确认显示"连接成功"状态
• • 保存配置并启用工具

实战案例：自动化网页操作

案例1：网页截图助手

创建应用：

1. 1. 新建「Agent」应用
2. 2. 系统提示词：

你是一个网页截图专家，能够帮用户截取任何网页的截图。
当用户提供网址时，你需要：
1. 访问指定网页
2. 等待页面完全加载
3. 截取全屏截图
4. 返回截图结果

测试对话：

案例2：表单自动填写

应用场景：自动填写注册表单

系统提示词：

你是表单填写助手，能够根据用户提供的信息自动填写网页表单。
操作步骤：
1. 打开指定网页
2. 定位表单字段
3. 填入用户提供的信息
4. 提交表单（需用户确认）

实际操作：

案例3：数据抓取助手

功能描述：抓取电商网站商品信息

系统提示词：

你是数据抓取专家，能够从网页中提取结构化数据。
当用户需要抓取数据时：
1. 访问目标网页
2. 定位数据元素
3. 提取文本内容
4. 整理成结构化格式返回

抓取示例：

用户：帮我抓取京东某商品的价格和评价信息

AI：正在为您抓取商品信息...

商品名称：iPhone 15 Pro Max
当前价格：¥9999
原价：¥10999
折扣：9折
评价数量：2.5万+
好评率：98%

数据抓取完成！

高级配置与优化

Chrome扩展程序设置

1. 扩展程序选项页面配置

• • 右键点击Chrome MCP扩展程序图标
• • 选择"选项"或"扩展程序选项"
• • 可配置以下设置：
  • • HTTP服务器端口（默认12306）
  • • 请求超时时间
  • • 调试模式开关
  • • 允许的域名列表

2. Chrome浏览器优化

# 启动Chrome时的推荐参数
open -a "Google Chrome" --args \
  --remote-debugging-port=9222 \
  --disable-web-security \
  --user-data-dir=/tmp/chrome-debug

性能优化建议

1. 浏览器资源管理

• • 定期清理浏览器缓存和Cookie
• • 关闭不必要的标签页
• • 禁用不需要的Chrome扩展程序

2. 系统资源监控

# 监控Chrome进程资源使用
top -p $(pgrep -f "Google Chrome")

# 查看端口占用情况
lsof -i :12306

常见问题解答

Q1：Chrome MCP扩展程序无法连接怎么办？
A：首先确认扩展程序已正确加载，然后检查Native Messaging host是否已注册（运行mcp-chrome-bridge register），最后确认端口12306未被占用。

Q2：支持哪些浏览器？
A：目前仅支持Google Chrome浏览器，需要安装专用的Chrome扩展程序才能工作。

Q3：如何处理验证码？
A：Chrome MCP可以截图显示验证码，但需要人工识别输入。建议在测试环境中禁用验证码或使用测试账号。

Q4：扩展程序显示"未连接"状态怎么办？
A：检查Native Messaging host注册状态，重新运行mcp-chrome-bridge register命令，并确保Chrome浏览器已重启。

Q5：如何处理动态内容？
A：Chrome MCP支持等待策略，可以等待特定元素出现或页面加载完成后再执行操作。

Q6：可以同时控制多个Chrome窗口吗？
A：Chrome MCP扩展程序主要控制当前活动的Chrome窗口和标签页，建议一次专注处理一个任务。

总结

通过本教程，我们成功部署了Chrome MCP扩展程序，并将其集成到Dify中，实现了强大的网页自动化AI助手。Chrome MCP通过浏览器扩展程序的方式工作，提供了便捷的部署体验和稳定的控制能力。

核心优势：

• • ✅ 5分钟快速部署
• • ✅ 无需复杂配置文件
• • ✅ 基于Chrome扩展程序，稳定可靠
• • ✅ 支持丰富的网页操作功能
• • ✅ 与Dify无缝集成
• • ✅ 完全免费使用

部署要点回顾：

1. 下载并加载Chrome扩展程序
2. 安装并注册mcp-chrome-bridge
3. 在Dify中配置HTTP连接（端口12306）
4. 测试连接并开始使用

普通人如何抓住AI大模型的风口？

领取方式在文末

为什么要学习大模型？

目前AI大模型的技术岗位与能力培养随着人工智能技术的迅速发展和应用 ， 大模型作为其中的重要组成部分 ， 正逐渐成为推动人工智能发展的重要引擎 。大模型以其强大的数据处理和模式识别能力， 广泛应用于自然语言处理 、计算机视觉 、 智能推荐等领域 ，为各行各业带来了革命性的改变和机遇 。

目前，开源人工智能大模型已应用于医疗、政务、法律、汽车、娱乐、金融、互联网、教育、制造业、企业服务等多个场景，其中，应用于金融、企业服务、制造业和法律领域的大模型在本次调研中占比超过 30%。

随着AI大模型技术的迅速发展，相关岗位的需求也日益增加。大模型产业链催生了一批高薪新职业：

人工智能大潮已来，不加入就可能被淘汰。如果你是技术人，尤其是互联网从业者，现在就开始学习AI大模型技术，真的是给你的人生一个重要建议！

最后

只要你真心想学习AI大模型技术，这份精心整理的学习资料我愿意无偿分享给你，但是想学技术去乱搞的人别来找我！

在当前这个人工智能高速发展的时代，AI大模型正在深刻改变各行各业。我国对高水平AI人才的需求也日益增长，真正懂技术、能落地的人才依旧紧缺。我也希望通过这份资料，能够帮助更多有志于AI领域的朋友入门并深入学习。

真诚无偿分享！！！
vx扫描下方二维码即可
加上后会一个个给大家发

大模型全套学习资料展示

自我们与MoPaaS魔泊云合作以来，我们不断打磨课程体系与技术内容，在细节上精益求精，同时在技术层面也新增了许多前沿且实用的内容，力求为大家带来更系统、更实战、更落地的大模型学习体验。

希望这份系统、实用的大模型学习路径，能够帮助你从零入门，进阶到实战，真正掌握AI时代的核心技能！

01 教学内容

• 从零到精通完整闭环：【基础理论 →RAG开发 → Agent设计 → 模型微调与私有化部署调→热门技术】5大模块，内容比传统教材更贴近企业实战！

• 大量真实项目案例： 带你亲自上手搞数据清洗、模型调优这些硬核操作，把课本知识变成真本事‌！

02适学人群

应届毕业生‌： 无工作经验但想要系统学习AI大模型技术，期待通过实战项目掌握核心技术。

零基础转型‌： 非技术背景但关注AI应用场景，计划通过低代码工具实现“AI+行业”跨界‌。

业务赋能突破瓶颈： 传统开发者（Java/前端等）学习Transformer架构与LangChain框架，向AI全栈工程师转型‌。

vx扫描下方二维码即可

本教程比较珍贵，仅限大家自行学习，不要传播！更严禁商用！

03 入门到进阶学习路线图

大模型学习路线图，整体分为5个大的阶段：

04 视频和书籍PDF合集

从0到掌握主流大模型技术视频教程（涵盖模型训练、微调、RAG、LangChain、Agent开发等实战方向）

新手必备的大模型学习PDF书单来了！全是硬核知识，帮你少走弯路（不吹牛，真有用）

05 行业报告+白皮书合集

收集70+报告与白皮书，了解行业最新动态！

06 90+份面试题/经验

AI大模型岗位面试经验总结（谁学技术不是为了赚$呢，找个好的岗位很重要）

07 deepseek部署包+技巧大全

由于篇幅有限

只展示部分资料

并且还在持续更新中…

真诚无偿分享！！！
vx扫描下方二维码即可
加上后会一个个给大家发