Opening external links in Electron with the HTML anchor tag

Question

I'm making an electron app and I want to make a button in my index.html file to open up the default internet browser (ex. Chrome) to my GitHub repository website. I have seen other StackOverflow questions on this with successful answers, but they contain snippets of JavaScript and I don't know where to put them.

Answer 1

Use the shell module:

Add the following code to your main.js:

At its beginning:

const {ipcMain} = require('electron');
const {shell} = require('electron');

After the app.on function:

ipcMain.on('loadGH', (event, arg) => {
    shell.openExternal(arg);
});

Within the head of your index.html you then need to instantiate the ICP module:

<script>
const ipc = require('electron').ipcRenderer;
</script>

Then use the onclick event to actually perform the loading of the new window:

<a HREF="#" onclick="ipc.send('loadGH','http://github.com/yourGitHubName');">Link</a>

Answer 2

This answer references an earlier ambigious version of the question, then hinting at the need to open a new electron window.

When you say "external link" I assume you want to open another window containing your github repo.

This can be done by adding the following code to your main.js:

At its beginning:

const ipcMain = require('electron').ipcMain;

Inside the app.on function:

var externalWindow = new BrowserWindow ({
    width: 800,
    height: 600
})

After the app.on function:

ipcMain.on('loadGH', (event, arg) => {
    externalWindow.loadURL(arg);
});

Within the head of your index.html you then need to instantiate the ICP module:

<script>
const ipc = require('electron').ipcRenderer;
</script>

Then use the onclick event in an href to actually perform the loading of the new window:

<a HREF="#" onclick="ipc.send('loadGH','http://github.com/yourGitHubName');">Link</a>