Electron+React实现窗口穿透仅指定元素可点击的集成指导请求

问题背景 #

在基于React的Electron项目中，需要实现窗口整体可点击穿透，但指定元素可响应鼠标事件的功能。已找到electron-transparency-mouse-fix包，但官方示例为TypeScript，不清楚如何集成到现有JS项目中。以下是当前主进程入口文件main.js：

const electron = require('electron');
const { app, BrowserWindow } = electron;
const path = require('path');
const isDev = require('electron-is-dev');
const ipc  = electron.ipcRenderer; // 注意：主进程不能使用ipcRenderer，此处需修正

let mainWindow = null;
app.on('ready', createWindow);
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
});
app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
});
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 2024,
    height: 1024,
    transparent: true,
    frame: false,
    resizable: false,
    hasShadow: false,
    title: "Lauda Lasan Window"
  });
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
  // mainWindow.setIgnoreMouseEvents(true);
  mainWindow.on('closed', function () {
    mainWindow = null
  })

  /* Set did-fail-load listener once */
  mainWindow.webContents.on("did-fail-load", function() {
    console.log("did-fail-load");
    mainWindow.loadURL('http://localhost:3000');
  });

  mainWindow.on('page-title-updated', function (e) {
    e.preventDefault()
  });
}

集成步骤 #

1. 安装依赖 #

首先安装指定版本的包：

npm install electron-transparency-mouse-fix@1.0.0-beta --save

2. 修改主进程main.js #

修正主进程的IPC引用，并集成electron-transparency-mouse-fix：

const electron = require('electron');
const { app, BrowserWindow, ipcMain } = electron; // 替换ipcRenderer为ipcMain
const path = require('path');
const isDev = require('electron-is-dev');
const { setupMouseFix } = require('electron-transparency-mouse-fix'); // 引入包

let mainWindow = null;
app.on('ready', createWindow);
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
});
app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
});
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 2024,
    height: 1024,
    transparent: true,
    frame: false,
    resizable: false,
    hasShadow: false,
    title: "Lauda Lasan Window",
    webPreferences: {
      nodeIntegration: true, // 开发环境开启，生产环境建议用contextBridge替代
      contextIsolation: false // 开发环境关闭，生产环境需开启并配置contextBridge
    }
  });

  // 初始化鼠标穿透修复逻辑
  setupMouseFix(mainWindow);

  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);

  mainWindow.on('closed', function () {
    mainWindow = null
  })

  mainWindow.webContents.on("did-fail-load", function() {
    console.log("did-fail-load");
    mainWindow.loadURL('http://localhost:3000');
  });

  mainWindow.on('page-title-updated', function (e) {
    e.preventDefault()
  });
}

注意：生产环境中建议开启contextIsolation并通过contextBridge安全暴露IPC接口，避免XSS风险。

3. 在React组件中添加交互逻辑 #

在需要响应鼠标事件的React组件中，通过IPC通知主进程切换鼠标穿透状态。例如给一个按钮添加监听：

import React, { useEffect, useRef } from 'react';
const { ipcRenderer } = window.require('electron'); // 开发环境直接引入

const ClickableButton = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleMouseEnter = () => {
      ipcRenderer.send('set-ignore-mouse-events', false);
    };
    const handleMouseLeave = () => {
      ipcRenderer.send('set-ignore-mouse-events', true);
    };

    const button = buttonRef.current;
    if (button) {
      button.addEventListener('mouseenter', handleMouseEnter);
      button.addEventListener('mouseleave', handleMouseLeave);
    }

    return () => {
      if (button) {
        button.removeEventListener('mouseenter', handleMouseEnter);
        button.removeEventListener('mouseleave', handleMouseLeave);
      }
    };
  }, []);

  return (
    <button 
      ref={buttonRef} 
      style={{ 
        padding: '12px 24px', 
        background: '#2196F3', 
        color: 'white', 
        border: 'none', 
        borderRadius: '6px',
        cursor: 'pointer'
      }}
    >
      可点击按钮
    </button>
  );
};

export default ClickableButton;

4. 验证功能 #

启动项目后，窗口默认处于点击穿透状态；当鼠标悬停在指定元素（如上述按钮）上时，窗口暂时关闭穿透，允许元素响应点击、hover等事件；鼠标离开后自动恢复穿透状态。

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