后台Service Worker中事件监听器引用数据更新问题咨询

一、data更新时的引用与onClicked中的表现 #

在Service Worker未被Chrome终止的前提下，data作为全局对象，所有对它的修改都会直接作用于这个对象本身。由于onClicked回调使用的是同一个对象引用，后续触发contextMenus.onClicked时，读取到的data必然是更新后的状态——引用会保留，更新会直接在处理流程中体现。

二、Service Worker重启后的问题及正确做法 #

Chrome的Service Worker是临时运行的，扩展闲置一段时间后会被自动终止。如果chrome.storage.onChanged触发时Service Worker已经被销毁，就会重新启动并从头执行代码，这时候全局的let data会重新初始化，之前在onChanged里做的更新会完全丢失。

所以直接更新全局data对象并非可靠做法，更稳妥的方案有两种：

• 每次需要使用data时（比如onClicked回调内），直接从chrome.storage读取最新值；
• 用全局data做缓存减少存储读取次数，但必须保证Service Worker启动时（初始化阶段）主动从chrome.storage加载一次数据，覆盖初始默认值。

优化后的代码示例：

// background service worker

let data = {};

// 初始化时从storage加载最新数据
async function initData() {
  const storedData = await chrome.storage.local.get('data');
  data = storedData.data || { /* 这里放默认值 */ };
}

// 启动时立即初始化
initData();

chrome.contextMenus.onClicked.addListener(() => {
  // 直接使用缓存的data（前提是初始化和onChanged都正确更新了它）
  processData(data);
  
  // 极端场景下也可以在这里重新读取，确保拿到最新值
  // const storedData = await chrome.storage.local.get('data');
  // const currentData = storedData.data || { /* 默认值 */ };
  // processData(currentData);
});

chrome.storage.onChanged.addListener((changes) => {
  if (changes.data) {
    data = changes.data.newValue;
  }
});

这样无论Service Worker是否重启，都能保证使用的是chrome.storage中的最新数据，同时利用全局变量做缓存提升性能。

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