如何在Electron中实现类似Win11表情应用的不抢焦点窗口

要复现Windows 11表情面板那种可操作但不夺走原窗口焦点、点击内容直接插入原窗口光标位置的行为，Electron提供了开箱即用的配置和API，无需复杂的全局输入处理，核心步骤如下：

1. 创建无焦点的悬浮窗口 #

创建窗口时通过关键配置确保窗口不会抢夺焦点，同时保持可交互、悬浮在最上层：

const { BrowserWindow, screen, globalShortcut, ipcMain } = require('electron');
let emojiWindow = null;
let focusedWindow = null;

// 注册快捷键（Win+.）触发面板
globalShortcut.register('Super+.', () => {
  // 记录当前聚焦的窗口，后续用于插入表情
  focusedWindow = BrowserWindow.getFocusedWindow();
  if (!focusedWindow || emojiWindow?.isVisible()) return;

  const primaryDisplay = screen.getPrimaryDisplay();
  const { width, height } = primaryDisplay.workAreaSize;

  emojiWindow = new BrowserWindow({
    width: 300,
    height: 400,
    // 保持窗口在最上层
    alwaysOnTop: true,
    // 不在任务栏显示图标
    skipTaskbar: true,
    // 自定义无框样式，贴近系统表情面板
    frame: false,
    resizable: false,
    // 窗口初始位置（屏幕右下角）
    x: width - 320,
    y: height - 420,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  emojiWindow.loadFile('emoji-panel.html');

  // 显示窗口但不激活，避免夺走原窗口焦点
  emojiWindow.show({ activate: false });

  // 确保窗口能接收鼠标事件（focusable默认为true，但配合activate: false不会抢夺焦点）
  emojiWindow.setIgnoreMouseEvents(false);
});

2. 实现表情插入逻辑 #

在表情面板的渲染进程中，监听表情点击事件，通过IPC通知主进程向原聚焦窗口插入表情：

渲染进程（emoji-panel.html） #

<div class="emoji-container">
  <span class="emoji-item">😀</span>
  <span class="emoji-item">😎</span>
  <!-- 更多表情 -->
</div>

<script>
const { ipcRenderer } = require('electron');
document.querySelectorAll('.emoji-item').forEach(item => {
  item.addEventListener('click', () => {
    const emoji = item.textContent;
    // 通知主进程插入表情
    ipcRenderer.send('insert-emoji', emoji);
  });
});
</script>

主进程处理插入 #

ipcMain.on('insert-emoji', (event, emoji) => {
  if (focusedWindow && !focusedWindow.isDestroyed()) {
    // 向原聚焦窗口发送输入事件，直接插入表情到光标位置
    focusedWindow.webContents.sendInputEvent({
      type: 'char',
      key: emoji
    });
    // 关闭表情面板
    emojiWindow.close();
    emojiWindow = null;
  }
});

关键说明 #

• show({ activate: false })是核心：这个配置让窗口显示时不会成为激活窗口，原窗口的焦点会被保留
• alwaysOnTop: true确保表情面板始终在其他窗口上方，不会被遮挡
• sendInputEvent API直接向目标窗口的WebContents发送字符输入，无需剪贴板中转，完全模拟原生输入行为

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