Chrome扩展多chrome.runtime.sendMessage调用执行顺序异常如何解决

根因说明 #

• 你现有的两个函数均为异步回调实现，调用createContainer1()仅会触发read_cont1消息发送，不会等待HTML注入完成就会立刻执行fetchWeb()，两个异步任务的返回顺序不受调用顺序控制，若fetchData()执行耗时短于读取本地HTML的耗时，就会出现fetchWeb先执行完毕的问题
• 之前改造Promise后未生效，是因为没有等待createContainer1的异步逻辑执行完成就调用了fetchWeb，两个异步任务仍处于并行执行状态

修复步骤 #

1. 改造content.js函数为标准Promise形式，按顺序调用 #

// createContainer1封装为Promise，确保HTML注入完成后再resolve
function createContainer1() {
    return new Promise((resolve) => {
        // 读取本地HTML容器
        chrome.runtime.sendMessage({ cmd: "read_cont1" }, function (html) {
            $("#container1").html(html);
            // 此处可添加你原来的后续同步逻辑
            resolve();
        });
    })
}
    
// fetchWeb封装为Promise
function fetchWeb() {
    return new Promise((resolve) => {
        chrome.runtime.sendMessage(
            { cmd: "send_url", url: window.location.href},
            function (response) {
                console.log(JSON.stringify(response));
                resolve(response);
            }
        );
    })
}

// 按需求顺序执行，先完成容器注入再调用数据获取逻辑
(async () => {
    await createContainer1();
    await fetchWeb();
})();

2. 可选优化background.js逻辑 #

如果你的fetchData是异步逻辑（比如需要跨页面请求数据），原有写法会返回空值，需要调整为异步处理形式：

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.cmd == "read_cont1") {
        $.ajax({
            url: chrome.extension.getURL("container1.html"),
            dataType: "html",
            success: sendResponse,
        });
        return true;
    } else if (request.cmd == "send_url") {
        // 假设fetchData返回Promise，异步获取结果后再返回
        fetchData(request.url).then(reviewUrl => {
            sendResponse({ review_url: reviewUrl });
        })
        return true;    
    }
});

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