Firefox扩展内容脚本如何监听动态创建iframe内元素的点击事件？

这个问题的核心原因其实很明确：虽然你在manifest里设置了"all_frames": true，但这个配置只会让内容脚本注入到页面初始加载时已存在的iframe中。对于后续动态创建的iframe（比如DeepL联系页面里的表单iframe），浏览器不会自动为它们注入内容脚本，自然也就没有绑定点击监听器。

下面是两种可行的解决方案，你可以根据自己的扩展manifest版本（MV2/MV3）选择：

方案一：通过webNavigation API动态注入内容脚本 #

这是最可靠的方案，能覆盖所有动态创建的iframe场景：

1. 更新manifest配置 #

首先需要添加webNavigation权限，并配置background脚本（MV3用service worker）：

MV2版本manifest.json：

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": [
    "webNavigation",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "all_frames": true,
      "js": ["content.js"]
    }
  ]
}

MV3版本manifest.json：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": [
    "webNavigation"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "all_frames": true,
      "js": ["content.js"]
    }
  ]
}

2. 编写background脚本监听动态iframe #

在background.js中监听iframe的DOM加载完成事件，自动注入内容脚本：

// 监听所有iframe的DOMContentLoaded事件
browser.webNavigation.onDOMContentLoaded.addListener((details) => {
  // 只处理非主框架的iframe（frameId !== 0）
  if (details.frameId !== 0) {
    // 向该iframe注入内容脚本
    browser.tabs.executeScript(details.tabId, {
      file: "content.js",
      frameId: details.frameId,
      allFrames: false // 已指定frameId，无需再用allFrames
    });
  }
}, {
  // 匹配所有URL
  url: [{ urlMatches: ".*" }]
});

3. 保持内容脚本逻辑不变 #

你的content.js里的点击监听器逻辑不需要修改，因为注入到每个iframe后，会为该iframe的document绑定监听器：

document.addEventListener('click', function eventHandler(e) {
  // 这里写你的处理逻辑
  console.log("点击事件触发，目标元素：", e.target);
});

方案二：利用match_about_blank和match_origin_as_fallback（仅适用于特定场景） #

如果动态创建的iframe是about:blank或者与主页面同源，你可以在content_scripts配置中添加这两个参数，让内容脚本自动注入这类iframe：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "all_frames": true,
    "match_about_blank": true,
    "match_origin_as_fallback": true,
    "js": ["content.js"]
  }
]

不过这个方案的局限性很大，无法覆盖跨域的动态iframe，所以更推荐方案一。

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