Passing data from browser to electron app

Question

I am learning electronjs and want to open electron app by clicking on a href link from browser.

package.json

{
  "name": "my-app",
  "productName": "my-app",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": "src/index.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "echo \"No linting configured\""
  },
  "keywords": [],
  "author": {
    "name": "Alaksandar Jesus Gene",
    "email": "alaksandarjesus@yahoo.co.in"
  },
  "license": "MIT",
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "my_app"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.66",
    "@electron-forge/maker-deb": "^6.0.0-beta.66",
    "@electron-forge/maker-rpm": "^6.0.0-beta.66",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.66",
    "@electron-forge/maker-zip": "^6.0.0-beta.66",
    "electron": "21.0.1"
  }
}

Referring to link

index.js

const { app, dialog, BrowserWindow } = require('electron');
const path = require('path');

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
// eslint-disable-next-line global-require
if (require('electron-squirrel-startup')) {
  app.quit();
}

if (process.defaultApp) {
  if (process.argv.length >= 2) {
    app.setAsDefaultProtocolClient('foobar', process.execPath, [path.resolve(process.argv[1])])
  }
} else {
  app.setAsDefaultProtocolClient('foobar')
}

let mainWindow;

const createWindow = () => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: '100vw',
    height: '100vh',
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });
  mainWindow.maximize();
  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  // mainWindow.setMenuBarVisibility(false)
};


const gotTheLock = app.requestSingleInstanceLock()

if (!gotTheLock) {
  app.quit()
} else {
  app.on('second-instance', (event, commandLine, workingDirectory) => {
    // Someone tried to run a second instance, we should focus our window.
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore()
      mainWindow.focus()
    }
  })

  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on('ready', createWindow);

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

  app.on('activate', () => {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });

  // Handle the protocol. In this case, we choose to show an Error Box.
  app.on('open-url', (event, url) => {
    console.log("url");
    dialog.showErrorBox('Welcome Back', `You arrived from: ${url}`)
  })
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <script type="module">
      const {getLink} = require('electron').remote.require('./index.js');
      window.location.href='https://www.google.com';
    </script>
  </body>
</html>

I was able to create exe file from running

npm run publish

Now in my another project, i have a href link as

<a href="foobar://url=https://www.google.com">open in foobar</a>

Which by clicking opens the electron app built.

But i am getting require is not defined. Removing the line from index.html

const {getLink} = require('electron').remote.require('./index.js');

Works with no error.

How can i read the url from a href tag and pass it electron app.

I also followed but could not get the link

Passing data from browser to electron app

0 Answers0