Chrome扩展：实现透明iframe区域下的页面鼠标事件交互

方案1：用CSS pointer-events 实现事件穿透 #

这是最省心的方案，直接利用CSS属性搞定：

• 给全屏的iframe设置 pointer-events: none;，这样所有鼠标事件（点击、悬停、拖拽等）都会直接穿透iframe，落到下方的原页面上。
• 单独给iframe内部需要交互的控件（比如可拖动按钮、操作面板）设置 pointer-events: auto;，让这些控件能正常接收自己的事件。

示例代码：

/* 全屏iframe的基础样式 */
.overlay-iframe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* 全局允许事件穿透 */
  background: transparent;
  border: 0;
}

/* 让iframe内的控件恢复事件响应 */
.overlay-iframe .control-item {
  pointer-events: auto;
  position: absolute;
  /* 你的控件定位、样式 */
}

这个方案兼容性拉满，Chrome完全支持，代码量少，性能也没任何问题，完美匹配你的需求。

方案2：只让iframe覆盖控件区域 #

如果不想用pointer-events，可以放弃全屏iframe，只让iframe包裹需要显示的控件：

• 不为整个窗口创建iframe，而是给每个控件单独生成小尺寸的iframe，或者动态计算控件的位置和大小，让iframe刚好覆盖控件区域。
• 当控件被拖动时，实时更新对应iframe的位置和尺寸。
  这种方法的好处是从根源上避免遮挡，但需要额外处理控件位置的同步逻辑，适合控件数量少、移动不频繁的场景。

方案3：事件捕获与转发（备选方案） #

如果因为特殊限制不能用前两种方案，才考虑这个：

• 在iframe的透明区域捕获鼠标事件，通过window.parent获取原页面的DOM，计算鼠标在原页面的坐标，找到对应的元素后模拟触发事件。
• 比如监听iframe的click事件，用document.elementFromPoint找到原页面的目标元素，再用dispatchEvent触发点击。
  这个方法需要处理各种事件类型（悬停、鼠标移动等），还要做坐标转换，实现起来很繁琐，只建议作为兜底方案。

首选方案 #

直接用方案1，简单高效，完全满足你的需求。

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