Chrome扩展Manifest V3调用async异步函数无等待执行报错问题

问题根因 #

• 所有async函数的返回值都是Promise对象，你直接调用getCurrentTab()拿到的不是最终的tab实例，是处于Pending状态的Promise，此时访问tab.id自然是undefined，后续代码会直接执行不会等待异步逻辑完成。
• await语法只能在标记为async的函数内部使用，你原来的DOMContentLoaded事件回调没有加async声明，直接写await就会触发语法报错。事件回调完全支持async声明，没有使用限制。

解决方案 #

直接将事件回调声明为async类型，就可以在回调内正常使用await获取异步返回结果，不需要编写链式回调，逻辑可以按你期望的同步顺序编写：

修改后的popup.js代码

document.addEventListener('DOMContentLoaded', async function() {
    console.log('got tabs id');
    const tab = await getCurrentTab();
    // 拿到tab后所有依赖tab的逻辑都可以在这里按顺序编写，不需要链式调用
    console.log('Active tab ' + tab.id);
});    

async function getCurrentTab(){
    console.log('trying to get tabs id');
    const queryOptions = {active: true, currentWindow: true};
    try {
        const tabs = await chrome.tabs.query(queryOptions);
        console.log('Obtained tab ID');
        console.log(tabs);
        return tabs[0];
    } catch (err) {
        console.log('it failed');
        console.error(err);
        return;
    }
}

你原有manifest.json的权限配置是正确的，不需要修改。

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