使用fetch API创建多cookie上下文实现Web扩展并行会话请求

针对Web扩展场景下全局Cookie导致的并行会话冲突问题，有3种可落地的解决方案：

方案1：手动管理独立Cookie池（推荐，性能最优） #

利用Web扩展的权限能力，绕开普通页面Fetch API的Cookie操作限制，为每个并行会话维护独立的Cookie存储，完全不依赖浏览器全局Cookie jar。

前置权限配置 #

在manifest.json中申请必要权限：

{
  "manifest_version": 3,
  "permissions": ["cookies"],
  "host_permissions": ["https://url.endpoint/*"],
  "background": {
    "service_worker": "background.js"
  }
}

代码实现（背景服务工作者中执行） #

// 解析Set-Cookie响应头为键值对
function parseSetCookie(setCookieStr) {
  const [keyValuePart] = setCookieStr.split(';');
  const [key, value] = keyValuePart.split('=');
  return { key: key.trim(), value: value.trim() };
}

// 单会话请求封装
async function runIsolatedSession(navigatePath) {
  // 每个会话独立维护Cookie池
  const sessionCookieMap = new Map();

  // 启动会话，禁用全局Cookie携带
  const startSessionResp = await fetch("https://url.endpoint/start_session", {
    credentials: "omit"
  });

  // 提取当前会话的Set-Cookie存入独立池
  const setCookieList = startSessionResp.headers.getSetCookie();
  setCookieList.forEach(cookieStr => {
    const { key, value } = parseSetCookie(cookieStr);
    sessionCookieMap.set(key, value);
  });

  // 手动拼接Cookie头请求业务接口
  const cookieHeader = Array.from(sessionCookieMap.entries())
    .map(([key, value]) => `${key}=${value}`)
    .join('; ');

  const dataResp = await fetch(`https://url.endpoint/${navigatePath}`, {
    credentials: "omit",
    headers: {
      'Cookie': cookieHeader
    }
  });

  return dataResp.json();
}

// 并行执行多个会话无冲突
const [usefulData1, usefulData2] = await Promise.all([
  runIsolatedSession('navigate_to_X'),
  runIsolatedSession('navigate_to_Y')
]);

注意事项 #

• 代码需在扩展的背景服务工作者、扩展独立页面等有权限的上下文中执行，内容脚本无操作跨域Cookie的权限
• 若会话生命周期内存在多步请求，每次响应返回的新Set-Cookie都需要同步更新到当前会话的Cookie池即可

方案2：隐身上下文隔离（无需手动管理Cookie） #

利用浏览器隐身窗口的Cookie隔离特性，每个会话分配独立的隐身上下文，由浏览器自动完成会话隔离，无需手动操作Cookie。

前置权限配置 #

{
  "manifest_version": 3,
  "permissions": ["tabs", "scripting"],
  "host_permissions": ["https://url.endpoint/*"],
  "incognito": "split"
}

代码实现 #

async function runSessionInIsolatedContext(navigatePath) {
  // 创建最小化的独立隐身窗口
  const incognitoWin = await chrome.windows.create({
    incognito: true,
    state: "minimized"
  });
  const sessionTab = incognitoWin.tabs[0];

  // 在隐身窗口中执行请求逻辑
  const [execResult] = await chrome.scripting.executeScript({
    target: { tabId: sessionTab.id },
    func: async (path) => {
      await fetch("https://url.endpoint/start_session", { credentials: "include" });
      const resp = await fetch(`https://url.endpoint/${path}`, { credentials: "include" });
      return resp.json();
    },
    args: [navigatePath]
  });

  // 销毁隐身窗口释放资源
  await chrome.windows.remove(incognitoWin.id);
  return execResult.result;
}

优缺点 #

• 优势：完全不用处理Cookie逻辑，浏览器原生实现隔离
• 劣势：创建隐身窗口有性能开销，仅适合并行数较少的场景

方案3：服务端鉴权改造（长期最优） #

如果可对接服务端做改造，建议将会话鉴权逻辑从Cookie改为Authorization请求头传递Token，每个会话独立存储自身Token即可，完全规避Cookie全局共享的冲突问题。

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