Chrome扩展异步数据发送问题：sendMessage未等待async-await执行完成

问题根源 #

异步函数Extractor调用后直接返回Promise对象，而非实际提取结果，导致chrome.runtime.sendMessage发送的是Promise实例，popup页面接收后显示为[object Object]。同时，直接传递DOM元素会因跨上下文序列化问题无法正确传递。

修正步骤 #

1. 网页端代码修正：等待异步函数执行完成再发送消息

因为Extractor是async函数，必须通过await或.then()获取最终结果后再调用sendMessage，同时要将DOM元素转换为可序列化的内容（如文本、HTML）：

// 修正后的网页端/内容脚本代码
async function Extractor(document) {
  await new Promise(r => setTimeout(r, 3000));
  const item = document.getElementById("your-target-id"); // 替换为实际元素ID
  // 返回可序列化的内容，而非DOM对象
  return item ? item.textContent : "未找到目标元素";
}

// 自执行异步函数等待提取完成后发送消息
(async () => {
  const extractedData = await Extractor(document);
  chrome.runtime.sendMessage({
    action: "getSource",
    source: extractedData
  });
})();

2. Popup端代码优化（确保正确获取DOM节点）

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  const messageNode = document.getElementById('message');
  chrome.runtime.onMessage.addListener((request) => {
    if (request.action === "getSource") {
      messageNode.innerText = request.source;
    }
  });
});

关键注意事项 #

• 异步函数的结果必须等待完成后才能使用，不能直接将函数调用作为参数传递给sendMessage
• Chrome扩展的跨上下文消息传递仅支持可序列化数据（字符串、数字、普通对象/数组等），DOM元素、函数等引用类型无法直接传递，需提前提取所需内容

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