Firefox截图插件问题：browser.runtime.sendMessage返回undefined

你的问题核心在于background.js中混合使用了async/await和回调函数，导致异步响应的时机处理错误，Firefox对消息传递的异步规范遵循比Chrome更严格，因此出现返回undefined的情况。以下是具体修改方案和原因：

问题分析 #

1. 你在browser.runtime.onMessage.addListener中同时使用了await和回调函数（如browser.tabs.query的第二个参数、browser.tabs.captureVisibleTab的第三个参数），这种混合写法会导致sendResponse调用时，消息通道已经被关闭，无法将结果传递回popup。
2. sendResponse并非异步函数，不需要用await修饰，这属于冗余写法。
3. Firefox中，当监听器是async函数时，推荐直接返回Promise作为响应，而非依赖sendResponse + return true的旧方式。

修改后的代码 #

background.js #

browser.runtime.onMessage.addListener(async (message, sender) => {
  if (message.type === "takeScreenshot") {
    try {
      // 改用Promise形式获取活动标签页，去掉回调
      const option = { active: true, currentWindow: true };
      const tabs = await browser.tabs.query(option);
      const activeTab = tabs[0];
      
      if (!activeTab) {
        return { error: "No active tab." };
      }
      
      // 改用Promise形式捕获截图，去掉回调
      const dataUrl = await browser.tabs.captureVisibleTab(activeTab.windowId, { format: "png" });
      console.log("dataUrl ::: ", dataUrl);
      
      // 直接返回结果，async函数会自动包装为Promise
      return { dataUrl: dataUrl };
    } catch (error) {
      // 捕获所有异常并返回错误信息
      return { error: error.message };
    }
  }
});

popup.js（无需修改） #

保持你原来的代码即可，因为已经使用await等待sendMessage的Promise响应。

修改原因 #

1. 纯async/await写法：browser.tabs.query和browser.tabs.captureVisibleTab都支持Promise，改用await可以避免回调嵌套，确保响应时机正确。
2. 直接返回结果：async函数的返回值会自动作为sendMessage的响应结果，Firefox会等待这个Promise resolve后，将结果传递给popup中的response变量。
3. 错误统一处理：通过try/catch捕获所有异常，确保无论成功还是失败，都能返回明确的响应对象，避免popup中出现undefined。

验证要点 #

• 确保manifest.json中的权限配置正确（你已配置activeTab、tabs和<all_urls>，满足截图功能的权限要求）。
• 测试时打开Firefox的开发者工具（后台页的控制台），确认截图的dataUrl正常打印，同时popup的控制台能正确收到响应。

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