javascript - 使全局快捷方式可在 Electron 应用程序中配置

Question

我将一个网络应用程序(一个软电话)打包到一个 Electron 应用程序中，以利用我可以用 Electron 代码编写到应用程序中的一些自动化功能。
我正在使用 Electron globalShortcut注册一个全局快捷方式，将应用程序置于最前面，并将焦点放在网络应用程序的搜索栏上。

但是，因为我的同事也开始使用该应用程序，所以我想使使用的全局快捷方式可配置。
由于我无法更改 Web 应用程序本身(它由第三方托管)，因此我对如何创建用户可以设置快捷方式的菜单一无所知。
我知道有 menu和 menuItem对象，但我不知道如何向用户询问键或键组合以使用它设置为 globalShortcut。

我该怎么做？

编辑:
澄清我的期望:正如我已经解释过的，我正在寻找任何可以提供可以配置快捷方式的菜单的解决方案。该菜单可能存在于菜单栏/工具栏中，或者可能通过 javascript DOM 操作放入 Web 文档中 - 也许使用 iframe 作为最后的手段？
也欢迎任何有关如何在应用程序重新启动时保存设置的想法。

Answer 1

看到这个问题后，我对你的话题做了一个小调查。首先想到的是 Electron 是否可以访问关键事件，但根据这个 thread Electron 开发人员正在阻止 Electron 成为键盘记录器。所以我有以下方法来解决这个问题。我不知道这些是否是这种情况下最好的，但这是我认为可以完成的方式。这基本上是围绕 electron-store 构建的，它可以用来保存用户定义的组合键。因此，应用程序可以从商店中检索定义的组合键(如果没有配置组合，它会使用模式中提供的默认组合键)并使用它注册一个 globalshortcut。我已经提供了如何实现它的步骤

1. 使用 electron-store 安装和配置默认键值.喜欢就关注

主要.js

const Store = require('electron-store'); 
const schema = {
    defaultKeyCombination: {
        type: 'string',
        default: 'CommandOrControl+Y'
    }
}
const store = new Store({schema});

1. 导入这个defaultKeyCombination你可以注册一个global-shortcut当应用准备就绪时。 (不要忘记在应用销毁时删除全局快捷方式)

app.on('ready', () => {
    // Register a defaultKeyCombination shortcut listener.
    globalShortcut.register(store.get('defaultKeyCombination'), () => {
    // Do stuff when Y and either Command/Control is pressed.
    })
})

1. 通过单击菜单(菜单栏> 选项> 配置)创建并打开另一个浏览器窗口，让用户创建/输入 accelerator使用可用的 modifiers 修改输入框和 key codes (最好在输入框下方的新窗口中显示这些)；例如:用户可以在浏览器输入MODIFIER+KEY_CODE如CmdOrCtrl+A。

2. 一旦用户按下提交按钮，使用IPCRenderer发送输入的组合键到主进程并根据接收到的值设置存储 defaultKeyCombination 值。

3. 触发 IPC 向用户发送回复“请重启应用”，并在警报或其他任何情况下显示。

渲染进程

let args = "CmdOrCtrl+A"
ipcRenderer.send('set::keycombine',args)
    
ipcRenderer.on('done::keycombine', (event, arg) => {
// display message to restart the app
})

主要流程

ipcMain.on('set::keycombine', (event, arg) => {
    console.log(arg) // prints "keycombine"
    //setting the new value
    store.set('defaultKeyCombination', arg)
    // sending reply to renderer work is done
    event.reply('done::keycombine')
})

应用重新启动后，商店将加载新配置的组合键并使用它注册快捷事件。

这就是我在进行这项小型研究时想到的。在这里，我找到了一个名为 iohook 的关键事件监听器。 , 但这仅适用于 electron 2.XX 。在上面的过程中可能存在错误和流程问题，我只是发布了一些代码以获得想法。

编辑 1:

这是我的样本。在我的 index.html 上，我定义了一个按钮来调用 set() 函数。您可以集成输入框，以便您可以输入命令。一旦键被设置为商店，它总是加载这个新的键值，除非用户改变它。您可以阅读更多关于 electron-store from here 的信息希望这会给你一个想法:)

Main.js

const {app, BrowserWindow, ipcMain } = require('electron')
const Store = require('electron-store'); 
const schema = {
  defaultKeyCombination: {
    type: 'string',
    default: 'CommandOrControl+Y'
  }
}
const store = new Store({schema});

console.log(store.get("defaultKeyCombination"))

function createWindow () {
  const window = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  window.loadFile('./index.html')
  // window.loadURL("https://www.zap.co.il")
  window.webContents.openDevTools()
}
ipcMain.on('set::keycombine', (event, arg) => {
  console.log(arg) // prints "keycombine"
  //setting the new value
  store.set('defaultKeyCombination', arg)
  // sending reply to renderer work is done with new key 
  event.reply('done::keycombine', store.get('defaultKeyCombination'))
})


app.wheReady().then(createWindow)

//app.on('ready', createWindow)

app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Renderer.js

const { ipcRenderer } = require('electron')
function set() {
  console.log("clicked")
  let args = "CmdOrCtrl+A"
  ipcRenderer.send('set::keycombine',args)

}
ipcRenderer.on('done::keycombine', (event, arg) => {
  console.log("DONEEEEEEEEEE", arg)
})