Chrome扩展content.js写入chrome.storage后background.js读值undefined

核心问题根因 #

• 异步API使用错误：chrome.storage.local.get是异步非阻塞API，现有代码在调用get后立刻在外层判断返回值，此时回调函数还未执行，变量始终为undefined，这是读取失败的核心原因。
• 内容脚本匹配规则失效：manifest中content_scripts.matches配置为["https://*/"]，仅匹配HTTPS站点的根路径（即域名后无其他路径的地址），所有二级路径页面都不会注入content.js，自然不会执行存储写入逻辑。
• 取值逻辑错误：chrome.storage.local.get返回的结果是包含所有查询key的对象，例如查询fromPanel时返回结构为{fromPanel: 存储值}，直接将整个结果对象当存储值使用会取不到对应属性。
• 其他隐性bug：存储写入的错误回调中引用了未定义的key/data变量会抛错；异步回调中调用sendResponse未返回true会导致消息通道提前关闭，响应无法送达。

分步修复方案 #

1. 修正manifest的内容脚本匹配规则
   替换原有过窄的匹配规则，确保需要注入脚本的页面都能命中：

   // 若需要匹配所有站点可使用通配规则
   "matches": ["<all_urls>"]
   // 若仅需匹配自有门户+合作商家站点，可写精准规则
   // "matches": ["https://*.你的门户域名.com/*", "https://*.合作商家域名.com/*"]
   

2. 重写background.js的消息监听逻辑，所有依赖存储值的逻辑全部放入get回调内，修复异步时序、取值错误、消息通道问题：

   chrome.runtime.onMessage.addListener(
       function(message, sender, sendResponse) {
           switch (message.type) {
               case "couponcheck":
                   const couponCheck = message.data;
                   console.log('couponCheck was hit', couponCheck.website);
                   chrome.storage.local.get("fromPanel", function (result) {
                       // 从返回结果中取对应key的存储值
                       const fromPanel = result.fromPanel;
                       if (fromPanel && fromPanel !== false){
                           couponCheck.id = fromPanel.id;
                           couponCheck.username = fromPanel.username;
                           ajaxCall("POST", "user/couponCheck", couponCheck, '', function(response){
                               console.log('response from server is: ',response);
                               sendResponse(response);
                           });
                           // 修复错误回调中的未定义变量问题
                           chrome.storage.local.set({"fromPanel": false}, function() {
                               if(chrome.runtime.lastError) {
                                   console.error(
                                       "Error reset fromPanel flag: " + chrome.runtime.lastError.message
                                   );
                               }
                           });
                       }
                       else {
                           ajaxCall("POST", "user/couponCheck", couponCheck, '', function (response) {
                               console.log('response from server is: ', response);
                               sendResponse(response);
                           });
                       }
                   });
                   // 异步场景下必须返回true，保持消息通道开放直到sendResponse被调用
                   return true;
           }
       })
   

3. 修正content.js的存储写入逻辑，等写入完成后再触发页面跳转，避免时序问题：

   const currentUrl = window.location.href;
   if (currentUrl.indexOf("couponPortal") !== -1) {
       // 卡片点击事件中拿到优惠券数据后执行存储
       const couponData = { /* 你从卡片DOM中取到的id、username等数据 */ };
       chrome.storage.local.set({"fromPanel": couponData}, function () {
           if (chrome.runtime.lastError) {
               console.error(
                   "Error save fromPanel data: " + chrome.runtime.lastError.message
               );
               return;
           }
           // 存储成功后再打开商家页，避免数据未写入完成就触发新页面请求
           window.open(/* 对应商家站点地址 */);
       });
   } else {
       sendToBackground('couponCheck', {URL: currentUrl});
       // 其余业务逻辑
   }
   

测试验证注意点 #

• 不要在扩展刚加载完成时就去background控制台读存储值，此时还未打开过匹配规则命中的页面，content.js未执行，存储中自然没有对应数据。
• 先打开任意匹配规则的页面，在页面开发者工具的Console中切换到content script上下文，执行chrome.storage.local.get(null, data => console.log(data))确认测试数据已写入，再打开扩展的背景页控制台读取值即可正常获取。

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