Electron webview加载WhatsApp Web点击通知无法聚焦窗口问题问询

你当前的方案没有生效，是因为WhatsApp Web的通知点击事件触发在webview的隔离上下文中，默认不会触发你监听的webview.focus()事件，自然无法向主进程发送IPC消息。

步骤1：为webview配置preload脚本 #

首先给你嵌入WhatsApp Web的webview标签添加preload属性，指定你自定义的预加载脚本路径：

<!-- 你的webview标签 -->
<webview id="whatsapp-web" src="https://web.whatsapp.com" preload="./webview-preload.js" webpreferences="contextIsolation=true, nodeIntegration=false"></webview>

同时要确保主进程创建BrowserWindow时的webPreferences配置已开启webviewTag：

// main.js 创建窗口时的配置
const mainWindow = new BrowserWindow({
  // 其他配置
  webPreferences: {
    webviewTag: true,
    contextIsolation: true,
    nodeIntegration: false,
    // 其他web配置
  }
})

步骤2：编写webview的preload脚本 #

在webview-preload.js中注入逻辑，监听全局的通知点击事件，触发时向渲染进程发送消息：

// webview-preload.js
const { ipcRenderer } = require('electron')

// 重写Notification构造函数，劫持点击事件
const OriginalNotification = Notification
window.Notification = function(title, opts) {
  const notification = new OriginalNotification(title, opts)
  // 保留原来的点击逻辑，追加窗口激活逻辑
  const originalOnClick = notification.onclick
  notification.onclick = function(e) {
    originalOnClick?.call(this, e)
    // 向渲染进程发送通知点击信号
    ipcRenderer.sendToHost('whatsapp-notification-click')
  }
  return notification
}
// 继承原Notification的静态属性
Object.assign(window.Notification, OriginalNotification)

步骤3：渲染进程监听webview消息，转发给主进程 #

在你的renderer.js中添加webview的消息监听：

// renderer.js
const webview = document.querySelector('#whatsapp-web')
const { ipcRenderer } = require('electron')

webview.addEventListener('ipc-message', (e) => {
  if (e.channel === 'whatsapp-notification-click') {
    ipcRenderer.send('activate-main-window')
  }
})

步骤4：主进程处理窗口激活逻辑 #

Win10环境下需要额外处理窗口最小化、被遮挡的场景，确保激活生效：

// main.js
ipcMain.on('activate-main-window', () => {
  if (!mainWindow) return
  // 如果窗口最小化先恢复
  if (mainWindow.isMinimized()) {
    mainWindow.restore()
  }
  // 聚焦窗口
  mainWindow.focus()
  // 可选：临时置顶确保窗口弹出，再恢复原来的置顶状态
  const wasOnTop = mainWindow.isAlwaysOnTop()
  mainWindow.setAlwaysOnTop(true)
  mainWindow.setAlwaysOnTop(wasOnTop)
})

• 如果你使用的Electron版本≥14，需要确保webPreferences中contextIsolation开启时preload脚本的权限配置正确，不要关闭contextIsolation降低安全性
• 如果WhatsApp Web后续更新了通知触发逻辑，只需要调整preload脚本中的劫持逻辑即可适配

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