How to detect Microsoft Chromium Edge (chredge , edgium) in Javascript

Question

'Edge 75' will be (is?) the first Chromium Based Edge browser. How can I check if this browser is Edge on Chrome ?

(What I really want to know is if the browser fully supports data-uri's - https://caniuse.com/#feat=datauri - so feature detection would even be better. If you know a way to do that, I can change the question)

Solution 1

You could use the window.navigator userAgent to check whether the browser is Microsoft Chromium Edge or Chrome.

Code as below:

<script>
    var browser = (function (agent) {
        switch (true) {
            case agent.indexOf("edge") > -1: return "edge";
            case agent.indexOf("edg/") > -1: return "chromium based edge (dev or canary)"; // Match also / to avoid matching for the older Edge
            case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
            case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
            case agent.indexOf("trident") > -1: return "ie";
            case agent.indexOf("firefox") > -1: return "firefox";
            case agent.indexOf("safari") > -1: return "safari";
            default: return "other";
        }
    })(window.navigator.userAgent.toLowerCase());
    document.body.innerHTML = window.navigator.userAgent.toLowerCase() + "<br>" + browser;
</script>

The Chrome browser userAgent:

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/74.0.3729.169 safari/537.36

The Edge browser userAgent:

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/64.0.3282.140 safari/537.36 edge/18.17763

The Microsoft Chromium Edge Dev userAgent:

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/76.0.3800.0 safari/537.36 edg/76.0.167.1

The Microsoft Chromium Edge Canary userAgent:

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/76.0.3800.0 safari/537.36 edg/76.0.167.1

As we can see that Microsoft Chromium Edge userAgent contains the "edg" keyword, we could use it to detect whether the browser is Chromium Edge browser or Chrome browser.

Solution 2

Using CanIUse, the most universal feature which is unsupported on old Edge (which used the EdgeHtml engine) but supported in Edge Chromium and everywhere else (except IE), is the reversed attribute on an OL list. This attribute has the advantage of having been supported for ages in everything else.

(This is the only one I can find which covers all other browsers including Opera Mini; if that's not a worry for you there are plenty of others.)

So, you can use simple feature detection to see if you're on Old Edge (or IE) -

var isOldEdgeOrIE = !('reversed' in document.createElement('ol'));

Solution 3

Since I found this question from the other side, how to actually check if a pre-chromium-edge is being used, I found the following solution (IE checks included):

  // Edge < 18
  if (window.navigator.userAgent.indexOf('Edge') !== -1) {
    return true;
  }
  // IE 11
  if (window.document.documentMode) {
    return true;
  }
  // IE 10
  if (navigator.appVersion.indexOf('MSIE 10') !== -1) {
    return true;
  }
  return false;

Comments

[Sam Hobbs]

Except edge contains edg so saying contains the "edg" keyword is misleading. Also, I think that the word keyword is overused. Would it work to test for the text "edg/"?

[ViliusL]

It works, but code is weird... Plus that last line ...