AI导哈

网页内容抓取服务

一个基于Puppeteer的MCP服务器，用于通过Cursor AI抓取和分析网页内容，适用于前端开发调试、组件分析和SEO验证等场景。

  • by christophe77
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 christophe77/puppeteer-mcp

使用说明

木偶MCP服务器

一种模型上下文协议（MCP）服务器，使Cursor AI能够使用Puppeteer获取和分析网页内容。非常适合前端开发工作流程，您需要检查渲染的HTML、调试组件或分析实时网站。

🚀 特性

  • 网页抓取：检索任何URL的完整HTML源
  • 光标集成：与Cursor AI代理无缝协作
  • 木偶机供电：使用无头Chrome进行精确渲染
  • TypeScript：完全类型化和可维护的代码库
  • 命令行界面：易于使用的命令行界面

📋 先决条件

  • Node.js 16+
  • npm或纱线
  • 光标IDE

🛠️ 安装

  1. 克隆或下载此项目
git clone https://github.com/christophe77/puppeteer-mcp
cd puppeteer-mcp
  1. 安装依赖项
npm install
  1. 构建项目
npm run build

⚙️ 配置

光标MCP设置

将以下配置添加到光标MCP设置中(~/.cursor/mcp.json):

{
	"mcpServers": {
		"puppeteer-mcp": {
			"command": "node",
			"args": ["C:\\path\\to\\your\\puppeteer-mcp\\dist\\puppeteer-mcp.js"]
		}
	}
}

重要：替换 C:\\path\\to\\your\\puppeteer-mcp 根据您的实际项目路径。

重新启动游标

更新配置后，完全重新启动Cursor以使更改生效。

🎯 用法

方法1：直接MCP呼叫（光标）

@mcp puppeteer-mcp.fetchPageSource {"url": "https://example.com"}

方法2:NPM脚本（推荐）

npm run fetch https://example.com

方法3:Windows批处理文件

fetch.bat https://example.com

💡 用例和示例

1.前端开发调试

场景：您的React/Next.js组件渲染不正确

问题:

The Header component logo is invisible. Check the code and fetch http://localhost:3000

解决方案:

  1. 使用MCP工具获取渲染的HTML
  2. 与您的组件代码进行比较
  3. 识别CSS问题、缺少类或呈现问题

示例:

@mcp puppeteer-mcp.fetchPageSource {"url": "http://localhost:3000"}

2.成分分析

场景：调试复杂的组件结构

用例:

  • 验证动态内容是否正确呈现
  • 检查条件渲染是否按预期工作
  • 分析最终的DOM结构
  • 在JS或样式化组件输出中调试CSS

3.搜索引擎优化和元标签验证

场景：确保正确的元标签和SEO元素

示例:

@mcp puppeteer-mcp.fetchPageSource {"url": "https://myapp.com/product/123"}

寻找什么:

  • 元说明
  • 打开图形标签
  • 结构化数据
  • 标题标签

4.跨浏览器测试

场景：验证您的应用程序在不同环境中的呈现方式

用例:

  • 检查CSS网格/Flexbox是否正常工作
  • 验证响应式设计
  • 测试JavaScript功能
  • 验证可访问性属性

5.第三方集成测试

场景：测试外部小部件或API集成

例子:

  • 支付网关集成
  • 分析跟踪
  • 聊天小部件
  • 社交媒体嵌入

6.性能分析

场景：分析页面结构以进行优化

分析什么:

  • DOM复杂性
  • 未使用的CSS
  • 行内样式
  • 脚本加载顺序

🔧 发展

可用脚本

# Build TypeScript
npm run build

# Build and watch for changes
npm run build:watch

# Start MCP server
npm start

# Development mode (build + watch + start)
npm run dev

# Fetch a webpage (simplified CLI)
npm run fetch <URL>

项目结构

chrome-mcp/
├── src/
│   └── puppeteer-mcp.ts    # Main MCP server
├── dist/                   # Compiled JavaScript
├── fetch-web.js           # CLI wrapper script
├── fetch.bat              # Windows batch file
├── package.json
├── tsconfig.json
└── README.md

🐛 故障排除

光标中“无工具或提示”

  1. 检查文件路径 在……里面 mcp.json -使用绝对路径
  2. 重新启动游标 完全
  3. 验证构建 -奔跑 npm run build
  4. 手动测试 -奔跑 npm run fetch <URL>

服务器未响应

  1. 检查Node.js版本 -需要16+
  2. 验证依赖关系 -奔跑 npm install
  3. 检查木偶 -可能需要下载Chrome

权限问题

  1. 以管理员身份运行 如有需要
  2. 检查文件权限 在项目目录上
  3. 验证防病毒软件 不会阻止进程

📚 高级用法

自定义木偶选项

您可以修改 src/puppeteer-mcp.ts 要添加自定义Puppeter选项，请执行以下操作：

const browser = await puppeteer.launch({
	headless: true,
	args: ['--no-sandbox', '--disable-setuid-sandbox'],
});

添加更多工具

使用其他工具扩展MCP服务器：

server.registerTool(
	'screenshot',
	{
		title: 'Take Screenshot',
		description: 'Capture a screenshot of a webpage',
		inputSchema: { url: z.string() },
	},
	async ({ url }) => {
		// Implementation here
	},
);

🤝 贡献

  1. 分叉存储库
  2. 创建要素分支
  3. 进行更改
  4. 彻底测试
  5. 提交拉取请求

📄 许可证

ISC许可证-详见package.json

🆘 支持

如果您遇到问题：

  1. 检查故障排除部分
  2. 验证您的Cursor MCP配置
  3. 首先使用简单的URL进行测试
  4. 检查控制台是否有错误消息

用Cursor AI编码快乐！ 🚀

相关 MCP