Chrome扩展内容脚本使用await报仅在async函数/模块顶层有效错误

你遇到的这个错误和Chrome扩展内容脚本（content script）的运行环境直接相关，核心触发逻辑如下：

• 报错的直接触发点是代码中let updateArray = await getFromStorage("toSaveArray");这行：await关键字只能在async函数内部、或者ES模块的顶层作用域使用，你这行代码直接写在了脚本的全局作用域，既没有被async函数包裹，当前运行环境也不支持顶层await，因此直接抛出语法错误。
• Chrome扩展默认注入的内容脚本是普通脚本上下文，不属于ES模块环境，原生不支持顶层await，这是触发报错的环境因素，和你封装getFromStorage的逻辑无关——你写的这个存储读取Promise封装本身是正确的，不需要修改。

你可以根据自己的扩展版本适配需求选任意一种方案：

方案1：async立即执行函数包裹（兼容性最好，无配置要求） #

把所有需要用到await的逻辑包裹在一个自执行的async函数里，不需要修改manifest配置，兼容所有支持Chrome扩展的浏览器版本：

const getFromStorage = async function(key) {
  return new Promise((resolve, reject) => {
    chrome.storage.sync.get(key, resolve);
  })
  .then(result => {
    if (key == null) return result;
    else return result[key];
  });
}

(async () => {
  // 所有需要await的逻辑、以及依赖异步返回值的逻辑都写在这个函数内部
  let updateArray = await getFromStorage("toSaveArray");
  console.log('读取到的存储值：', updateArray);
})();

方案2：开启内容脚本的ES模块模式（Manifest V3 + Chrome 63+ 支持） #

如果你使用Manifest V3开发扩展，可以在manifest.json中给对应内容脚本添加"type": "module"配置，开启后内容脚本会以ES模块模式运行，直接支持顶层await：

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["your-script-path.js"],
      "type": "module"
    }
  ]
}

注意：如果需要兼容63版本以下的Chrome，不要使用这个方案。

方案3：改用Promise链式调用（无需await） #

如果不想额外加包裹函数、也不想修改manifest配置，可以直接去掉await，用Promise原生的then方法处理异步返回结果：

getFromStorage("toSaveArray").then(updateArray => {
  // 所有依赖updateArray的逻辑写在then回调里
  console.log('读取到的存储值：', updateArray);
});

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