选项 A：从发布页面下载

1. 访问 GitHub 发布页面
2. 下载最新版本中的 mcp-pointer-chrome-extension.zip
3. 将压缩包解压到电脑上的一个文件夹
4. 打开 Chrome → 设置 → 扩展程序 → 开发者模式（开启）
5. 点击“加载已解压的扩展程序”，并选择解压后的文件夹
6. MCP Pointer 扩展应出现在您的扩展列表中
7. 重新加载网页以激活扩展

选项 B：从源代码构建

1. 克隆此仓库
2. 按照 CONTRIBUTING.md 中的构建说明操作
3. 打开 Chrome → 设置 → 扩展程序 → 开发者模式（开启）
4. 点击“加载已解压的扩展程序”，并选择 packages/chrome-extension/dist/ 文件夹
5. 重新加载网页以激活扩展

# 对于其他 AI 工具
npx -y @mcp-pointer/server config cursor     # 打开 Cursor 的深度链接以自动安装
npx -y @mcp-pointer/server config windsurf   # 自动更新 Windsurf 的配置文件
npx -y @mcp-pointer/server config manual     # 显示其他工具的手动配置

可选： 您也可以通过 npm install -g @mcp-pointer/server 全局安装，之后便可以直接使用 mcp-pointer 命令，而无需再输入 npx -y @mcp-pointer/server。

配置完成后，请 重启您的编码工具 以加载 MCP 连接。

🔄 已经在使用 MCP Pointer 吗？ 再次运行配置命令即可更新为自动更新的配置：

npx -y @mcp-pointer/server config <your-tool>  # 重新配置以始终使用最新版本

3. 开始使用

1. 导航到任意网页
2. Option+Click 任意元素以进行选择
3. 向您的 AI 提问，让它分析所选元素！

您的 AI 工具会在需要时自动启动 MCP 服务器，执行命令 npx -y @mcp-pointer/server@latest start。

可用的 MCP 工具：

• get-pointed-element——返回当前指向的 DOM 元素的文本信息。可选参数：
  • textDetail: 0 | 1 | 2（默认值为 2），用于控制包含多少文本内容（0 = 无, 1 = 仅可见文本, 2 = 可见 + 隐藏）。
  • cssLevel: 0 | 1 | 2 | 3（默认值为 1），用于控制样式细节，从不包含任何 CSS（0）到完整的计算样式（3）。

🎯 工作原理

1. 元素选择：内容脚本捕获 Option+Click 事件
2. 数据提取：分析元素结构、CSS 及框架相关信息
3. WebSocket 传输：将数据发送至端口 7007 的 MCP 服务器
4. MCP 协议：通过 MCP 工具将数据提供给 AI 工具
5. AI 分析：您的助手现在可以查看并分析该元素！

🎨 提取的元素数据

• 基本信息：标签名、ID、类名、文本内容
• CSS 属性：显示方式、定位、颜色、尺寸
• 组件信息：React 组件名称和源文件（实验性）
• 属性：所有 HTML 属性
• 位置：精确坐标和尺寸
• 源码提示：文件路径和组件来源

🔍 框架支持

• ⚛️ React——通过 Fiber 检测组件名称和源文件（实验性）
• 📦 通用 HTML/CSS/JS——全面支持任何网页内容
• 🔮 计划中——Vue 组件检测（欢迎提交 PR）

🌐 浏览器支持

• ✅ Chrome——全面支持（已测试）
• 🟡 基于 Chromium 的浏览器——应该可以正常工作（Edge、Brave、Arc——需手动加载编译好的扩展）

🐛 故障排除

扩展无法连接

1. 确保 MCP 服务器正在运行：npx -y @mcp-pointer/server@latest start
2. 检查浏览器控制台是否有 WebSocket 错误
3. 确认端口 7007 没有被防火墙阻止

MCP 工具不可用

1. 安装后请重启您的 AI 助手
2. 检查 MCP 配置：mcp-pointer config <your-tool>
3. 确认服务器正在运行：npx -y @mcp-pointer/server@latest start

元素无法高亮显示

1. 某些页面会阻止内容脚本（如 chrome:// 等）
2. 尝试刷新页面
3. 检查是否已启用目标模式（点击扩展程序图标）

🚀 路线图

1. 动态上下文控制

• 将完整原始上下文传输至服务器
• 可由 LLM 配置的细节级别（仅可见文本、全部文本、CSS 层次）
• 渐进式细化选项 / 基于 token 数量的数据获取策略

2. 视觉内容支持（适用于多模态 LLM）

• 对图片（img 标签）进行 Base64 编码
• 截取选定元素的屏幕截图
• 提供独立的 MCP 工具，用于直接获取视觉内容

3. 增强框架支持

• Vue.js 组件检测
• 更好的 React 支持（React 19 移除了 _debugSource，影响开发构建中的源映射）

4. 多选功能

• 支持同时选择多个 DOM 元素
• https://github.com/etsd-tech/mcp-pointer/pull/9

📝 许可证

MIT 许可证 - 详情请参阅 LICENSE 文件

🤝 贡献

我们欢迎各类贡献！请查阅我们的 CONTRIBUTING.md 指南，了解开发环境搭建及贡献规范。

受类似 Click-to-Component 这类工具启发，旨在优化组件开发流程。

专为 AI 驱动的 Web 开发而打造 ❤️

现在，只需按住 Option 键并单击，您的 AI 就能分析您指向的任何元素啦！👆