Chrome扩展Manifest v3：无需后台脚本实现多内容脚本通信可行吗？

针对你提到的Manifest v3下service workers易休眠的问题，完全可以不依赖后台脚本实现iframe中的sender.js与顶层文档的receiver.js通信，下面提供三种实用方案：

方案一：利用DOM自定义事件（同域场景优先） #

这种方式直接通过顶层窗口的事件机制传递消息，性能高效，适合同域的iframe场景。

sender.js（iframe中） #

// 构造要发送的消息数据
const message = { type: 'iframe-data', content: '来自iframe的内容' };
// 创建自定义事件，禁止冒泡避免污染页面事件
const sendEvent = new CustomEvent('iframe-to-top', { detail: message, bubbles: false });
// 向顶层窗口触发事件
window.top.dispatchEvent(sendEvent);

// 可选：监听来自顶层的回复
window.addEventListener('top-to-iframe', (e) => {
  console.log('收到顶层回复:', e.detail);
});

receiver.js（顶层文档） #

// 监听来自iframe的自定义事件
window.addEventListener('iframe-to-top', (e) => {
  console.log('收到iframe消息:', e.detail);
  // 构造回复消息并发送给对应iframe
  const replyEvent = new CustomEvent('top-to-iframe', { detail: '已接收消息', bubbles: false });
  e.source.dispatchEvent(replyEvent);
});

方案二：Broadcast Channel API（同源多上下文场景） #

Broadcast Channel是浏览器原生API，专门用于同源下不同上下文（iframe、标签页、content script）间的消息广播，API简洁易用。

sender.js（iframe中） #

// 连接指定名称的广播频道（需与receiver使用同一名称）
const channel = new BroadcastChannel('extension-content-comm');
// 发送消息
channel.postMessage({ from: 'iframe', data: '广播消息内容' });

// 可选：监听顶层回复
channel.onmessage = (e) => {
  if (e.data.from === 'top') {
    console.log('顶层回复:', e.data.data);
  }
};

receiver.js（顶层文档） #

// 连接同一广播频道
const channel = new BroadcastChannel('extension-content-comm');
// 监听消息
channel.onmessage = (e) => {
  if (e.data.from === 'iframe') {
    console.log('收到iframe广播:', e.data.data);
    // 发送回复
    channel.postMessage({ from: 'top', data: '已收到广播' });
  }
};

方案三：window.postMessage（跨域iframe场景） #

如果iframe与顶层文档不同源，可使用window.postMessage实现跨域消息传递，注意必须验证消息来源确保安全。

sender.js（iframe中） #

// 发送消息，建议指定具体目标域名而非*，提升安全性
window.top.postMessage(
  { type: 'extension-cross-domain', content: '跨域消息' },
  'https://target-top-domain.com'
);

// 监听回复
window.addEventListener('message', (e) => {
  if (e.data.type === 'extension-reply' && e.origin === 'https://target-top-domain.com') {
    console.log('跨域回复:', e.data.content);
  }
});

receiver.js（顶层文档） #

window.addEventListener('message', (e) => {
  // 验证消息来源域名和消息类型，防止恶意消息
  if (e.origin === 'https://trusted-iframe-domain.com' && e.data.type === 'extension-cross-domain') {
    console.log('收到跨域消息:', e.data.content);
    // 回复消息
    e.source.postMessage(
      { type: 'extension-reply', content: '已接收跨域消息' },
      e.origin
    );
  }
});

注意事项 #

• 自定义事件和Broadcast Channel仅适用于同源场景，跨域需使用window.postMessage并严格验证来源
• 所有方案均无需依赖扩展的后台/service worker，完全在content script上下文内完成通信
• 使用window.postMessage时，务必指定精确的目标域名，避免使用*带来安全风险

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