首页 文章

如何从网站上启动我的电子应用程序

提问于
浏览
11

我们有一个签署交易的电子加密应用程序(除其他外) .

我们希望其他网站能够拥有一个打开该电子应用程序的按钮,预先填入一些参数(交易信息) .

流程是:

  • 用户在some-crypto-site.com上单击"make transcation"

  • 电子应用程序打开预填充的参数

  • 用户在电子应用中单击"sign transaction"

  • 电子应用程序幕后工作

  • 电子应用程序关闭并向some-crypto-site.com发送消息

这可以在运行时或安装时完成 .

我尝试了什么(linux,chrome)

使用this gist的代码调用app.setAsDefaultProtocolClient,基本上是:

app.setAsDefaultProtocolClient("my-app")

但是我把 my-app://foo?bar=baz 放在chrome浏览器中后,我得到以下弹出窗口,然后按下open-xdg什么都不做(除了解除弹出窗口)

enter image description here

我调查了一下

也许有一种方法可以在安装时通过electron builder这样做?

在此先感谢您的帮助,我不知道如何在这里进行修改!

可能有用的资源

1 回答

  • 7

    由于这可能与我在工作中所做的相关,我决定试一试 . 我只在OSX上测试了这个!

    我看了app.setAsDefaultProtocolClient的文档,它说:

    注意:在macOS上,您只能注册已添加到应用程序的info.plist中的协议,这些协议在运行时无法修改 . 但是,您可以在构建期间使用简单的文本编辑器或脚本更改文件 . 有关详细信息,请参阅Apple的文档 .

    使用 electron-builder 打包应用程序时,可以定义这些协议 . 见 build

    {
      "name": "foobar",
      "version": "1.0.0",
      "main": "main.js",
      "scripts": {
        "start": "electron .",
        "dist": "electron-builder"
      },
      "devDependencies": {
        "electron": "^3.0.7",
        "electron-builder": "^20.38.2"
      },
      "dependencies": {},
      "build": {
        "appId": "foobar.id",
        "mac": {
          "category": "foo.bar.category"
        },
        "protocols": {
          "name": "foobar-protocol",
          "schemes": [
            "foobar"
          ]
        }
      }
    }
    

    在你的主线程中:

    const {app, BrowserWindow} = require('electron');
    
    let mainWindow;
    
    function createWindow () {
      mainWindow = new BrowserWindow({width: 800, height: 600})
      mainWindow.loadFile('index.html');
    }
    
    app.on('ready', createWindow);
    
    var link;
    
    // This will catch clicks on links such as <a href="foobar://abc=1">open in foobar</a>
    app.on('open-url', function (event, data) {
      event.preventDefault();
      link = data;
    });
    
    app.setAsDefaultProtocolClient('foobar');
    
    // Export so you can access it from the renderer thread
    module.exports.getLink = () => link;
    

    在您的渲染器线程中:

    请注意使用remote API访问主线程中导出的 getLink 函数

    <!DOCTYPE html>
    <html>
      <body>
        <p>Received this data <input id="data"/></p>
        <script>
          const {getLink} = require('electron').remote.require('./main.js');
          document.querySelector('#data').value = getLink();
        </script>
      </body>
    </html>
    

    Example

    <a href="foobar://abc=1">open in foobar</a>
    

    enter image description here

    这也允许您从命令行启动:

    open "foobar://xyz=1"
    

    enter image description here

    How do you get back to the original caller?

    我想当你启动应用程序时,你可以包含来电者网址:

    <a href="foobar://abc=1&caller=example.com”>open in foobar</a>
    

    当您的电子应用程序完成处理数据时,它只会ping回该网址

    Credits

    我的大部分发现都基于:

相关问题