3 ways that electron uses the default browser to open the link

In the process of using electron to develop desktop programs, we may often need to make the links contained in the electron program directly call the system's default browser to open after being clicked. If you read the document carefully, you know that the core principle is through the shell module of electron. In the openExternal method to call the system default browser to open the link, but there are different methods for its realization, complete takeover, selective takeover, blindly introduce 3 effective methods.

1. Select all a tags in the rendering process to override the default click method of a tag. The code is as follows:

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

const links = document.querySelectorAll('a[href]')；
links.forEach(link => {
    link.addEventListener('click', e => {
        const url = link.getAttribute('href');
        e.preventDefault();
        shell.openExternal(url);
    });
});

The advantage of this method is that it can be precisely controlled. For example, we can control some links to be opened in the system browser, and some links are opened directly in electron. The disadvantage is that this method can only take over the web pages that can be maintained by itself, and cannot change the links in third-party web pages. Open the way.

2. This method is similar to the previous method, except that it is implemented from a different perspective. Here, opening the connection is not done directly in the rendering process, but tells the main process to call the system browser to open the link by communicating with the main process. The specific code is as follows:

Main process code:

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

...
ipcMain.on('open-url', (event, url) => {
    shell.openExternal(url);
});
...

Rendering process code:

const { shell, ipcRender } = require('electron');

const links = document.querySelectorAll('a[href]')；
links.forEach(link => {
    link.addEventListener('click', e => {
        const url = link.getAttribute('href');
        e.preventDefault();
        ipcRender.send('open-url', url);
    });
});

As mentioned above, the entry point of this method is not the same as the previous method, so it has the same advantages and disadvantages as the above method. It is beyond the reach of third-party websites or links in iframes, so how to make iframes Can the link in the system directly call the system default browser to open it? This is the three ways we are going to introduce.

3. Intercept all links by monitoring the new-window event of webContents in the main process, the specific code:

const { shell, app } = require('electron');

app.on('web-contents-created', (e, webContents) => {
    webContents.on('new-window', (event, url) => {
        event.preventDefault();
        shell.openExternal(url);
    });
});

This method takes over the opening methods of all links. The advantage is that it can handle the opening methods of links in iframes or third-party websites. The disadvantages are also obvious. It is not possible to separately control which types of links are opened through the default browser and which types of links are through electron Open directly.

The above three methods can be implemented in electron to call the default browser to open the link, but all have advantages and disadvantages. In actual development, you can choose the appropriate method according to your needs.

reward