Chrome扩展：在background.js获取Cookie并向content.js响应时遇问题

我之前也碰到过一模一样的情况——单独用Chrome消息通信或者chrome.cookies.get都正常，俩放一起就出问题，大概率是异步操作的顺序没处理对，或者是权限配置有遗漏，咱们一步步来排查解决：

第一步：先确认manifest.json的权限配置 #

chrome.cookies.get可不是随便就能用的，必须在扩展的manifest.json里声明对应权限，不然哪怕你代码写对了也拿不到Cookie。示例配置如下：

{
  "manifest_version": 3, // 如果你用的是V2就写2，建议优先升级V3
  "permissions": [
    "cookies",
    "*://your-website-domain.com/*" // 替换成你自己网站的域名，必须和Cookie绑定的域名一致
  ],
  "background": {
    "service_worker": "background.js" // V3用service_worker，V2用scripts字段
  },
  "content_scripts": [
    {
      "matches": ["*://third-party-domain.com/*"], // 替换成你要注入通知组件的第三方网站域名
      "js": ["content.js"]
    }
  ]
}

一定要注意：cookies权限和目标网站的主机权限缺一不可，域名写错的话，Cookie根本拿不到。

第二步：处理异步操作的核心问题 #

chrome.cookies.get是异步API，如果你直接在它外面发送消息，大概率会出现“还没拿到userId就发了空消息”的情况，或者消息通道提前关闭。这里分两种场景给你正确的代码示例：

场景1：content.js主动向background请求userId #

这种场景最常见——content.js加载后，主动问background要userId来判断登录状态：

content.js 代码

// 主动发起消息请求，获取userId
chrome.runtime.sendMessage({ action: "fetchUserId" }, (response) => {
  if (response.userId) {
    // 拿到userId，执行已登录的逻辑（比如显示通知组件）
    console.log("用户已登录，ID：", response.userId);
  } else {
    // 用户未登录，执行对应逻辑
    console.log("用户未登录");
  }
});

background.js 代码

// 监听content.js的消息请求
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "fetchUserId") {
    // 异步获取Cookie
    chrome.cookies.get({ 
      url: "https://your-website-domain.com", // 必须和Cookie的域名完全匹配
      name: "userId" // 替换成你Cookie里存储userId的键名
    }, (cookie) => {
      if (cookie) {
        sendResponse({ userId: cookie.value });
      } else {
        sendResponse({ userId: null });
      }
    });
    // 关键！必须返回true，告诉Chrome要等待异步响应
    return true;
  }
});

这里的return true是重中之重——如果不写，Chrome会在chrome.cookies.get的回调执行前就关闭消息通道，导致sendResponse失效，这是90%的人会踩的坑！

场景2：background.js主动向content.js推送userId #

比如第三方页面加载完成后，background主动把userId发过去：

background.js 代码

// 监听页面加载完成事件
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 确认是目标第三方网站，且页面加载完成
  if (changeInfo.status === "complete" && tab.url.includes("third-party-domain.com")) {
    // 先异步获取Cookie
    chrome.cookies.get({ 
      url: "https://your-website-domain.com",
      name: "userId"
    }, (cookie) => {
      const userId = cookie ? cookie.value : null;
      // 拿到userId后，再向content.js发送消息
      chrome.tabs.sendMessage(tabId, { 
        type: "loginStatus", 
        userId: userId 
      });
    });
  }
});

content.js 代码

// 监听background发来的消息
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === "loginStatus") {
    if (message.userId) {
      console.log("用户已登录，ID：", message.userId);
      // 渲染已登录的通知组件
    } else {
      console.log("用户未登录");
      // 渲染未登录的提示
    }
  }
});

最后排查小技巧 #

如果还是有问题，打开Chrome的扩展开发者工具（在chrome://extensions/页面找到你的扩展，点击「详情」→「服务工作者」），查看background的控制台：

• 有没有权限报错？比如Missing required permissions for cookies，那就是manifest的权限没配对
• 有没有Cookie找不到的提示？那就是chrome.cookies.get的url或name写错了
• 有没有消息发送失败的提示？检查消息的action/type是否匹配，或者tabId是否正确

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