<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Open external links and the file manager</title> </head> <body> <div> <h1> Open external links and the file manager </h1> <h3> The <code>shell</code> module in Electron allows you to access certain native elements like the file manager and default web browser. </h3> <p>This module works in both the main and renderer process.</p> <p> Open the <a href="https://www.electronjs.org/docs/latest/api/shell"> full API documentation (opens in new window) </a> in your browser. </p> </div> <div> <div> <h2>Open Path in File Manager</h2> <div> <div> <button id="open-file-manager"> View Demo </button> </div> <p> This demonstrates using the <code>shell</code> module to open the system file manager at a particular location. </p> <p> Clicking the demo button will open your file manager at the root. </p> </div> </div> </div> <div> <div> <h2>Open External Links</h2> <div> <div> <button id="open-ex-links">View Demo</button> </div> <p> If you do not want your app to open website links <em>within</em> the app, you can use the <code>shell</code> module to open them externally. When clicked, the links will open outside of your app and in the user's default web browser. </p> <p> When the demo button is clicked, the electron website will open in your browser. </p> <p></p> <div> <h2>ProTip</h2> <strong>Open all outbound links externally.</strong> <p> You may want to open all <code>http</code> and <code>https</code> links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in <code>assets/ex-links.js</code>. </p> <h5>Renderer Process</h5> <pre> <code> const shell = require('electron').shell const links = document.querySelectorAll('a[href]') for (const link of links) { const url = link.getAttribute('href') if (url.indexOf('http') === 0) { link.addEventListener('click', (e) => { e.preventDefault() shell.openExternal(url) }) } } </code> </pre> </div> </div> </div> </div> <script src="renderer.js"></script> </body> </html>