引言

还在为复杂的网页操作而烦恼？想让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. 打开Chrome浏览器，访问 chrome://extensions/

2. 启用"开发者模式"

3. 点击"加载已解压的扩展程序"

4. 选择之前下载并解压的扩展程序文件夹

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. 检查Chrome扩展程序状态：

   • • 打开Chrome浏览器，访问 chrome://extensions/

   • • 确认Chrome MCP扩展程序已启用

   • • 点击扩展程序图标，查看连接状态

2. 重新连接扩展程序：

   • • 点击扩展程序图标

   • • 如果显示"未连接"，点击"连接"按钮

   • • 等待几秒钟，直到显示"已连接"状态

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. 新建「Agent」应用

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资讯和实用教程！

原文地址：https://mp.weixin.qq.com/s/YCmB6PmWc7feBbSgO_gwfg