我正在为firefox构建插件，用户可以截图，但browser.runtime.sendMessage返回未定义

Question

我正在尝试实现一个用户可以使用

 browser.tabs.captureVisibleTab

截屏的功能。

但是 browser.runtime.sendMessage 立即返回 undefined。

在

console.log("dataUrl ::: ", dataUrl) 

of

browser.runtime.onMessage.addListener

中它记录了数据 url，所以它正在工作。但不知何故，它在

screenshot.addEventListener 

中未定义 我当前的代码如下。它在 chrome 中运行良好（当然我用 chrome 更换了浏览器）。

我很感激任何建议。

//manifest.json

"permissions": ["activeTab", "tabs", "storage", "webRequest", "<all_urls>"],
  "host_permissions": ["<all_urls>"]

//popup.js

screenshot.addEventListener("click", async () => {
  try {
    const response = await browser.runtime.sendMessage({
      type: "takeScreenshot",
    });
    console.log("response is ", response); // undefined
    if (response.dataUrl) {
      const img = document.createElement("img");
      img.src = response.dataUrl;
      document.body.appendChild(img);
    }
  } catch (error) {
    console.error("Error sending message:", error);
  }
});

//背景.js

browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  
  if (message.type === "takeScreenshot") {
    const option = { active: true, currentWindow: true }; 
    await browser.tabs.query(option, async (tabs) => {
      const activeTab = tabs[0];
      if (!activeTab) {
        await sendResponse({ error: "No active tab." });
        return;
      }
      await browser.tabs.captureVisibleTab(
        activeTab.windowId,
        { format: "png" },
       
        async (dataUrl) => {
          if (browser.runtime.lastError) {
            await sendResponse({ error: browser.runtime.lastError.message });

            return;
          }
          console.log("dataUrl ::: ", dataUrl); //it logs correct dataUrl

          await sendResponse({ dataUrl: dataUrl }); 
        }
       
      );
    });
    return true;
  }
});

我根据this在附加组件管理器中启用了“”权限。 但它仍然返回相同的结果。

Answer 1

您在 Firefox 的异步 onMessage 中错误地使用了 Chrome 的返祖

return true

。

在 Firefox 中，您只需返回值，就像在任何异步代码中一样：

browser.runtime.onMessage.addListener(async (message, sender) => {
  if (message.type === 'takeScreenshot') {
    const [{windowId}] = await browser.tabs.query({active: true, currentWindow: true});
    const dataUrl = await browser.tabs.captureVisibleTab(windowId, {format: 'png'});
    return {dataUrl};
  }
});

异常会自动发送到您的调用代码的

catch

，无需在这里捕获它们。