Chrome扩展中点击事件处理器调用异步函数时，如何确保配置加载完成后再执行tabs.create

嗨，我明白你的困扰了——你想让tabs.create等配置加载完成后再执行，但异步函数本身没法改成阻塞调用，因为JavaScript是单线程的，阻塞主线程会直接导致浏览器界面卡死，这是绝对要避免的操作。不过我们可以用异步编程的正确姿势来解决这个问题，让代码按预期顺序执行。

先说说你原代码的核心问题：chrome.contextMenus.onClicked的回调是同步执行的，你调用loadConfig()后立刻就执行了chrome.tabs.create，这时候loadConfig里的fetch请求还没完成，globalconfig自然还是初始的空值。

下面是修改后的可行方案，核心是把回调改成异步函数，用await等待配置加载完成：

let globalconfig = "";
// 加个标记，避免多次点击重复发起加载请求
let isLoadingConfig = false;

async function loadConfig() {
  if (isLoadingConfig) return;
  isLoadingConfig = true;
  try {
    const response = await fetch(chrome.runtime.getURL('config.json'));
    if (!response.ok) {
      throw new Error("Invalid response");
    }
    globalconfig = await response.json();
  } catch (err) {
    console.error("加载配置失败:", err);
    // 这里可以给用户加个错误提示，比如用chrome.notifications弹通知
  } finally {
    isLoadingConfig = false;
  }
}

// 把监听回调改成async函数，这样就能用await了
chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  // 如果配置还没加载，就等待加载完成
  if (globalconfig === "") {
    await loadConfig();
  }
  // 这里要判断配置是否加载成功，避免空值导致打开无效标签页
  if (globalconfig) {
    chrome.tabs.create({url: globalconfig, active: true, index: tab.index + 1});
  } else {
    console.error("配置加载失败，无法打开目标标签页");
  }
});

另外还有个更优的思路：可以在扩展启动的时候就预加载配置，而不是等用户点击菜单才加载，这样用户第一次点击就能直接使用，体验更好：

let globalconfig = "";

async function loadConfig() {
  try {
    const response = await fetch(chrome.runtime.getURL('config.json'));
    if (!response.ok) {
      throw new Error("Invalid response");
    }
    globalconfig = await response.json();
  } catch (err) {
    console.error("预加载配置失败:", err);
  }
}

// 扩展启动时立刻加载配置
loadConfig();

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (globalconfig) {
    chrome.tabs.create({url: globalconfig, active: true, index: tab.index + 1});
  } else {
    console.error("配置还未加载完成，请稍后再试");
    // 也可以在这里触发一次加载并等待，和第一种方案的逻辑结合
  }
});

总结一下：JavaScript里不存在“阻塞式的异步函数”，我们要做的是利用async/await让代码按预期的顺序异步执行，同时处理好错误和重复请求的情况，这样既不会阻塞界面，又能保证配置加载完成后再执行后续操作。

内容来源于stack exchange