如何用chrome.storage重构异步场景下的全局变量？复杂场景示例解析

当从持久化MV2后台脚本迁移到MV2事件页或MV3 Service Worker时，必须移除全局变量——因为事件页/Service Worker会在闲置时被销毁，全局变量无法持久化。现有指南大多只展示单个变量的简单替换，这里针对你提供的数组+变量的复杂场景给出具体重构方案。

原代码片段 #

const activatedTabs = [];
let lastActiveTabInfo;
chrome.tabs.onActivated.addListener((activeInfo) => {
  if (activatedTabs.length === 0) {
    activatedTabs.push(activeInfo.tabId);
    lastActiveTabInfo = activeInfo;
  }
});

重构后的代码 #

// 定义存储键名，统一管理存储的数据
const TAB_ACTIVATION_STORAGE_KEY = 'tabActivationData';

// 使用async/await处理异步存储操作
chrome.tabs.onActivated.addListener(async (activeInfo) => {
  // 1. 从chrome.storage读取已保存的数据
  const storageData = await chrome.storage.local.get(TAB_ACTIVATION_STORAGE_KEY);
  const tabData = storageData[TAB_ACTIVATION_STORAGE_KEY] || {
    activatedTabs: [],
    lastActiveTabInfo: null
  };

  // 2. 执行原业务逻辑
  if (tabData.activatedTabs.length === 0) {
    tabData.activatedTabs.push(activeInfo.tabId);
    tabData.lastActiveTabInfo = activeInfo;
  }

  // 3. 将修改后的数据写回chrome.storage
  await chrome.storage.local.set({
    [TAB_ACTIVATION_STORAGE_KEY]: tabData
  });
});

关键说明 #

• 异步处理：chrome.storage的读写都是异步操作，用async/await简化异步流程（MV3 Service Worker和MV2事件页均支持该语法）。
• 统一存储结构：把activatedTabs和lastActiveTabInfo放在同一个对象中存储，减少读写次数，提升效率。
• 初始值处理：第一次运行时storage中没有数据，设置默认的空数组和null值，避免报错。
• 存储选择：这里用chrome.storage.local，因为数据不需要同步到用户的其他设备；如果需要跨设备同步，可改用chrome.storage.sync（注意同步存储有容量限制）。

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