我将一个 web 应用程序(一个软电话)打包到一个 Electron 应用程序中,以从我可以用 Electron 编码到应用程序中的少数自动化中受益。
我正在使用 Electron globalShortcut 注册一个全局快捷方式,将应用程序带到前面并专注于网络应用程序的搜索栏。

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

我怎么做?

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

最佳答案

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

  • 使用 electron-store 安装和配置默认键值。喜欢如下

  • 主文件
    const Store = require('electron-store');
    const schema = {
        defaultKeyCombination: {
            type: 'string',
            default: 'CommandOrControl+Y'
        }
    }
    const store = new Store({schema});
    
  • 导入这个 defaultKeyCombination 您可以在应用程序准备好时注册一个 global-shortcut。 (不要忘记在应用程序销毁时删除 globalshortcut)

  • app.on('ready', () => {
        // Register a defaultKeyCombination shortcut listener.
        globalShortcut.register(store.get('defaultKeyCombination'), () => {
        // Do stuff when Y and either Command/Control is pressed.
        })
    })
    
  • 通过单击菜单(菜单栏> 选项> 配置)创建并打开另一个浏览器窗口,并让用户使用可用的 acceleratormodifiers 创建/输入 key codes 修饰符到输入框中(最好在下面的新窗口中显示这些)输入框);
    例如:用户可以在浏览器中输入 MODIFIER+KEY_CODE CmdOrCtrl + A in 。
  • 一旦用户按下 submit 按钮,使用 IPCRenderer 将输入的组合键发送到主进程,并根据接收到的值设置存储 defaultKeyCombination 值。
  • 触发 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:
    这是我的 sample 。在我的 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)
    })
    
    

    关于javascript - 在 Electron 应用程序中配置全局快捷方式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/61057124/

    10-11 06:16
    查看更多