Chrome扩展函数无法向调用者返回值问题求助

我开发了一个Chrome扩展，通过与后台标签页通信获取特定的sid，再使用该sid创建按钮。以下是调用后台标签页的函数：

function call_background_tab(req) {
    switch (req) {
        case "zbx_sessionid":
            chrome.runtime.sendMessage({item: req}, function(response) {
                var rsp = response["response"][0]["value"];
                console.log("call_background_tab: " + rsp); // <- 此处能正常输出
                return rsp;
            });
    }
}

我通过以下代码调用该函数：

let sid = call_background_tab("zbx_sessionid");
console.log("main: " + sid); // <- 此处无效，返回undefined
add_CheckNow_Button(sid);

刷新页面后，控制台输出如下：

main: undefined
call_background_tab: bfe92fcafbc7d4e09fccc8de595dcc21

我尝试将console.log("main: " + sid)和add_CheckNow_Button(sid);放入setTimeout()块中，让main的输出在call_background_tab之后，但main的输出仍然是undefined，而call_background_tab能返回有效的会话ID。

请问为何无法将rsp的值返回给调用者？

核心原因：异步操作的特性 #

chrome.runtime.sendMessage是异步函数，它不会阻塞代码执行，而是立即返回，等后台响应后才会触发传入的回调函数。

你当前的call_background_tab函数存在两个关键问题：

1. 函数本身没有任何return语句，调用它时默认返回undefined，这就是main: undefined的直接原因。
2. 回调函数里的return rsp没有实际意义——这个返回值不会传递到call_background_tab的调用处，因为回调是在异步流程里执行的，和原函数的执行上下文已经完全分离。

至于你尝试的setTimeout无效，是因为sid变量在一开始就被赋值为undefined，异步操作完成后不会修改这个变量的初始值，延迟输出只是把undefined的打印时间推后了而已。

解决方案 #

可以通过以下几种方式正确处理异步结果：

1. 使用回调函数传递结果

修改call_background_tab，让它接收一个回调函数，在异步响应后执行这个回调来传递结果：

function call_background_tab(req, callback) {
    switch (req) {
        case "zbx_sessionid":
            chrome.runtime.sendMessage({item: req}, function(response) {
                var rsp = response["response"][0]["value"];
                console.log("call_background_tab: " + rsp);
                callback(rsp); // 将结果传入回调函数
            });
    }
}

// 调用方式
call_background_tab("zbx_sessionid", function(sid) {
    console.log("main: " + sid);
    add_CheckNow_Button(sid);
});

2. 使用Promise封装异步操作

把异步调用封装成Promise，这样可以用更清晰的链式调用或者async/await语法处理结果：

function call_background_tab(req) {
    return new Promise((resolve, reject) => {
        switch (req) {
            case "zbx_sessionid":
                chrome.runtime.sendMessage({item: req}, function(response) {
                    var rsp = response["response"][0]["value"];
                    console.log("call_background_tab: " + rsp);
                    resolve(rsp); // 成功时返回结果
                });
                break;
            default:
                reject(new Error("Invalid request"));
        }
    });
}

// 链式调用方式
call_background_tab("zbx_sessionid")
    .then(sid => {
        console.log("main: " + sid);
        add_CheckNow_Button(sid);
    })
    .catch(err => console.error(err));

// 或者用async/await（需要在async函数中使用）
async function init() {
    try {
        const sid = await call_background_tab("zbx_sessionid");
        console.log("main: " + sid);
        add_CheckNow_Button(sid);
    } catch (err) {
        console.error(err);
    }
}
init();

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