如何使用Puppeteer读取Chrome扩展程序的网络请求

你遇到的问题很常见——默认情况下，Puppeteer监听的是普通网页页面的网络请求，而Chrome扩展的请求（比如背景页、Service Worker或内容脚本发起的请求）属于独立的DevTools目标（Target），不会被普通页面的request/response事件捕获。下面是具体的解决思路和代码实现：

核心原因 #

Chrome扩展的各个组件（背景页、Service Worker、弹出页等）都对应DevTools中的独立目标，和你通过browser.newPage()创建的普通页面目标是分开的。你的当前代码只监听了新打开的github页面目标的网络活动，自然抓不到扩展发起的请求。

解决步骤 #

1. 获取浏览器中所有的目标，筛选出属于你的扩展的目标（比如背景页/Service Worker）
2. 连接到扩展目标对应的页面，然后监听该页面的网络请求事件

具体代码实现 #

const puppeteer = require('puppeteer');

(async () => {
  // 连接到已启动的Chrome实例
  const browser = await puppeteer.connect({
    browserWSEndpoint: 'ws://localhost:9222/devtools/browser/e27e967f-711'
  });

  // 1. 获取所有浏览器目标，筛选出扩展的背景页/Service Worker
  // 替换成你的扩展ID（可从chrome://extensions/开发者模式下查看）
  const extensionId = "你的扩展ID";
  const extensionTargets = await browser.targets().filter(target => {
    return (target.type() === 'service_worker' || target.type() === 'background_page')
           && target.url().includes(`chrome-extension://${extensionId}/`);
  });

  // 2. 遍历扩展目标，监听每个目标的网络请求
  for (const target of extensionTargets) {
    const extensionPage = await target.page();
    if (!extensionPage) continue;

    // 启用请求拦截
    await extensionPage.setRequestInterception(true);
    
    // 监听扩展发起的请求
    extensionPage.on('request', request => {
      console.log('扩展发起的请求:', request.url());
      request.continue();
    });

    // 监听扩展请求的响应
    extensionPage.on('response', response => {
      const req = response.request();
      console.log('扩展请求响应:', response.status(), req.url());
    });
  }

  // 同时保留原有的页面监听逻辑（如果需要）
  const page = await browser.newPage();
  await page.goto('https://github.com');
  await page.setRequestInterception(true);
  
  page.on('request', request => {
    console.log('页面发起的请求:', request.url());
    request.continue();
  });
  
  page.on('response', response => {
    const req = response.request();
    console.log('页面请求响应:', response.status(), req.url());
  });
})();

额外说明 #

• 如果你的扩展有弹出页，可筛选类型为page且URL包含chrome-extension://你的扩展ID/popup.html的目标进行监听
• 内容脚本发起的请求会归属到所在网页的目标，可通过原页面的监听逻辑捕获这类请求
• 现代扩展多使用Service Worker替代传统背景页，所以需要同时兼容两种目标类型的筛选

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