Chrome扩展v3：如何确保设置初始化完成后再执行后续逻辑？

问题根源在于chrome.runtime.onInstalled的回调和后续的chrome.storage.local.get是异步并行执行的——首次安装时，get请求可能在set配置的操作完成前就返回，导致拿到undefined。

下面提供两种可靠的解决思路：

方法一：统一初始化逻辑（推荐） #

将配置初始化、菜单创建的逻辑整合到一个异步函数中，同时覆盖首次安装、扩展启动两种场景，彻底避免竞态：

const DEFAULT_SETTINGS = {
  enableContextMenu: true,
};

// 统一处理配置初始化与菜单逻辑
async function initExtension() {
  // 获取配置，若不存在则使用默认值
  const { enableContextMenu } = await chrome.storage.local.get(DEFAULT_SETTINGS);
  
  // 先清除已有菜单，避免重复创建报错
  await chrome.contextMenus.removeAll();
  
  if (enableContextMenu) {
    chrome.contextMenus.create({
      id: 'extension-contextmenu',
      title: 'Extension Menu',
      type: 'normal',
      contexts: ['link'],
    });
  }
}

// 扩展安装/更新时执行
chrome.runtime.onInstalled.addListener(async (details) => {
  if (details.reason === 'install') {
    // 首次安装写入默认配置
    await chrome.storage.local.set(DEFAULT_SETTINGS);
  }
  // 初始化扩展逻辑
  await initExtension();
});

// 扩展每次启动时执行初始化
initExtension();

这种方式的优势是逻辑集中，不管是首次安装还是后续启动，都能保证配置就绪后再执行菜单操作，同时通过removeAll避免重复创建菜单的报错。

方法二：利用get方法的默认值特性 #

chrome.storage.local.get支持传入对象作为参数，当存储中不存在对应键时，会返回对象里的默认值。直接用这个特性就能绕开竞态问题：

const DEFAULT_SETTINGS = {
  enableContextMenu: true,
};

chrome.runtime.onInstalled.addListener(details => {
  if (details.reason === 'install') {
    chrome.storage.local.set(DEFAULT_SETTINGS);
  }
});

chrome.storage.local
  .get(DEFAULT_SETTINGS) // 传入默认值，不存在时自动返回true
  .then(({ enableContextMenu }) => {
    // 先清除旧菜单
    chrome.contextMenus.removeAll(() => {
      if (enableContextMenu) {
        chrome.contextMenus.create({
          id: 'extension-contextmenu',
          title: 'Extension Menu',
          type: 'normal',
          contexts: ['link'],
        });
      }
    });
  });

这种方式更简洁，首次启动时即使set还没完成，get也能拿到预设的默认值，后续存储完成后，下次启动会读取存储中的真实配置。

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