Chrome扩展中基于Promise、postMessage、自定义事件实现iframe同步通信问题

现有实现核心问题 #

• Promise的resolve未传入iframe返回的实际数据，即使触发回调也拿不到返回值
• 自定义事件dataReady没有携带postMessage传递的有效数据，数据链路断裂
• 存在语法错误：getDataAsync函数定义语法冲突、括号未闭合
• DOM节点无法直接通过postMessage传递，结构化克隆算法不支持该类型，需要先序列化为可传输的格式
• 未移除事件监听，会导致重复触发和内存泄漏
• 顶层直接使用await需要ES模块环境支持，否则需要包裹在async自执行函数内

修正后代码 #

main-frame.js #

window.addEventListener("message", frameMessages, false);
const iframeElement = document.getElementById('iframeId');

function frameMessages(event) {
  // 建议替换为实际iframe域名，校验来源避免安全风险
  // if (event.origin !== "https://你的iframe业务域名") return;
  if (event.data?.message === 'dataFromIFrame') {
    // 携带实际数据触发自定义事件
    const dataReadyEvent = new CustomEvent('dataReady', {
      detail: event.data.data
    });
    iframeElement.dispatchEvent(dataReadyEvent);
  }
}

function getDataFromIFrame() {
  return new Promise((resolve) => {
    chrome.runtime.sendMessage({service:'getData', frameId: frameId});
    // 定义可移除的事件回调，避免内存泄漏
    function dataReadyHandler(e) {
      iframeElement.removeEventListener("dataReady", dataReadyHandler);
      // 将数据传入Promise返回
      resolve(e.detail);
    }
    iframeElement.addEventListener("dataReady", dataReadyHandler);
  });
}

// 调用示例：顶层await需要ES模块环境，否则用async自执行函数包裹
(async () => {
  const data = await getDataFromIFrame();
  console.log('iframe返回数据：', data);
})();

iframe.js #

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if(request.service === 'getData'){
    const element = document.getElementById('目标元素ID');
    // 不要直接传递DOM节点，按需序列化内容，比如文本、属性集合等
    const targetData = element ? element.innerText : null;
    window.parent.postMessage({
      message: 'dataFromIFrame',
      frameGuid: frameGuid,
      data: targetData
    },
    // 生产环境替换为实际主框架域名，禁止用*避免安全漏洞
    "*"
    );
  }
});

额外注意事项 #

• 按需调整序列化逻辑，可根据业务需要把DOM的属性、HTML内容等组装成JSON对象传输
• 如果需要支持并发多个请求，可在发送请求时生成唯一请求ID，iframe返回时携带该ID匹配对应Promise，避免请求混淆

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