Claude Code Chrome MCP 新手入门指南：从零搭建高效开发环境

1次阅读

没有评论

共计 1985 个字符，预计需要花费 5 分钟才能阅读完成。

MCP（Message Channel Protocol）是 Claude Code Chrome 扩展开发中的核心通信协议，主要用于解决以下场景问题：

实现 Chrome 扩展后台脚本与内容脚本的安全通信
处理跨域请求时的数据交换
管理扩展不同组件之间的状态同步

典型应用案例包括：

需要与网页 DOM 交互的数据采集插件
实现复杂业务逻辑的多模块扩展
需要保持长连接的实时监控工具

安装最新版 Chrome 浏览器（版本 100+）
下载 Node.js LTS 版本（建议 16.x+）
安装代码编辑器（VS Code 或 WebStorm）

创建项目目录并初始化 package.json：
```
mkdir mcp-demo && cd mcp-demo
npm init -y
```

安装必要依赖：

npm install @claude-code/mcp-core chrome-types --save-dev

创建基础目录结构：

├── manifest.json
├── background.js
├── content.js
└── popup.html

{
  "manifest_version": 3,
  "name": "MCP Demo",
  "version": "1.0",
  "background": {"service_worker": "background.js"},
  "content_scripts": [{"matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

现象：消息发送后无响应
排查步骤 ：
检查 manifest 中是否正确定义了 content_scripts
确认消息监听器已正确注册
验证消息通道名称是否一致

解决方案 ：
在 manifest 中添加所需权限
示例：
```
"permissions": ["activeTab", "storage"]
```

关键点 ：
MCP 只支持可序列化的 JSON 数据
处理复杂对象时需手动序列化

import {MCPServer} from '@claude-code/mcp-core';

const server = new MCPServer('demo-channel');

server.onMessage.addListener((request, sender, sendResponse) => {console.log('Received:', request);
  sendResponse({status: 'OK', data: request});
});

import {MCPClient} from '@claude-code/mcp-core';

const client = new MCPClient('demo-channel');

// 发送简单消息
document.addEventListener('click', async () => {
  const response = await client.sendMessage({ 
    type: 'user-action', 
    data: 'button-clicked' 
  });
  console.log('Server response:', response);
});

批量处理高频消息（使用 debounce 技术）
对大数据采用分片传输
避免在 content script 中处理复杂逻辑

始终验证消息来源：

if (sender.url !== expectedOrigin) return;

敏感操作需用户显式授权
对输入数据进行严格校验

定义清晰的 type 字段区分消息类型
采用版本化 API 设计（如 v1/action）
为关键操作添加事务 ID

try {const res = await client.sendMessage(payload);
  if (!res.success) {throw new Error(res.error);
  }
} catch (err) {console.error('Communication failed:', err);
  // 重试或降级处理
}

现在你已经了解了 MCP 的基础用法，建议通过以下练习巩固知识：