ELECTRON: Open link in external default OS browser

open-external-link.js

$('body').on('click', '#messages-view a', (event) => {
  event.preventDefault();
  let link = event.target.href;
  require("electron").shell.openExternal(link);
});

Youre the man!

Nice solution, thank you very much!)

Thanks for the solution. I came up with the following derivative since I wasn't using jQuery.

const isDescendant = (parent, child) => {
    let node = child.parentNode;
    while (node != null) {
        if (node === parent) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}

const configureOpenRenderedLinksInDefaultBrowser = () => {
    document.querySelector('body').addEventListener('click', event => {
        if (event.target.tagName.toLowerCase() === 'a' && isDescendant(htmlView, event.target)) {
            event.preventDefault();
            shell.openExternal(event.target.href);
        }
    });
}
configureOpenRenderedLinksInDefaultBrowser();

thank you very much, very helpful 👍

Another simple solution without using jQuery.

function configureOpenRenderedLinksInDefaultBrowser() {
  const aAll = document.querySelectorAll("a.link-view");
  if (aAll && aAll.length) {
    aAll.forEach(function(a) {
      a.addEventListener("click", function(event) {
        if (event.target) {
          event.preventDefault();
          let link = event.target.href;
          require("electron").shell.openExternal(link);
        }
      });
    });
  }
}

setTimeout(function() {
  configureOpenRenderedLinksInDefaultBrowser();
}, 100);

I was using this in a React App and had to play around with it a bit. Thought I'd share for anyone else since this is a cool feature.

const { shell } = window.require('electron');  // Import at top of page..

class Example extends Component {

/* State and other code stuffs */

  myClickFunction = () => {
    shell.openExternal(fancyLink);   // Here I utilize the feature. 
  }

}

electron/electron#9920 (comment)

Thank you !

@IzzleNizzle Thanks so much!

Here's another one without jQuery

const { shell } = require("electron")

document.body.addEventListener('click', event => {
  if (event.target.tagName.toLowerCase() === 'a' && event.target.protocol != 'file:') {
    event.preventDefault();
    shell.openExternal(event.target.href);
  }
});

Hi!
where should I put this in my app? I mean, the file?

same question, where?

Helps me to understand, thanks.