如何拦截Puppeteer生成的CDP命令不执行，并传递至其他服务？

核心是拦截Puppeteer底层发送CDP命令的方法，捕获命令内容后转发给目标服务，而非传递给浏览器执行。Puppeteer的所有CDP交互都通过内部的Client实例完成，我们可以重写该实例的send方法来实现拦截。

• 启动Puppeteer浏览器（可使用无头模式减少资源占用），获取目标页面。
• 拦截页面对应的CDP客户端的send方法，捕获命令名称和参数。
• 将捕获到的CDP命令转发给你的目标服务（可通过HTTP请求、消息队列等方式）。
• 模拟返回CDP命令的响应，确保Puppeteer的API调用能正常完成，避免超时报错。

const puppeteer = require('puppeteer');
const axios = require('axios'); // 可替换为你需要的通信工具

async function interceptCDPCommands() {
  // 启动无头浏览器
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();

  // 获取页面绑定的CDP会话客户端
  const client = await page.target().createCDPSession();

  // 保存原始的send方法
  const originalSend = client.send;

  // 重写send方法实现拦截
  client.send = async (method, params = {}) => {
    // 1. 捕获CDP命令结构
    const cdpCommand = {
      method,
      params,
      timestamp: Date.now()
    };
    console.log('捕获到CDP命令:', cdpCommand);

    // 2. 转发命令到目标服务
    try {
      await axios.post('https://your-target-service.com/receive-cdp', cdpCommand);
      console.log('CDP命令已转发');
    } catch (err) {
      console.error('转发CDP命令失败:', err.message);
    }

    // 3. 模拟返回符合CDP规范的响应
    switch (method) {
      case 'DOM.click':
        return {};
      case 'Page.captureScreenshot':
        return { data: 'base64-mock-screenshot-data' };
      case 'Input.synthesizeScrollGesture':
        return {};
      default:
        return {};
    }
  };

  // 测试Puppeteer操作，触发CDP命令生成
  await page.click('body');
  await page.evaluate(() => window.scrollTo(0, 1000));
  await page.screenshot();

  await browser.close();
}

interceptCDPCommands();

• 全局拦截：如果需要拦截整个浏览器的所有CDP命令，可以监听浏览器的targetcreated事件，为每个新创建的页面都绑定拦截逻辑。
• 响应模拟：Puppeteer的API依赖CDP响应推进执行流程，需根据实际使用的CDP命令完善模拟响应，避免出现超时或逻辑错误。
• 轻量模式：若完全不需要浏览器渲染，可直接模拟CDPSession实例，但需要手动初始化Page.enable等基础命令，复杂度较高，建议使用轻量无头浏览器简化流程。

内容的提问来源于stack exchange，提问作者Muttonchop