Electron是否支持类似Chrome的“Find in Page”页面内查找功能？

Electron原生支持和Chrome一致的页面查找功能，你可以通过以下方式实现按下F3唤起搜索栏的行为：

• 核心依赖Electron的webContents.findInPage方法，结合全局快捷键监听即可实现完全匹配Chrome的F3查找逻辑。
• 具体实现步骤：
  1. 在主进程中注册F3和Shift+F3的全局快捷键。
  2. 触发快捷键时调用webContents.findInPage方法，首次调用会自动唤起系统原生的查找栏（样式与Chrome一致）。
  3. 通过参数控制查找方向，F3默认查找下一个，Shift+F3查找上一个。

示例代码（主进程） #

const { app, BrowserWindow, globalShortcut } = require('electron')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({ width: 800, height: 600 })
  mainWindow.loadFile('index.html')

  // F3：查找下一个
  globalShortcut.register('F3', () => {
    mainWindow.webContents.findInPage('', { forward: true })
  })

  // Shift+F3：查找上一个
  globalShortcut.register('Shift+F3', () => {
    mainWindow.webContents.findInPage('', { forward: false })
  })
}

app.whenReady().then(createWindow)

app.on('will-quit', () => {
  // 退出前注销所有全局快捷键
  globalShortcut.unregisterAll()
})

补充说明 #

• 首次调用findInPage时，Electron会自动弹出原生查找输入栏，用户输入内容后会实时匹配页面文本，完全复刻Chrome的交互逻辑。
• 若需自定义查找UI，可在渲染进程中实现自定义搜索栏，再调用findInPage方法处理查找逻辑，但原生查找栏已满足需求，推荐直接使用。

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