Chrome扩展中chrome.storage.session数据丢失问题排查求助

问题背景 #

扩展运行逻辑如下：

1. 点击popup按钮触发打开10个标签页，执行页面脚本生成目标链接：

scrapeRiassunto.addEventListener("click", async () => {
  await chrome.storage.session.clear();
  let [tab] = await chrome.tabs.query({active:true, currentWindow: true});
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    func: getAllMatches,
    args:[0,from_partita,to_partita,"riassunto"]
  });
});

2. Background脚本通过chrome.tabs.onUpdated监听标签页加载完成，执行爬取脚本并更新会话存储：

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
  var exUrl = ''
  if (changeInfo.status === 'complete' && tab.url.search(/<link>/i) != -1) {
    exUrl = tab.url;
    console.log("executing scraping script");
    chrome.scripting.executeScript({
      target: {tabId: tab.id},
      func: scrapeRiassuntoFromPage,
    });
  }
});

3. 爬取脚本获取页面数据后更新存储：

//scraping data from tab... and update storage  
chrome.storage.session.get(function(cfg) {
  if(typeof(cfg["riassunti"]) !== 'undefined' && cfg["riassunti"] instanceof Array) { 
    cfg["riassunti"].push(riassuntoEvento);
  } else {
    cfg["riassunti"] = [riassuntoEvento];
  }
  chrome.storage.session.set(cfg); 
}); 
chrome.runtime.sendMessage({riassuntoEvento, from: "scrapeRiassuntoFromPage"});

4. 点击popup导出按钮，从会话存储获取数据生成CSV：

exportBtn.addEventListener("click", async () => {
  if(document.getElementById("linkCSV")){
    document.getElementById("linkCSV").remove();
  }
  const scrapedData = await chrome.storage.session.get();
  console.log(scrapedData); 
  // ... 生成CSV逻辑
});

目前扩展多数情况正常，但偶尔丢失部分标签页数据，以下是具体排查方向：

1. 修复会话存储的并发竞态问题 #

当前的存储更新逻辑存在竞态：多个标签页同时执行get操作时，会读取到相同的数组状态，后续的push和set会覆盖彼此的修改，导致数据丢失。

优化方案：改用异步/await写法确保存储操作的原子性：

const scrapeRiassuntoFromPage = async () => {
  // ... 先完成页面数据爬取，得到riassuntoEvento
  // 原子化更新存储
  const storedData = await chrome.storage.session.get("riassunti");
  const riassuntiList = storedData.riassunti || [];
  riassuntiList.push(riassuntoEvento);
  await chrome.storage.session.set({ riassunti: riassuntiList });
  
  chrome.runtime.sendMessage({ riassuntoEvento, from: "scrapeRiassuntoFromPage" });
};

2. 修正标签页监听的触发条件 #

• 正则匹配错误：当前判断tab.url.search(/<link>/i) != -1中的<link>是HTML转义字符，实际URL中应为原始字符（如link），否则会导致部分符合条件的标签页无法触发爬取。
• 重复爬取/遗漏爬取：tabs.onUpdated会在页面重定向等场景多次触发，可能导致重复爬取或遗漏。建议添加已爬取标签页的记录：

const scrapedTabIds = new Set();

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  // 替换为实际需要匹配的URL规则
  const validUrl = /你的目标URL关键词/i.test(tab.url);
  if (changeInfo.status === 'complete' && validUrl && !scrapedTabIds.has(tabId)) {
    scrapedTabIds.add(tabId);
    console.log(`开始爬取标签页：${tabId}`);
    try {
      await chrome.scripting.executeScript({
        target: { tabId: tabId },
        func: scrapeRiassuntoFromPage,
      });
    } catch (err) {
      console.error(`标签页${tabId}爬取失败：`, err);
      scrapedTabIds.delete(tabId); // 失败后移除记录，允许重试
    }
  }
});

// 标签页关闭时清理记录，避免内存占用
chrome.tabs.onRemoved.addListener(removedId => scrapedTabIds.delete(removedId));

3. 确保页面数据完全加载 #

标签页状态complete仅表示DOM加载完成，但页面动态渲染的内容（如AJAX加载的数据）可能尚未就绪，导致爬取不到数据。

优化方案：在爬取脚本中等待目标元素出现：

const scrapeRiassuntoFromPage = async () => {
  // 等待目标元素加载完成
  const waitForTargetElement = (selector) => {
    return new Promise(resolve => {
      const existingElement = document.querySelector(selector);
      if (existingElement) return resolve(existingElement);

      const observer = new MutationObserver((mutations) => {
        const element = document.querySelector(selector);
        if (element) {
          observer.disconnect();
          resolve(element);
        }
      });
      observer.observe(document.body, { childList: true, subtree: true });
    });
  };

  // 替换为你需要爬取的元素选择器
  const targetElement = await waitForTargetElement(".riassunto-element");
  // 从目标元素提取数据
  const riassuntoEvento = targetElement.textContent.trim();
  
  // 后续存储逻辑...
};

4. 检查会话存储的生命周期限制 #

• 如果是Manifest V3，Service Worker可能会休眠，导致chrome.storage.session数据丢失。建议临时改用chrome.storage.local存储爬取数据，导出后再清理；
• 确保background脚本配置正确：Manifest V2需设置"persistent": true，V3需避免Service Worker在爬取过程中被回收。

5. 增强日志与调试 #

在关键步骤添加日志，便于定位问题：

• 在scrapeRiassuntoFromPage中打印爬取到的数据和当前标签页ID；
• 存储更新后打印当前数组长度；
• 导出时打印存储中数据的总条数，对比预期的10条；
• 打开background页面的控制台（chrome://extensions/ → 扩展详情 → Inspect views），查看是否有脚本执行错误或存储操作报错。

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