Chrome扩展Manifest V3：内容与后台脚本消息传递问题排查

核心问题分析 #

1. 异步消息监听的返回值不符合Chrome要求
   Chrome扩展的chrome.runtime.onMessage监听器，若需异步调用sendResponse，必须同步返回布尔值true。你的代码中handleMessage（background.js）和Login.js的消息监听都使用了async函数，这类函数默认返回Promise而非true，导致Chrome无法识别异步响应的意图，提前关闭消息通道，进而出现空响应或响应丢失的问题。

2. 变量未定义导致流程中断
   initiateLogin函数中调用handleFlowResult(result, x, a, b)时，result、a、b均未定义，会抛出未捕获错误直接中断登录流程，后续的sendResponse自然无法执行。

3. 消息响应的数据结构不匹配
   Background.js尝试从needCodes的响应中解构x,y,z，但Login.js返回的是{ data: foo }的嵌套结构，两者不匹配导致解构失败，后续依赖这些变量的代码无法正常执行。

修复后的代码实现 #

Background.js #

chrome.runtime.onMessage.addListener(handleMessage);

// 改为普通函数，内部用异步IIFE处理逻辑，同步返回true
function handleMessage(request, sender, sendResponse) {
    console.log("handleMessage - request:", request);
    console.log("handleMessage - sender:", sender);

    if (request.message === "login") {
        console.log("handleMessage - Initiating login process");
        (async () => {
            try {
                await initiateLogin();
                sendResponse({ response: "loggedIn" });
            } catch (err) {
                sendResponse({ error: err.message });
            }
        })();
        return true; // 同步告知Chrome要异步响应
    } else if (request.message === "logout") {
        console.log("handleMessage - Logging out user");
        emptyTokenData();
        sendResponse({ response: "logout successfully" });
        return true;
    }
}

async function initiateLogin() {
    console.log("initiateLogin - Initiating login process");
    try {
        // 匹配Login.js返回的嵌套结构
        const { data: { x, y, z } } = await sendMessageAsync({
            message: "needCodes",
        });
        // 补全缺失的变量（替换为实际业务逻辑中的值）
        const result = "auth_flow_result";
        const a = "param_a";
        const b = "param_b";
        await handleFlowResult(result, x, a, b);
    } catch (error) {
        console.error("Error during login initiation:", error);
        throw error; // 抛出错误让上层捕获
    }
}

async function handleFlowResult(result, x, a, b) {
    const codeData = { result, x, a, b };
    try {
        const data = await sendMessageAsync({
            message: "exCode",
            messageData: codeData,
        });
        console.log(
            "handleFlowResult - Token exchange successful. Data:",
            data,
        );
    } catch (error) {
        console.error("Error during handleFlowResult:", error);
    }
}

async function sendMessageAsync(message) {
    console.log(
        "sendMessageAsync - initiating sending message to login.js:",
        message,
    );

    return new Promise((resolve, reject) => {
        chrome.runtime.sendMessage(message, (response) => {
            if (chrome.runtime.lastError) {
                reject(new Error(chrome.runtime.lastError));
            } else {
                console.log(
                    "sendMessageAsync - Response from login.js:",
                    response,
                );
                resolve(response);
            }
        });
    });
}

Login.js #

document.addEventListener("DOMContentLoaded", function () {
    const loginButton = document.getElementById("login-button");
    if (loginButton) {
        loginButton.addEventListener("click", loginUser);
    }
});

async function loginUser() {
    try {
        const response = await chrome.runtime.sendMessage({
            message: "login",
        });
        console.log("response from outside if block: ", response);

        if (response && response.response === "loggedIn") {
            console.log("response from inside if block: ", response);
        } else {
            console.error("Login failed:", response);
        }
    } catch (err) {
        console.error("Login request failed:", err);
    }
}

// 改为普通函数，内部用异步IIFE处理，同步返回true
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    (async () => {
        try {
            switch (request.message) {
                case "needCodes":
                    const data = await handleNeedCodes();
                    sendResponse({ data });
                    break;
                default:
                    console.error("Unknown message type:", request.message);
                    sendResponse({ error: "Unknown message type" });
                    break;
            }
        } catch (err) {
            sendResponse({ error: err.message });
        }
    })();
    return true;
});

async function handleNeedCodes() {
    try {
        // 补全缺失的x参数（替换为实际业务逻辑中的值）
        const x = "required_param_x";
        const foo = await abc(x); // 确保abc函数已定义或导入
        console.log(foo);
        return foo; // 确保foo是包含x,y,z的对象
    } catch (error) {
        console.error("Error during handleNeedCodes:", error);
        throw error;
    }
}

额外注意事项 #

• 确保abc函数在Login.js中已正确定义或导入，否则handleNeedCodes会抛出错误中断流程。
• 所有异步操作的错误都要正确捕获并抛出，确保上层能感知到异常并返回错误响应。

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