如何等待chrome.storage.sync.set完成后再读取存储数据？

核心问题分析 #

• 首次调用打印空数组的问题本质是异步操作顺序错误：
  1. popup.js中，你在chrome.storage.sync.get的回调里用了await set，但最后打印的是回调初始拿到的result.dataObj（旧数据），并非更新后的数据；
  2. options.js中的chrome.storage.sync.set是异步操作，未等待完成就执行后续逻辑，可能导致存储状态不一致；
  3. 回调式API与async/await混合使用，造成异步流程混乱。

修复步骤 #

1. 统一使用Promise版存储API #

Chrome 88及以上版本支持chrome.storage的Promise版本，无需嵌套回调，用async/await即可清晰控制异步顺序。

2. 修改options.js代码 #

async function clear_history() {
  const result = await chrome.storage.sync.get("dataObj");
  await chrome.storage.sync.set({ dataObj: [] });
  console.log("whats left:", result.dataObj + " " + result.dataObj.length);
}

document.getElementById("clear").addEventListener("click", clear_history);

• 用await等待set操作完成，确保存储状态更新后再执行后续逻辑；
• 改用Promise版API，消除回调嵌套。

3. 修改popup.js代码 #

document.addEventListener("DOMContentLoaded", async function () {
  console.log("welcome to popup.js");
  const response = await chrome.runtime.sendMessage({ greeting: "hey" });
  const x = response.farewell;
  console.log(x);

  document.getElementById("options").addEventListener("click", function () {
    console.log("redirecting to options");
    chrome.runtime.openOptionsPage();
  });

  document.getElementById("ten-seconds").addEventListener("click", async function () {
    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
    const activeTab = tabs[0];
    const result = await chrome.storage.sync.get("dataObj");
    let tabArray;

    if (!result.dataObj || result.dataObj.length === 0) {
      console.log("EMPTY");
      tabArray = [activeTab.url];
    } else {
      tabArray = [...result.dataObj]; // 浅拷贝原数组，避免直接修改存储对象
      tabArray.push(activeTab.url);
    }

    await chrome.storage.sync.set({ dataObj: tabArray });
    // 打印更新后的数组，而非旧的result.dataObj
    console.log("array: ", tabArray);
  });
});

• 将所有回调式API替换为Promise版，用async/await控制执行顺序；
• 打印更新后的tabArray，而非异步操作开始前获取的旧数据；
• 新增result.dataObj不存在的判断（适配首次使用、无存储键的场景）；
• 用扩展运算符浅拷贝原数组，避免直接修改存储返回的对象引发意外问题。

关键注意点 #

• 确保Chrome版本在88以上，支持Promise版chrome.storage API；
• 必须用await或回调等待异步操作完成后，再执行依赖该操作的逻辑；
• 打印数据时，要确认打印的是更新后的数据，而非异步操作启动前的旧数据。

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