如何在Firefox扩展中监听外部网站的CustomEvent？

一、解决自定义事件无法接收的问题 #

Firefox扩展的content script运行在隔离的上下文中，它的window对象和网页自身的window完全独立，因此网页触发的自定义事件无法被content script监听到。下面是两种可行的实现方案：

方案1：通过postMessage + Content Script中转 #

网页端代码（你的自有网站，如yahoo.com）：

const message = { status: true, type: "PassToBackground" };
// 建议替换"*"为你的扩展允许的域名（如"https://google.com"），提升安全性
window.postMessage(message, "*");

Content Script代码（运行在google.com上）：

window.addEventListener("message", (evt) => {
  // 必须验证消息来源，防止恶意网站伪造消息
  if (evt.origin === "https://yahoo.com") {
    if (evt.data.type === "PassToBackground") {
      console.log("收到网页消息：", evt.data);
      // 若需要传递给Background Script，可继续调用：
      browser.runtime.sendMessage(evt.data);
    }
  }
}, false);

方案2：直接与Background Script通信（无需Content Script） #

这种方式需要在扩展配置中声明允许通信的域名，更适合不需要Content Script介入的场景。

1. 修改扩展的manifest.json：

添加externally_connectable字段，指定可信域名：

{
  "manifest_version": 3,
  // 其他配置...
  "externally_connectable": {
    "matches": ["https://yahoo.com/*"]
  }
}

2. 网页端代码（yahoo.com）：

需要知道扩展的ID（可在Firefox扩展管理页面查看）：

const extensionId = "your-extension-unique-id";
const message = { status: true, type: "PassToBackground" };

browser.runtime.sendMessage(extensionId, message)
  .then(response => {
    console.log("扩展回复：", response);
  })
  .catch(err => {
    console.error("发送失败：", err);
  });

3. Background Script代码：

browser.runtime.onMessageExternal.addListener((message, sender, sendResponse) => {
  // 验证来源域名，确保可信
  if (sender.origin === "https://yahoo.com") {
    console.log("收到外部消息：", message);
    // 可向网页回复消息
    sendResponse({ received: true });
  }
});

二、Grammarly通过moz-extension://<ID>的通信原理 #

Grammarly采用嵌入扩展专属iframe的方式实现网页与扩展的通信，核心流程如下：

1. 网页中嵌入一个隐藏的iframe，其地址为moz-extension://<grammarly-extension-id>/bridge.html（扩展专属资源路径）
2. 网页通过postMessage向该iframe发送消息，由于iframe属于扩展上下文，可直接访问扩展的API（如browser.runtime.sendMessage）
3. 扩展处理完请求后，通过iframe将结果回传给网页
4. 扩展通过该iframe还能主动向网页推送更新（如拼写检查结果）

这种方式的优势：

• 利用moz-extension://协议的隔离性，确保只有对应扩展能处理通信，安全性更高
• 无需依赖Content Script，可直接与Background Script交互，支持更复杂的功能逻辑
• 避免了跨域限制，同时能通过iframe做严格的身份验证

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