Chrome扩展内容脚本mousedown监听器跨域iframe不触发，能否实现监听？

哎，这个问题我之前帮人排查过——核心就是同源策略在拦你！直接在主页面（www.icloud.com）用document.addEventListener绑定的监听器，确实碰不到跨域iframe（idmsa.apple.com）内部的DOM事件，哪怕开了捕获模式true也没用，因为浏览器会在跨域iframe的边界阻断事件的传播链。

不过别慌，有可行的办法实现需求，核心思路是给跨域iframe单独注入内容脚本：

步骤1：修改扩展的manifest.json，添加跨域iframe的脚本注入规则 #

在你的扩展配置文件里，给idmsa.apple.com域名添加内容脚本匹配，确保脚本能注入到这个跨域iframe里：

{
  "manifest_version": 3, // 如果你用的是V2，替换成2即可
  "content_scripts": [
    // 原有的主页面脚本配置
    {
      "matches": ["https://www.icloud.com/*"],
      "js": ["main-content-script.js"]
    },
    // 新增的跨域iframe脚本配置
    {
      "matches": ["https://idmsa.apple.com/*"],
      "js": ["iframe-listener.js"],
      "all_frames": true // 确保注入到所有iframe实例中
    }
  ],
  "permissions": []
}

步骤2：在iframe专属脚本里监听事件 #

新建iframe-listener.js文件，在里面直接监听该iframe内部的mousedown事件：

document.addEventListener("mousedown", function(event) {
  // 这里可以直接处理iframe内的点击逻辑
  console.log("跨域iframe内触发了mousedown", event.target);
  
  // 如果需要把事件通知给主页面的脚本，用扩展的消息系统
  chrome.runtime.sendMessage({
    type: "IFRAME_MOUSEDOWN",
    targetInfo: {
      tag: event.target.tagName,
      id: event.target.id
    }
  });
}, true);

步骤3：主页面脚本接收iframe的事件通知（可选） #

如果主页面需要响应iframe里的事件，在main-content-script.js里添加消息监听：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "IFRAME_MOUSEDOWN") {
    console.log("收到来自跨域iframe的mousedown事件", message.targetInfo);
    // 这里写主页面的处理逻辑
  }
});

关键说明 #

• 同源策略只是禁止主页面直接访问跨域iframe的DOM，但扩展通过manifest配置的内容脚本，只要匹配了目标域名，就能合法注入到跨域iframe中，不受同源限制。
• all_frames: true是必须的，确保脚本注入到页面内的所有iframe（包括嵌套的），而不仅仅是主页面。

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