Chrome扩展Manifest V3中Fetch无法获取Set-Cookie问题求助

1. 在Background脚本中获取Set-Cookie响应头 #

Chrome扩展的Background环境中，fetch/Axios默认会自动将Cookie存入对应域名的浏览器存储，不会直接在响应对象中暴露Set-Cookie头。要获取这个头，需使用**chrome.webRequest API**监听请求响应：

• 第一步：在manifest.json中声明必要权限：

{
  "permissions": ["webRequest", "webRequestBlocking", "cookies", "<all_urls>"],
  "host_permissions": ["https://your-campus-domain.com/*"]
}

（替换为你的校园账号实际域名）

• 第二步：在Background脚本中添加监听逻辑（TypeScript示例）：

chrome.webRequest.onHeadersReceived.addListener(
  (details) => {
    const setCookieHeaders = details.responseHeaders?.filter(
      header => header.name.toLowerCase() === 'set-cookie'
    );
    if (setCookieHeaders) {
      // 提取所有Set-Cookie头
      console.log('Set-Cookie headers:', setCookieHeaders);
      // 进一步提取原始Cookie值（忽略属性部分）
      const rawCookies = setCookieHeaders.map(h => h.value.split(';')[0]);
      console.log('Raw cookie values:', rawCookies);
    }
  },
  { urls: ["https://your-campus-domain.com/*"] },
  ["responseHeaders", "extraHeaders"] // extraHeaders确保获取完整响应头集合
);

2. 无需直接获取Cookie的自动登录方案 #

方案A：模拟登录表单提交（推荐） #

利用Background脚本不受CORS限制的特性，直接向校园登录接口提交凭证，浏览器会自动保存返回的Cookie，后续访问网站时自动带上：

async function autoLogin() {
  const loginForm = new FormData();
  loginForm.append('username', 'your-username');
  loginForm.append('password', 'your-password');
  
  await fetch('https://your-campus-domain.com/login', {
    method: 'POST',
    body: loginForm,
    credentials: 'include' // 自动处理Cookie存储
  });
  // 请求完成后，浏览器已保存登录Cookie，打开目标网站即可自动登录
}

方案B：用chrome.cookies API直接注入Cookie #

如果已经在CMD环境中拿到有效Cookie值，可直接通过API将Cookie注入浏览器存储：

async function injectCookie() {
  await chrome.cookies.set({
    url: 'https://your-campus-domain.com',
    name: 'session-id',
    value: 'your-session-value',
    domain: '.your-campus-domain.com', // 适配子域名的格式
    secure: true,
    httpOnly: true // 若Cookie为HttpOnly类型，需添加此参数
  });
}

3. 实现永久会话的方法 #

方法1：持久化存储Cookie并自动恢复 #

• 登录成功后，将带有过期属性的持久化Cookie存入chrome.storage.local：

async function saveCookies(cookies: chrome.cookies.Cookie[]) {
  await chrome.storage.local.set({ savedCookies: cookies });
}

• 扩展启动时，读取存储的Cookie并重新注入浏览器：

chrome.runtime.onStartup.addListener(async () => {
  const { savedCookies } = await chrome.storage.local.get('savedCookies');
  if (savedCookies) {
    for (const cookie of savedCookies) {
      // 跳过已过期的Cookie
      if (!cookie.expirationDate || cookie.expirationDate > Date.now() / 1000) {
        await chrome.cookies.set(cookie);
      }
    }
  }
});

方法2：监听Cookie状态自动刷新 #

• 通过chrome.cookies.onChanged监听登录Cookie的删除/过期事件，自动触发重新登录：

chrome.cookies.onChanged.addListener((changeInfo) => {
  if (changeInfo.cookie.name === 'session-id' && changeInfo.removed) {
    // 登录Cookie失效，重新执行登录流程
    autoLogin();
  }
});

方法3：定期校验会话有效性 #

• 定时请求需登录权限的接口（如用户信息接口），若返回未登录则重新登录：

async function checkSessionValidity() {
  const response = await fetch('https://your-campus-domain.com/user-info', {
    credentials: 'include'
  });
  if (response.status === 401) {
    // 会话失效，触发重新登录
    await autoLogin();
  }
}
// 每30分钟校验一次
setInterval(checkSessionValidity, 30 * 60 * 1000);

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