Firefox扩展onMessage sendResponse返回数据获取失败求助

开发Firefox扩展时，调用browser.runtime.sendMessage后始终无法获取onMessage.addListener中sendResponse返回的数据，报错Response is undefined。

相关代码片段 #

background.js 消息监听器 #

browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
    console.log("Message recived form background script:", message);
    
    if (message.type === "call_LLM_Api") {
        try {
            console.log("Async logic...");

            sendResponse({ result: "testtt", angelolo: "ok done" });
        } catch (error) {
            console.error("Error in back script", error);
            sendResponse({ error: error.message });
        }

        return true;
    }
});

popup/training.js 消息发送函数 #

async function ApiCall(data) {
    try {
        // cover browser.runtime.sendMessage in Promise
        const response = await new Promise((resolve, reject) => {
            browser.runtime.sendMessage(
                {
                    type: "call_LLM_Api",
                    data: data,
                },
                (response) => {
                    if (browser.runtime.lastError) {
                        reject(new Error(browser.runtime.lastError.message));
                    } else if (!response) {
                        // Gestisce il caso in cui la risposta è undefined
                        reject(new Error("Response is undefined"));
                    } else if (response.error) {
                        reject(new Error(response.error));
                    } else {
                        resolve(response);
                    }
                }
            );
        });

        console.log("background response script:", response);
        return response.result; // Ritorna il risultato
    } catch (error) {
        console.error("Error in message send:", error);
        throw error; // Propaga l'errore
    }
}

manifest.json 配置 #

{
    "manifest_version": 2,
    "name": "Policy Analyzer",
    "version": "1.0",
    "background": {
      "scripts": ["background.js"]
    },

    "description": "Analyze the Privacy policy you are accepting by accessing a web page.",
    "icons":{
      "16": "icons/icon-16.png",
      "48": "icons/icon-48.png",
      "128": "icons/icon-128.png"
    },

    "browser_action":
    {
      "default_icon":{
        "16": "icons/icon-16.png",
        "48": "icons/icon-48.png",
        "128": "icons/icon-128.png"
      },
      "default_title": "De Compile Privacy",
      "default_popup": "popup/popup.html"
    },
    "permissions": [
      "geolocation",
      "tabs",
      "activeTab",
      "http://*/*",
      "https://*/*",
      "storage",
      "webNavigation"
    ],
    
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
      }
    ]
  }

报错信息 #

Error in message send: Error: Response is undefined

解决方案 #

问题出在background.js中监听器使用了async关键字：
async函数默认返回一个Promise，这会覆盖你写的return true逻辑。而Firefox扩展的onMessage监听器中，return true是用来告知浏览器：之后会通过sendResponse异步返回结果，不要立刻关闭消息通道。当监听器是async函数时，浏览器会认为监听器已经通过返回的Promise完成响应，导致sendResponse的结果无法传递到发送端。

修改后的background.js代码 #

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
    console.log("Message recived form background script:", message);
    
    if (message.type === "call_LLM_Api") {
        try {
            console.log("Async logic...");
            sendResponse({ result: "testtt", angelolo: "ok done" });
        } catch (error) {
            console.error("Error in back script", error);
            sendResponse({ error: error.message });
        }

        return true;
    }
});

如果后续需要在监听器中执行异步操作（比如调用LLM API），可以这样处理：

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
    console.log("Message recived form background script:", message);
    
    if (message.type === "call_LLM_Api") {
        // 立即return true，告知浏览器要异步响应
        (async () => {
            try {
                console.log("Async logic...");
                // 模拟异步API调用
                // const apiResult = await fetchLLMData(message.data);
                sendResponse({ result: "testtt", angelolo: "ok done" });
            } catch (error) {
                console.error("Error in back script", error);
                sendResponse({ error: error.message });
            }
        })();
        return true;
    }
});

这样既保留了异步逻辑，又能保证sendResponse的结果正确传递。

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