Chrome扩展中监听iframe内鼠标移动事件的问题

问题原因 #

iframe是独立的浏览上下文，你当前仅在主窗口注册了mousemove事件监听器，无法捕获iframe内部的鼠标事件。

解决方案一：向所有iframe注入监听脚本 #

通过配置扩展让内容脚本自动注入到所有iframe（同域场景），或主动注入到跨域iframe，同时转换坐标为全局页面坐标。

1. 修改manifest.json配置（同域iframe）
   在content_scripts中添加"all_frames": true，让脚本自动注入到所有iframe：

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

2. 坐标转换与监听代码
   在content.js中编写监听逻辑，将iframe内的相对坐标转换为主页面的全局坐标：

   const consoleMouse = (e) => {
     let clientX = e.clientX;
     let clientY = e.clientY;
   
     // 若当前上下文是iframe，转换为全局坐标
     if (window !== window.top) {
       const iframeEl = window.frameElement;
       const rect = iframeEl.getBoundingClientRect();
       clientX += rect.left;
       clientY += rect.top;
     }
   
     console.log(`mouse at ${clientX} and ${clientY}`);
   };
   
   // 注册监听
   window.addEventListener("mousemove", consoleMouse);
   
   // 页面卸载时移除监听
   window.addEventListener("unload", () => {
     window.removeEventListener("mousemove", consoleMouse);
   });
   

3. 跨域iframe处理
   若需监听跨域iframe，需在manifest中添加scripting权限，然后通过chrome.scripting.executeScript主动注入脚本：

   "permissions": ["scripting", "<all_urls>"]
   

   在后台脚本或内容脚本中遍历所有iframe并注入：

   // 遍历页面内所有iframe
   document.querySelectorAll('iframe').forEach(async (iframe) => {
     try {
       await chrome.scripting.executeScript({
         target: { frameIds: [iframe.getAttribute('frameId')] },
         func: () => {
           const consoleMouse = (e) => {
             let clientX = e.clientX;
             let clientY = e.clientY;
             const iframeEl = window.frameElement;
             const rect = iframeEl.getBoundingClientRect();
             clientX += rect.left;
             clientY += rect.top;
             // 可通过chrome.runtime.sendMessage将坐标发送到主脚本
             chrome.runtime.sendMessage({ type: 'MOUSE_POS', x: clientX, y: clientY });
           };
           window.addEventListener("mousemove", consoleMouse);
         }
       });
     } catch (err) {
       console.warn('注入跨域iframe失败:', err);
     }
   });
   

解决方案二：全局透明覆盖层（类似ColorZilla） #

创建一个全屏透明的DOM元素覆盖整个页面（包括iframe），监听该元素的mousemove事件，直接获取全局坐标：

useEffect(() => {
  // 创建全屏覆盖层
  const overlay = document.createElement('div');
  overlay.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: auto;
    z-index: 999999;
    background: transparent;
  `;
  document.body.appendChild(overlay);

  const consoleMouse = (e) => {
    const { clientX, clientY } = e;
    console.log(`mouse at ${clientX} and ${clientY}`);
  };

  overlay.addEventListener('mousemove', consoleMouse);

  return () => {
    overlay.removeEventListener('mousemove', consoleMouse);
    overlay.remove();
  };
}, []);

注意：该方法会暂时阻止页面下方元素的交互，若需保留页面交互，可结合pointer-events: none和事件捕获机制调整，或仅在需要监听时开启覆盖层。

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