如何从网站启动我的电子应用程序 [英] How to launch my electron app from a website

问题描述

我们有一个用于签署交易（除其他事项外）的电子加密应用程序。

我们希望其他网站具有能够打开该电子应用程序的按钮的功能，其中预先填充了一些参数（交易信息）。

流为：

1. 用户在some-crypto-site.com上单击进行交易


2. 电子应用程序打开并带有预填充的参数


3. 用户点击电子应用程序中的签署交易


4. 电子应用程序确实在后台


5. 电子应用程序关闭并向某个加密站点发送消息。 com

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

我尝试过的操作（Linux，Chrome）

调用

我调查了

1. Electron
   
   

   此还允许您从命令行启动：

     open foobar：// xyz = 1 
     

   
   

   您如何回到原始呼叫者？

   
   

   我想当您启动应用程序时，您可以包含呼叫者网址：

    < a href =&; foobar：// abc = 1& caller = example.com>在foobar中打开< / a> 
     

   当您的电子应用程序完成数据处理后，它将简单地回溯该URL

   
   

   信用

   
   

   我的大部分调查结果基于：

   
   
   
   
   • 来自此 GitHub问题
   
   
   • 和来自@oikonomopo的出色工作
   
   
   
   

   We have an electron crypto app that signs transactions (among other things).

   We want other websites to have the ability to have a button that opens that electron app, pre-filled with some params (the transaction information).

   flow is:

   1. user clicks "make transaction" on some-crypto-site.com
   2. electron app opens up with pre-filled params
   3. user clicks "sign transaction" in electron app
   4. electron app does stuff behind the scenes
   5. electron app closes and sends a message to some-crypto-site.com

   This could be done at runtime, or install time.

   What I tried (linux, chrome)

   calling app.setAsDefaultProtocolClient with the code of this gist, which is basically:

   app.setAsDefaultProtocolClient("my-app")
   

   But after I put my-app://foo?bar=baz in chrome browser, I get the following popup, and pressing open-xdg does nothing (other than dismissing the popup)

   I looked into

   1. Electron protocol api which seems to handle in-app protocols only
   2. webtorrent .desktop file This might be the way to go, I'm just not sure how to go about it.

   Maybe there's a way to do so at install time through electron builder?

   Thanks in advance for the help, I have no idea how to proceed here!

   Resources that might be useful

   1. github repo with mac+window example
   2. github comment for linux
   3. github comment for linux 2
   4. SO answer for all 3 OSs
   5. SO windows answer
   6. npm package for windows registery
   7. SO mac answer
   8. SO linux answer
   9. microsoft docs for windows
   10. windows article
   11. github comment for windows
   12. github comment for mac
   13. info.plst for mac
   14. old repo for mac and win

   解决方案

   Since this may be relevant to what I’m doing at work, I decided to give it a go. I’ve only tested this on OSX though!

   I looked at the documentation for app.setAsDefaultProtocolClient and it says this:

   Note: On macOS, you can only register protocols that have been added to your app's info.plist, which can not be modified at runtime. You can however change the file with a simple text editor or script during build time. Please refer to Apple's documentation for details.

   These protocols can be defined when packaging your app with electron-builder. See 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"
         ]
       }
     }
   }
   

   In your main thread:

   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;
   

   In your renderer thread:

   Notice the use of the remote API to access the getLink function exported in the main thread

   <!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>
   

   This also allows you to launch from the command line:

   open "foobar://xyz=1"
   

   How do you get back to the original caller?

   I suppose that when you launch the app you could include the caller url:

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

   When your electron app finishes processing data, it would simply ping back that url

   Credits

   Most of my findings are based on:

   • From this GitHub issue
   • And the excellent work from @oikonomopo

   这篇关于如何从网站启动我的电子应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！