Electron表情选择器：获取外部文本光标位置及表情插入实现

一、将窗口定位到文本光标位置 #

Electron原生的screen.getCursorScreenPoint()只能获取鼠标位置，无法直接拿到文本光标坐标，需要借助Mac的Accessibility API实现：

• 步骤1：获取当前焦点的文本输入控件
  通过执行AppleScript或桥接Objective-C代码，获取当前活跃应用的焦点输入元素。示例AppleScript可通过Electron的child_process.exec执行：

  tell application "System Events"
      set frontApp to first application process whose frontmost is true
      set focusedElement to value of attribute "AXFocusedUIElement" of frontApp
      return focusedElement
  end tell
  

• 步骤2：计算文本光标屏幕坐标
  借助Accessibility属性AXCaretPosition（光标在控件内的相对位置）、AXPosition（控件屏幕坐标），计算光标绝对屏幕坐标。如果用Objective-C桥接，核心逻辑如下：

  AXUIElementRef focusedElement = ...; // 从步骤1获取
  CGPoint caretPosition;
  AXUIElementCopyAttributeValue(focusedElement, kAXCaretPositionAttribute, (CFTypeRef *)&caretPosition);
  CGPoint elementPosition;
  AXUIElementCopyAttributeValue(focusedElement, kAXPositionAttribute, (CFTypeRef *)&elementPosition);
  CGPoint screenCaret = CGPointMake(elementPosition.x + caretPosition.x, elementPosition.y + caretPosition.y);
  

  把这段逻辑封装成Electron可调用的函数，即可拿到文本光标屏幕坐标。

• 步骤3：调整窗口位置
  用BrowserWindow.setPosition()设置窗口位置，建议向下偏移20px左右，避免挡住光标，和系统表情面板行为一致。

二、将表情插入到原光标位置 #

有两种可靠方案可选：

方案1：模拟键盘输入（无需剪贴板） #

• 唤起面板时，记录当前活跃应用和输入控件（复用步骤1的方法）。
• 用户选择表情后，通过Accessibility API重新激活原输入控件（设置AXFocused属性为true）。
• 用robotjs直接发送表情的Unicode字符：

  const robot = require('robotjs');
  robot.typeString(selectedEmoji);
  

  该方法无需操作剪贴板，体验流畅，但需确保输入控件支持Unicode输入。

方案2：剪贴板备份恢复法 #

针对特殊输入框兼容问题，可采用剪贴板方案：

• 唤起面板前，备份剪贴板内容：

  const { clipboard } = require('electron');
  const originalClipboard = clipboard.readText();
  

• 用户选择表情后，将表情写入剪贴板：

  clipboard.writeText(selectedEmoji);
  

• 模拟Command+V粘贴：

  robot.keyTap('v', ['command']);
  

• 延迟100ms左右恢复原剪贴板内容，确保粘贴完成：

  setTimeout(() => {
    clipboard.writeText(originalClipboard);
  }, 100);
  

额外注意事项 #

• 权限配置：Mac上需在「系统设置-隐私与安全性-辅助功能」中授权Electron应用，否则无法调用Accessibility API。
• 窗口属性：设置BrowserWindow的alwaysOnTop: true，确保面板在其他应用上方；选择表情后自动隐藏窗口，保持后台运行。

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