Chrome扩展中storage.local变量更新无效问题排查

问题根源 #

你的代码逻辑本身没问题，但Chrome的chrome.storage.local API是异步操作。你当前同步调用resetApiCalls()、updateApiCalls()、printApiCalls()三个函数时，三个异步操作是并行触发的：

1. 触发resetApiCalls的set操作（还未完成）
2. 触发updateApiCalls的get操作（还未拿到值）
3. 触发printApiCalls的get操作（此时storage里的apiCalls仍是初始的0，因为updateApiCalls的修改还未完成）

printApiCalls不会等待updateApiCalls的修改完成再执行，所以最终输出初始值0。

修正方案 #

使用async/await处理异步流程，保证操作按顺序执行：

const resetApiCalls = async () => {
    await chrome.storage.local.set({"apiCalls": 0});
};

const updateApiCalls = async () => {
    const items = await chrome.storage.local.get(["apiCalls"]);
    await chrome.storage.local.set({"apiCalls": items.apiCalls + 1});
};

const printApiCalls = async () => {
    const items = await chrome.storage.local.get(["apiCalls"]);
    console.log("apicalls:  " + items.apiCalls);
};

// 用立即执行异步函数按顺序调用
(async () => {
    await resetApiCalls();
    await updateApiCalls();
    await printApiCalls();
})();

也可以用Promise链式调用实现：

resetApiCalls()
    .then(() => updateApiCalls())
    .then(() => printApiCalls());

注意：chrome.storage的方法本身返回Promise，所以只需用await等待操作完成，或直接用then链式处理即可。

方向确认 #

你没走错方向，chrome.storage.local正是Chrome扩展中用于跨页面持久化存储的标准方案，适合存储需要在扩展的background、popup、content script等不同页面共享的状态变量。

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