registering custom protocol at installation process in electron app

Question

Hi I am new to electron and was wondering how i can register a custom protocol for the app at the time of installation process of the app.

I am using electron-builder for building the app. Here is the build build code

"build": {
"appId": "com.test.testapp",
"productName": "testapp",
"asar": true,
"protocols": [{
  "name": "testapp",
  "schemes": [ "testapp" ]
}],
"nsis": {
  "oneClick": false,
  "perMachine": true,
  "allowToChangeInstallationDirectory": true,
  "runAfterFinish": false,
  "createDesktopShortcut": true
},
"squirrelWindows": {
  "msi": true
},
"directories": {
  "output": "distribution"
}

I know that by adding the below line registers the custom protocol

 app.setAsDefaultProtocolClient("testapp");

but it only does if i run the app at least the first time.

Which i don't want there is no guarantee that the user will launch the app after installation.

So is there a way that i can register the custom protocol in the installation process using electron-builder

Answer 1

I'm still new to Electron and electron-builder but solved this problem for NSIS-target already. First of all I should note that app.setAsDefaultProtocolClient used to handle custom protocols inside the application as far as I do understand. You need to register this custom protocol using electron-builder itself.

Secondly I need to choose between NSIS and squirrelWindows. NSIS is the preferable as long I understand because Squirrel is less supported and has some problems. Again I'm not an expert but I read something about it. So squirrelWindows section is redundant. You don't specify win.target and it is "nsis" by default.

There is a problem with the custom protocol registration for NSIS target. You can read more here: Protocol (scheme) for windows but there is a workaround. You need to create a file named installer.nsh in your build folder with such a content:

!macro customInstall DetailPrint "Register evehq-ng URI Handler" DeleteRegKey HKCR "evehq-ng" WriteRegStr HKCR "evehq-ng" "" "URL:evehq-ng" WriteRegStr HKCR "evehq-ng" "EveHQ NG SSO authentication Protocol" "" WriteRegStr HKCR "evehq-ng\DefaultIcon" "" "$INSTDIR\${APP_EXECUTABLE_FILENAME}" WriteRegStr HKCR "evehq-ng\shell" "" "" WriteRegStr HKCR "evehq-ng\shell\Open" "" "" WriteRegStr HKCR "evehq-ng\shell\Open\command" "" "$INSTDIR\${APP_EXECUTABLE_FILENAME} %1" !macroend

Replace evehq-ng with your protocol string and EveHQ NG SSO authentication Protocol with your protocol description.

After that you have to set nsis.perMachine to true.

I haven't yet solved this problem for Linux but work in this direction. You can see my code in my proof of concepts project here: EveHQ-NG proof of concepts application.

If you will solve this problem for Linux and MacOS write me a message somehow here or on GitHub.

Hope it helps.

Answer 2

Since you are using electron-builder you can do the following:

"build": {
    ... other top level electron-builder keys ...
    "protocols": [
       {
           "name": "Custom Protocol Name",
           "schemes": [
               "customProtocol"
           ]
       }
    ]
}

In case you wanted to handle customProtocol://some-link with your application.

More details: https://www.electron.build/configuration/configuration

(Search for protocols; as of now, the documentaion is a little mis-formatted. It's supposed to be the same top-level key as the fileAssociations key above it.)

Answer 3

custom protocol is still opening only after opening the electron application. And I also added installer.nsh inside build folder. I don't know what's the problem.

package.json

    {
  "name": "electron-project",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "pack": "build --dir",
    "dist": "build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^3.0.8",
    "electron-builder": "^20.38.5"
  },
  "dependencies": {
    "axios": "^0.18.0"
  },
  "build": {
    "win": {
      "target": "nsis"
    },
    "nsis": {
      "oneClick" : false , 
      "allowToChangeInstallationDirectory": true, 
      "include" : "dist/installer.nsh" , 
      "perMachine" : true 
    },
    "protocols": [{
      "name": "electron-deep-linking",
      "schemes": [
        "test"
      ]
    }],
    "mac": {
      "category": "public.app-category.Reference"
    }
  }
}

main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({ width: 800, height: 600 })

  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  mainWindow.on('closed', function () {

    mainWindow = null
  })
}
app.setAsDefaultProtocolClient('test')

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

Answer 4

Electron providing a very simple way to registering custom protocol URL in client machine(Windows, Mac)

so this way we can register and remove our own custom protocol in machine

const {app} = require('electron')
app.on('ready', onReady)

function onReady() {

    .... // write other code 
    if(!app.isDefaultProtocolClient('quickstart')) {
        app.setAsDefaultProtocolClient("quickstart", 'C:\\Users\\karthi\\electron-quick-start\\electron-quick-start-win32-x64\\electron-quick-start.exe');

    }
}

this code will register the custom protocol in machine, then you can open your app using browser like quickstart://params

for removing the custom protocol in machine

app.removeAsDefaultProtocolClient("quickstart", 'C:\\Users\\karthi\\electron-quick-start\\electron-quick-start-win32-x64\\electron-quick-start.exe');

here i used electron quick start app and i used electron-packager npm for building my app

For more information custom protocol electron-protocol