【GitHub项目推荐--Chrome MCP Server：基于Chrome扩展的MCP服务器】
简介
Chrome MCP Server 是一个基于Chrome扩展的Model Context Protocol（MCP）服务器，它将Chrome浏览器的功能通过MCP协议暴露给AI智能体。这个开源项目允许AI助手直接与用户的浏览器交互，实现网页浏览、内容提取、自动化操作等功能，为AI智能体提供了强大的Web交互能力。
🔗 GitHub地址：
https://github.com/hangwin/mcp-chrome
🚀 核心价值：
Chrome扩展 · MCP协议 · 浏览器自动化 · AI智能体 · 开源免费
项目背景：
-
Web交互需求：AI智能体需要与Web浏览器交互
-
MCP协议扩展：扩展MCP协议到浏览器领域
-
开源精神：社区驱动的开源项目
-
实用价值：解决实际浏览器自动化需求
项目特色：
-
🌐 浏览器集成：深度Chrome浏览器集成
-
🤖 AI智能体支持：完整AI智能体支持
-
🔌 MCP协议：标准MCP协议兼容
-
⚡ 实时交互：实时浏览器交互能力
-
🆓 开源免费：MIT开源许可证
技术架构：
-
Chrome扩展：基于Manifest V3的现代扩展
-
MCP服务器：标准MCP服务器实现
-
消息传递：扩展与内容脚本通信
-
安全沙箱：安全隔离的执行环境
-
API封装：浏览器API的MCP封装
主要功能
1. 核心功能体系
Chrome MCP Server提供了一套完整的浏览器自动化解决方案，涵盖网页导航、内容提取、交互操作、状态管理、数据处理等多个方面。
网页导航功能：
页面控制:
- 打开新标签: 打开新的浏览器标签页
- 关闭标签: 关闭指定标签页
- 切换标签: 在不同标签间切换
- 刷新页面: 刷新当前页面
- 前进后退: 页面历史导航
URL管理:
- 跳转URL: 导航到指定URL
- 获取当前URL: 获取当前页面URL
- URL历史: 访问历史记录管理
- 书签操作: 书签的添加和删除
- 下载管理: 文件下载控制
页面加载:
- 等待加载: 等待页面完全加载
- 加载状态: 检查页面加载状态
- 超时控制: 页面加载超时设置
- 错误处理: 加载错误处理
- 重试机制: 失败重试机制内容提取功能：
DOM操作:
- 元素选择: CSS选择器选择元素
- 文本提取: 提取元素文本内容
- 属性获取: 获取元素属性值
- HTML提取: 提取元素HTML内容
- 元素列表: 获取多个元素
页面信息:
- 页面标题: 获取页面标题
- 页面元数据: 提取meta信息
- 链接提取: 提取所有链接
- 图片提取: 提取图片信息
- 表单提取: 提取表单字段
内容分析:
- 文本分析: 页面文本内容分析
- 结构分析: 页面结构分析
- 关键词提取: 关键词提取
- 摘要生成: 内容摘要生成
- 分类标签: 内容分类打标交互操作功能：
鼠标操作:
- 点击元素: 点击指定元素
- 双击操作: 双击元素
- 右键点击: 右键菜单操作
- 鼠标悬停: 鼠标悬停效果
- 拖拽操作: 元素拖拽操作
键盘操作:
- 文本输入: 在输入框输入文本
- 按键操作: 模拟键盘按键
- 快捷键: 执行键盘快捷键
- 组合键: 复杂组合键操作
- 焦点管理: 元素焦点控制
表单操作:
- 表单填写: 自动填写表单
- 选项选择: 选择下拉选项
- 复选框: 复选框操作
- 单选框: 单选框选择
- 表单提交: 提交表单数据状态管理功能：
浏览器状态:
- 标签页状态: 管理所有标签页状态
- 窗口状态: 浏览器窗口状态
- 扩展状态: 扩展自身状态管理
- 会话状态: 用户会话状态保持
- 缓存状态: 数据缓存状态
页面状态:
- DOM状态: 页面DOM结构状态
- 加载状态: 页面加载进度状态
- 交互状态: 用户交互状态跟踪
- 错误状态: 错误状态记录
- 性能状态: 页面性能状态
会话管理:
- Cookie管理: Cookie读取和设置
- 本地存储: LocalStorage管理
- 会话存储: SessionStorage管理
- IndexedDB: 数据库操作管理
- 缓存管理: 缓存数据管理数据处理功能：
数据提取:
- 结构化数据: 提取结构化数据
- 表格数据: 提取表格数据
- JSON数据: 提取JSON格式数据
- API数据: 从API接口提取数据
- 实时数据: 实时数据流提取
数据转换:
- 格式转换: 数据格式转换
- 编码解码: 数据编码解码
- 数据清洗: 数据清洗处理
- 数据归一化: 数据标准化
- 数据聚合: 数据聚合处理
数据输出:
- JSON输出: JSON格式输出
- CSV输出: CSV格式输出
- 文本输出: 纯文本输出
- HTML输出: HTML格式输出
- 文件下载: 文件形式输出2. 高级功能
自动化工作流：
流程录制:
- 动作录制: 录制用户操作动作
- 流程保存: 保存自动化流程
- 流程编辑: 编辑已有流程
- 参数化: 流程参数化支持
- 流程导出: 流程导出分享
流程执行:
- 顺序执行: 顺序执行步骤
- 条件分支: 条件判断分支
- 循环执行: 循环执行步骤
- 错误处理: 执行错误处理
- 执行监控: 执行过程监控
流程优化:
- 性能优化: 执行性能优化
- 稳定性优化: 提高稳定性
- 可维护性: 流程易于维护
- 可扩展性: 易于扩展新功能
- 兼容性: 浏览器兼容性智能分析：
内容理解:
- 语义分析: 内容语义理解
- 情感分析: 情感倾向分析
- 主题识别: 主题内容识别
- 关键信息: 关键信息提取
- 摘要生成: 自动内容摘要
行为分析:
- 用户行为: 用户行为分析
- 交互模式: 交互模式识别
- 偏好分析: 用户偏好分析
- 异常检测: 异常行为检测
- 预测分析: 行为预测分析
优化建议:
- 性能建议: 性能优化建议
- 体验建议: 用户体验建议
- 内容建议: 内容优化建议
- 交互建议: 交互改进建议
- 安全建议: 安全改进建议安全隐私：
权限控制:
- 细粒度权限: 精细的权限控制
- 用户确认: 敏感操作用户确认
- 权限审计: 权限使用审计
- 权限撤销: 权限撤销机制
- 权限范围: 权限范围限制
数据安全:
- 数据加密: 敏感数据加密
- 安全传输: 安全数据传输
- 数据隔离: 数据隔离保护
- 访问控制: 数据访问控制
- 审计日志: 数据访问审计
隐私保护:
- 隐私设置: 用户隐私设置
- 数据最小化: 最小数据收集
- 用户同意: 用户明确同意
- 透明度: 操作透明度
- 合规性: 隐私法规合规安装与配置
1. 环境准备
系统要求：
浏览器要求:
- Chrome: 88+ 版本
- Edge: 88+ 版本 (基于Chromium)
- Opera: 74+ 版本
- 其他Chromium浏览器: 支持Manifest V3
操作系统:
- Windows: 7+ 版本
- macOS: 10.15+ 版本
- Linux: 主流发行版
- Chrome OS: 支持
硬件要求:
- 内存: 4GB+ RAM
- 存储: 100MB+ 可用空间
- 网络: 稳定的网络连接
开发环境:
- Node.js: 16+ 版本 (开发需要)
- npm: 8+ 版本
- Git: 版本控制工具2. 安装步骤
Chrome扩展安装：
# 1. 克隆仓库
git clone https://github.com/hangwin/mcp-chrome.git
cd mcp-chrome
# 2. 安装依赖
npm install
# 3. 构建扩展
npm run build
# 4. 加载扩展到Chrome
# - 打开Chrome，进入扩展管理页面(chrome://extensions/)
# - 开启"开发者模式"
# - 点击"加载已解压的扩展程序"
# - 选择项目中的dist目录从商店安装（如果发布）：
1. 打开Chrome网上应用店
2. 搜索"MCP Chrome Server"
3. 点击"添加到Chrome"
4. 确认权限请求
5. 安装完成开发模式安装：
# 开发模式
npm run dev
# 这会启动监听模式，文件更改会自动重建
# 然后在Chrome中加载dist目录打包发布：
# 生产环境构建
npm run build:prod
# 打包扩展
npm run package
# 生成发布包
# 包文件在packages/目录下3. 配置说明
扩展配置：
// manifest.json 配置示例
{
"manifest_version": 3,
"name": "Chrome MCP Server",
"version": "1.0.0",
"description": "MCP server for Chrome browser automation",
"permissions": [
"tabs",
"activeTab",
"scripting",
"storage",
"webNavigation",
"webRequest",
"contextMenus"
],
"host_permissions": [
""
],
"background": {
"service_worker": "background.js",
"type": "module"
},
"content_scripts": [
{
"matches": [""],
"js": ["content.js"],
"run_at": "document_idle"
}
],
"options_page": "options.html",
"action": {
"default_popup": "popup.html",
"default_title": "Chrome MCP Server"
}
}MCP服务器配置：
// mcp-config.json 配置示例
{
"server": {
"name": "chrome-mcp-server",
"version": "1.0.0",
"description": "MCP server for Chrome browser automation",
"capabilities": {
"tools": true,
"resources": true,
"logging": true
}
},
"tools": {
"navigate": {
"description": "Navigate to a URL",
"parameters": {
"url": {"type": "string", "description": "URL to navigate to"}
}
},
"extract_content": {
"description": "Extract content from page",
"parameters": {
"selector": {"type": "string", "description": "CSS selector"}
}
}
},
"resources": {
"page_content": {
"uri": "chrome://page/{tabId}",
"description": "Page content resource"
}
},
"logging": {
"level": "info",
"file": "mcp-server.log"
}
}权限配置：
// 权限配置示例
{
"required_permissions": [
"tabs",
"activeTab",
"scripting",
"storage"
],
"optional_permissions": [
"webNavigation",
"webRequest",
"downloads"
],
"host_permissions": [
"https://*/*",
"http://*/*"
],
"content_scripts": [
{
"matches": ["https://*/*", "http://*/*"],
"js": ["content-script.js"],
"all_frames": true
}
]
}使用指南
1. 基本工作流
使用Chrome MCP Server的基本流程包括：安装扩展 → 配置连接 → 发送指令 → 执行操作 → 获取结果。整个过程设计为简单直观，用户可以通过MCP协议与浏览器交互。
2. 基本使用
MCP客户端连接：
// 连接MCP服务器示例
const { McpClient } = require('@modelcontextprotocol/sdk');
async function connectToChromeMCP() {
try {
// 创建MCP客户端
const client = new McpClient({
name: 'chrome-mcp-client',
version: '1.0.0'
});
// 连接到Chrome MCP服务器
await client.connect({
transport: 'websocket',
url: 'ws://localhost:8080/mcp'
});
console.log('Connected to Chrome MCP Server');
return client;
} catch (error) {
console.error('Connection failed:', error);
throw error;
}
}
// 使用客户端
const client = await connectToChromeMCP();基本浏览器操作：
// 导航到URL
await client.callTool('navigate', {
url: 'https://github.com'
});
// 等待页面加载
await client.callTool('wait_for_load', {
timeout: 5000
});
// 提取页面内容
const content = await client.callTool('extract_content', {
selector: 'body',
format: 'text'
});
console.log('Page content:', content);元素交互操作：
// 点击元素
await client.callTool('click_element', {
selector: '#submit-button',
waitAfter: 1000
});
// 输入文本
await client.callTool('input_text', {
selector: '#search-input',
text: 'MCP Chrome Server',
clear: true
});
// 提交表单
await client.callTool('submit_form', {
selector: 'form#search-form'
});高级内容提取：
// 提取结构化数据
const data = await client.callTool('extract_structured_data', {
selectors: {
title: 'h1.product-title',
price: '.price',
description: '.product-description',
images: 'img.product-image@src'
},
format: 'json'
});
// 提取表格数据
const tableData = await client.callTool('extract_table', {
selector: 'table#data-table',
includeHeaders: true,
format: 'csv'
});
// 保存到文件
await client.callTool('save_to_file', {
content: tableData,
filename: 'table_data.csv',
format: 'csv'
});3. 高级用法
自动化工作流：
// 定义自动化任务
async function automatedTask(client, taskConfig) {
const steps = [
{
action: 'navigate',
params: { url: taskConfig.startUrl },
description: 'Navigate to start URL'
},
{
action: 'wait_for_load',
params: { timeout: 10000 },
description: 'Wait for page load'
},
{
action: 'extract_content',
params: { selector: taskConfig.contentSelector },
description: 'Extract main content'
},
{
action: 'click_element',
params: { selector: taskConfig.nextButtonSelector },
description: 'Click next button'
},
{
action: 'save_data',
params: { filename: taskConfig.outputFile },
description: 'Save extracted data'
}
];
// 执行任务步骤
for (const step of steps) {
try {
console.log(`Executing: ${step.description}`);
await client.callTool(step.action, step.params);
// 步骤间延迟
if (step.delay) {
await new Promise(resolve => setTimeout(resolve, step.delay));
}
} catch (error) {
console.error(`Step failed: ${step.description}`, error);
throw error;
}
}
console.log('Automated task completed successfully');
}错误处理与重试：
// 带重试的工具调用
async function callWithRetry(client, toolName, params, maxRetries = 3) {
for (let attempt = 1; attempt <= maxRetries; attempt++) {
try {
return await client.callTool(toolName, params);
} catch (error) {
console.warn(`Attempt ${attempt} failed:`, error.message);
if (attempt === maxRetries) {
throw new Error(`Failed after ${maxRetries} attempts: ${error.message}`);
}
// 指数退避重试
const delay = Math.pow(2, attempt) * 1000;
await new Promise(resolve => setTimeout(resolve, delay));
}
}
}
// 使用重试机制
try {
const result = await callWithRetry(
client,
'extract_content',
{ selector: '.dynamic-content' },
3
);
console.log('Success:', result);
} catch (error) {
console.error('All attempts failed:', error);
}性能监控与优化：
// 性能监控装饰器
function withPerformanceMonitoring(fn) {
return async function (...args) {
const startTime = Date.now();
let success = false;
try {
const result = await fn(...args);
success = true;
return result;
} finally {
const endTime = Date.now();
const duration = endTime - startTime;
console.log(`Performance: ${fn.name} - ${duration}ms - ${success ? 'Success' : 'Failed'}`);
// 可以发送到监控系统
sendMetrics({
operation: fn.name,
duration,
success,
timestamp: new Date().toISOString()
});
}
};
}
// 应用性能监控
const monitoredNavigate = withPerformanceMonitoring(client.callTool.bind(client));
await monitoredNavigate('navigate', { url: 'https://example.com' });应用场景实例
案例1：网页数据采集
场景：自动化采集网页数据
解决方案：使用Chrome MCP Server进行网页数据采集。
实施方法：
class WebDataCollector {
constructor(mcpClient) {
this.client = mcpClient;
}
async collectProductData(baseUrl, pagesToScrape = 10) {
const allProducts = [];
for (let page = 1; page <= pagesToScrape; page++) {
const url = `${baseUrl}?page=${page}`;
// 导航到页面
await this.client.callTool('navigate', { url });
await this.client.callTool('wait_for_load', { timeout: 5000 });
// 提取产品数据
const products = await this.client.callTool('extract_structured_data', {
selectors: {
name: '.product-name',
price: '.product-price',
rating: '.product-rating',
image: '.product-image@src',
link: '.product-link@href'
},
multiple: true,
format: 'json'
});
allProducts.push(...products);
// 检查是否有下一页
const hasNextPage = await this.client.callTool('element_exists', {
selector: '.next-page'
});
if (!hasNextPage) break;
}
// 保存数据
await this.client.callTool('save_to_file', {
content: JSON.stringify(allProducts, null, 2),
filename: 'products.json',
format: 'json'
});
return allProducts;
}
}
// 使用示例
const collector = new WebDataCollector(client);
const products = await collector.collectProductData('https://example.com/products', 5);
console.log(`Collected ${products.length} products`);数据采集价值：
-
自动化：全自动数据采集
-
高效性：高效采集大量数据
-
准确性：准确的数据提取
-
可扩展：易于扩展采集规则
-
节省时间：大幅节省人工时间
案例2：自动化测试
场景：Web应用自动化测试
解决方案：使用Chrome MCP Server进行自动化测试。
实施方法：
class WebAppTester {
constructor(mcpClient) {
this.client = mcpClient;
this.testResults = [];
}
async runTestSuite(testCases) {
for (const testCase of testCases) {
const result = {
name: testCase.name,
passed: false,
error: null,
duration: 0
};
const startTime = Date.now();
try {
// 执行测试步骤
for (const step of testCase.steps) {
await this.client.callTool(step.action, step.params);
if (step.assertion) {
const assertionResult = await this.client.callTool(
step.assertion.action,
step.assertion.params
);
if (!assertionResult.passed) {
throw new Error(`Assertion failed: ${step.assertion.description}`);
}
}
}
result.passed = true;
} catch (error) {
result.error = error.message;
result.passed = false;
} finally {
result.duration = Date.now() - startTime;
this.testResults.push(result);
}
}
return this.generateTestReport();
}
generateTestReport() {
const passed = this.testResults.filter(r => r.passed).length;
const total = this.testResults.length;
const successRate = (passed / total) * 100;
return {
summary: {
totalTests: total,
passed: passed,
failed: total - passed,
successRate: `${successRate.toFixed(2)}%`,
totalDuration: this.testResults.reduce((sum, r) => sum + r.duration, 0)
},
details: this.testResults
};
}
}
// 测试用例示例
const testCases = [
{
name: "Login functionality",
steps: [
{
action: "navigate",
params: { url: "https://example.com/login" }
},
{
action: "input_text",
params: { selector: "#username", text: "testuser" }
},
{
action: "input_text",
params: { selector: "#password", text: "password123" }
},
{
action: "click_element",
params: { selector: "#login-button" }
},
{
action: "wait_for_element",
params: { selector: ".welcome-message", timeout: 5000 },
assertion: {
action: "element_contains_text",
params: { selector: ".welcome-message", text: "Welcome" }
}
}
]
}
];
// 执行测试
const tester = new WebAppTester(client);
const report = await tester.runTestSuite(testCases);
console.log('Test report:', report);自动化测试价值：
-
测试覆盖：提高测试覆盖率
-
回归测试：自动化回归测试
-
持续集成：支持CI/CD流程
-
质量保证：提高软件质量
-
效率提升：大幅提升测试效率
案例3：内容监控与告警
场景：网站内容变化监控
解决方案：使用Chrome MCP Server监控网站内容变化。
实施方法：
class ContentMonitor {
constructor(mcpClient) {
this.client = mcpClient;
this.monitoredPages = new Map();
}
async startMonitoring(url, checkInterval = 3600000) {
const pageId = this.generatePageId(url);
if (this.monitoredPages.has(pageId)) {
throw new Error(`Already monitoring: ${url}`);
}
// 初始抓取
const initialContent = await this.fetchPageContent(url);
this.monitoredPages.set(pageId, {
url,
lastContent: initialContent,
lastChecked: new Date(),
interval: checkInterval
});
// 启动定时检查
const intervalId = setInterval(async () => {
try {
await this.checkForChanges(pageId);
} catch (error) {
console.error(`Error checking ${url}:`, error);
}
}, checkInterval);
this.monitoredPages.get(pageId).intervalId = intervalId;
console.log(`Started monitoring: ${url}`);
return pageId;
}
async checkForChanges(pageId) {
const pageInfo = this.monitoredPages.get(pageId);
if (!pageInfo) return;
const currentContent = await this.fetchPageContent(pageInfo.url);
const previousContent = pageInfo.lastContent;
if (this.hasContentChanged(previousContent, currentContent)) {
// 内容发生变化，发送通知
await this.notifyChange({
url: pageInfo.url,
previousContent,
currentContent,
changeTime: new Date()
});
// 更新记录
pageInfo.lastContent = currentContent;
pageInfo.lastChanged = new Date();
}
pageInfo.lastChecked = new Date();
}
async fetchPageContent(url) {
await this.client.callTool('navigate', { url });
await this.client.callTool('wait_for_load', { timeout: 10000 });
const content = await this.client.callTool('extract_content', {
selector: 'body',
format: 'text',
excludeSelectors: ['script', 'style', 'nav', 'footer']
});
return this.normalizeContent(content);
}
hasContentChanged(previous, current) {
// 简单的内容变化检测
return previous !== current;
}
async notifyChange(changeInfo) {
// 发送邮件、Slack、Webhook等通知
console.log(`Content changed: ${changeInfo.url}`);
// 示例：保存变化记录
await this.client.callTool('save_to_file', {
content: JSON.stringify(changeInfo, null, 2),
filename: `change-${Date.now()}.json`,
format: 'json'
});
}
stopMonitoring(pageId) {
const pageInfo = this.monitoredPages.get(pageId);
if (pageInfo && pageInfo.intervalId) {
clearInterval(pageInfo.intervalId);
this.monitoredPages.delete(pageId);
console.log(`Stopped monitoring: ${pageInfo.url}`);
}
}
generatePageId(url) {
return Buffer.from(url).toString('base64');
}
normalizeContent(content) {
// 移除多余空格和换行
return content.replace(/s+/g, ' ').trim();
}
}
// 使用示例
const monitor = new ContentMonitor(client);
// 开始监控网站
const pageId = await monitor.startMonitoring(
'https://example.com/news',
1800000 // 每30分钟检查一次
);
// 停止监控
// await monitor.stopMonitoring(pageId);内容监控价值：
-
实时监控：实时监控网站内容变化
-
及时告警：内容变化及时告警
-
历史记录：完整变化历史记录
-
趋势分析：内容变化趋势分析
-
竞争情报：竞争对手监控
总结
Chrome MCP Server作为一个功能强大、易于使用的浏览器自动化工具，通过其MCP协议支持、丰富的浏览器功能、灵活的配置选项和开源免费的特性，为开发者和AI智能体提供了强大的Web交互能力。
核心优势：
-
🌐 浏览器集成：深度Chrome浏览器集成
-
🤖 AI智能体支持：完整AI智能体支持
-
🔌 MCP协议：标准MCP协议兼容
-
⚡ 实时交互：实时浏览器交互能力
-
🆓 开源免费：MIT开源许可证
适用场景：
-
网页数据采集和抓取
-
Web应用自动化测试
-
网站内容监控和告警
-
浏览器自动化任务
-
AI智能体Web交互
立即开始使用：
# 克隆仓库
git clone https://github.com/hangwin/mcp-chrome.git
# 安装依赖
cd mcp-chrome
npm install
# 构建扩展
npm run build
# 加载到Chrome浏览器资源链接：
-
📚 项目地址：GitHub仓库
-
📖 使用文档：详细使用文档
-
🔧 开发指南：开发贡献指南
-
💬 社区支持：问题讨论和支持
-
🎥 演示示例：功能演示示例
最佳实践：
-
🎯 明确需求：明确自动化需求
-
🔧 逐步实施：从简单任务开始
-
✅ 测试验证：充分测试验证功能
-
📊 性能监控：监控性能指标
-
🔒 安全考虑：注意安全隐私
通过Chrome MCP Server，您可以：
-
自动化操作：自动化浏览器操作
-
数据采集：高效网页数据采集
-
智能交互：AI智能体Web交互
-
测试自动化：自动化Web测试
-
内容监控：网站内容变化监控
无论您是开发者、测试人员、数据分析师还是AI研究者，Chrome MCP Server都能为您提供强大、易用且高效的浏览器自动化解决方案！
特别提示：
-
⚠️ 权限管理：合理管理扩展权限
-
🔒 隐私保护：注意用户隐私保护
-
📖 文档阅读：详细阅读使用文档
-
🤝 社区参与：参与社区讨论
-
🔄 版本更新：关注版本更新信息
通过Chrome MCP Server，开启浏览器自动化的新篇章！
未来发展：
-
🚀 更多功能：持续添加新功能
-
🔌 更多集成：更多AI平台集成
-
🌍 多浏览器：多浏览器支持
-
📊 性能优化：持续性能优化
-
🤖 AI增强：更智能的AI交互
加入社区：
参与方式:
- GitHub Issues: 问题反馈和功能建议
- Pull Request: 代码贡献和改进
- 文档贡献: 帮助改进文档
- 案例分享: 分享使用案例
- 社区讨论: 技术讨论和交流
社区价值:
- 技术交流和学习
- 问题解答和支持
- 功能建议和讨论
- 项目贡献和认可
- 职业发展机会通过Chrome MCP Server，构建智能的浏览器自动化未来！
