Chrome扩展Manifest3同步调用chrome.storage的Promise问题排查

问题本质 #

你遇到的核心问题是JavaScript单线程异步模型的限制：异步操作（比如chrome.storage的回调）不会阻塞当前函数执行，你的getItemPromise在异步任务完成前就返回了未赋值的returnvalue，所以结果是undefined。加debugger时，暂停的时间足够异步操作完成，returnvalue被赋值，因此能拿到正确结果。

错误代码分析 #

• getItemPromise内部的立即执行async函数是一个异步任务，会被放入事件队列等待执行，而主函数会直接执行return returnvalue，此时returnvalue还未被赋值，自然返回undefined。
• Chrome的chrome.storage API本身是异步的，不存在真正的同步调用方式，强行模拟同步只会导致逻辑错误。

修复方案 #

1. 简化异步存储封装函数 #

利用Chrome Manifest V3中chrome.storage原生支持Promise的特性，简化存储读取函数：

const getObjectFromSessionStorage = async (key) => {
  const value = await chrome.storage.session.get(key);
  if (chrome.runtime.lastError) {
    throw chrome.runtime.lastError;
  }
  if (typeof value[key] === 'undefined') {
    throw new Error(`undefined:${key}`);
  }
  return value[key];
};

// 同理实现localStorage的封装
const getObjectFromLocalStorage = async (key) => {
  const value = await chrome.storage.local.get(key);
  if (chrome.runtime.lastError) {
    throw chrome.runtime.lastError;
  }
  if (typeof value[key] === 'undefined') {
    throw new Error(`undefined:${key}`);
  }
  return value[key];
};

2. 修正getItemPromise让它返回Promise #

让getItemPromise本身成为async函数，直接返回异步操作的结果（本质是返回Promise）：

const getItemPromise = async (session, key) => {
  return session 
    ? await getObjectFromSessionStorage(key) 
    : await getObjectFromLocalStorage(key);
};

3. 调用时正确处理Promise #

调用方必须通过await或.then()来获取异步结果，不能直接同步获取：

chrome.storage.session.set({'TEST': 'HELLO'}, async () => {
  if (chrome.runtime.lastError) {
    console.log(chrome.runtime.lastError);
  }

  chrome.storage.session.get('TEST', (value) => {
    if (chrome.runtime.lastError) {
      console.log(chrome.runtime.lastError);
    }
    console.log('回调方式获取:', value);
  });

  // 使用await获取结果（必须在async函数内）
  try {
    const result = await getItemPromise(true, 'TEST');
    console.log('async/await方式获取:', result);
  } catch (err) {
    console.error('读取失败:', err);
  }
});

关于同步调用的说明 #

JavaScript中无法在同步函数内直接获取异步操作的结果，这是由单线程异步模型决定的。如果你的项目有大量同步代码需要复用，建议：

• 将这些同步代码封装为async函数，统一使用async/await处理异步逻辑
• 对于网页环境的兼容，可以封装统一的存储接口，在网页端使用localStorage的同步API，在扩展端使用异步API并通过async/await适配

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