如何在Puppeteer中切换非IFrame类型的JavaScript上下文？

DevTools里的非iframe上下文通常是Web Worker或浏览器扩展注入的隔离环境，这类环境无法通过page.frames()获取，以下是针对不同场景的解决方案：

1. 访问Web Worker上下文 #

Puppeteer提供page.workers()方法直接获取页面中的所有Web Worker实例，你可以通过URL匹配定位目标Worker，再用evaluate()交互：

// 获取页面所有Web Worker
const workers = await page.workers();
// 按脚本URL筛选目标Worker
const targetWorker = workers.find(worker => worker.url().includes("target-worker.js"));
// 访问Worker内的变量或执行代码
const workerVarValue = await targetWorker.evaluate(() => {
  return window.targetVariable; // 替换为Worker中的实际变量名
});
console.log(workerVarValue);

2. 访问浏览器扩展上下文 #

若目标是扩展注入的上下文，需要在启动浏览器时加载扩展，再通过target API定位扩展页面：

const puppeteer = require('puppeteer');
const path = require('path');

// 启动浏览器并加载指定扩展
const browser = await puppeteer.launch({
  args: [
    `--disable-extensions-except=${path.resolve('./your-extension-folder')}`,
    `--load-extension=${path.resolve('./your-extension-folder')}`
  ]
});

// 筛选扩展目标（背景页或内容脚本上下文）
const targets = await browser.targets();
const extensionTarget = targets.find(target => 
  target.type() === "background_page" || target.url().startsWith("chrome-extension://")
);

// 创建扩展页面实例并交互
const extensionPage = await extensionTarget.page();
const extensionVarValue = await extensionPage.evaluate(() => {
  return window.extensionInternalVariable; // 替换为扩展内的实际变量
});
console.log(extensionVarValue);

3. 通用方案：直接调用DevTools协议 #

如果以上方法不适用，可通过Puppeteer的底层DevTools协议接口，手动切换上下文执行代码：

// 获取当前所有执行上下文
const { contexts } = await page._client.send("Runtime.executionContexts");
// 按名称/类型筛选目标上下文（对应DevTools中显示的上下文名称）
const targetContext = contexts.find(ctx => ctx.name === "TargetContextName");

// 在目标上下文中执行代码并获取结果
const { result } = await page._client.send("Runtime.evaluate", {
  expression: "targetVariableName",
  contextId: targetContext.id,
  returnByValue: true
});
console.log(result.value);

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