Puppeteer 18.0.5如何拦截ServiceWorker/WebWorker请求？现有方案失效

常见原因分析 #

• 命令执行时机滞后：若在页面加载完成后才发送Network.setBypassServiceWorker，ServiceWorker可能已激活并接管请求，导致设置失效
• 未覆盖所有上下文：主页面与WebWorker属于不同执行上下文，仅给主页面会话设置无法影响Worker发起的请求

可行解决方案 #

1. 提前在页面导航前执行命令 #

确保在页面初始化或跳转前完成CDP命令设置，避免ServiceWorker提前激活：

const browser = await puppeteer.launch();
const page = await browser.newPage();

// 先创建CDP会话并启用绕过
const client = await page.target().createCDPSession();
await client.send("Network.setBypassServiceWorker", { bypass: true });

// 再执行页面导航
await page.goto("你的目标页面URL");

2. 覆盖所有目标上下文（含WebWorker） #

针对页面中可能存在的WebWorker，监听所有新创建的目标并统一设置绕过规则：

const browser = await puppeteer.launch();
const page = await browser.newPage();

// 封装设置函数
async function enableBypass(target) {
  try {
    const client = await target.createCDPSession();
    await client.send("Network.setBypassServiceWorker", { bypass: true });
  } catch (err) {
    // 忽略无法创建CDP会话的非页面目标（如浏览器扩展）
  }
}

// 给当前主页面目标设置
await enableBypass(page.target());

// 监听新创建的目标（包括WebWorker）
browser.on("targetcreated", enableBypass);

await page.goto("你的目标页面URL");

3. 结合Network.enable确保命令生效 #

部分场景下，需先启用CDP的Network域，才能让setBypassServiceWorker命令生效：

const client = await page.target().createCDPSession();
await client.send("Network.enable");
await client.send("Network.setBypassServiceWorker", { bypass: true });

验证方法 #

可以通过以下方式确认设置是否生效：

• 查看浏览器Network面板，检查请求的Service-Worker-Navigation响应头是否为none
• 通过CDP监听Network.requestWillBeSent事件，确认请求的initiator.type不为serviceWorker

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