How to detect Safari, Chrome, IE, Firefox and Opera browsers?

Question

I have 5 addons/extensions for Firefox, Chrome, Internet Explorer(IE), Opera, and Safari.

How can I correctly recognize the user browser and redirect (once an install button has been clicked) to download the corresponding addon?

Octameter

try detectjs, it can be used for all browsers – Naif

Possible duplicate of Browser detection in JavaScript? – Harlandharle

detect.js is no longer maintained (according to github.com/darcyclarke/Detect.js), they recommend github.com/lancedikson/bowser – Plotinus

I used UAParser Plugin, it is written in Vanilla JavaScript. Source: How to detect browser, engine, OS, CPU, and device using JavaScript? – Spinoza

Possible duplicate of How can you detect the version of a browser? – Semicircle

The MDN docs are useful: developer.mozilla.org/en-US/docs/Web/HTTP/… – Gause

I'd like to re-surface this question - is there a reliable & simple answer to this yet? There are many (old) questions like this on SO and yet most of them work off the userAgent function which even w3schools acknowledges is inaccurate. I've tested some of the answers to this question and similar ones, and none of them seem reliable. If I'm better off asking a new question please let me know. – Dionysiac

See #2401435 – Horripilate

Answer 1

Googling for browser reliable detection often results in checking the User agent string. This method is not reliable, because it's trivial to spoof this value.
I've written a method to detect browsers by duck-typing.

Only use the browser detection method if it's truly necessary, such as showing browser-specific instructions to install an extension. Use feature detection when possible.

Demo: https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;


var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

Analysis of reliability

The previous method depended on properties of the rendering engine (-moz-box-sizing and -webkit-transform) to detect the browser. These prefixes will eventually be dropped, so to make detection even more robust, I switched to browser-specific characteristics:

• Internet Explorer: JScript's Conditional compilation (up until IE9) and document.documentMode.
• Edge: In Trident and Edge browsers, Microsoft's implementation exposes the StyleMedia constructor. Excluding Trident leaves us with Edge.
• Edge (based on chromium): The user agent include the value "Edg/[version]" at the end (ex: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.16 Safari/537.36 Edg/80.0.361.9").
• Firefox: Firefox's API to install add-ons: InstallTrigger
• Chrome: The global chrome object, containing several properties including a documented chrome.webstore object.
• Update 3 chrome.webstore is deprecated and undefined in recent versions
• Safari: A unique naming pattern in its naming of constructors. This is the least durable method of all listed properties and guess what? In Safari 9.1.3 it was fixed. So we are checking against SafariRemoteNotification, which was introduced after version 7.1, to cover all Safaris from 3.0 and upwards.
• Opera: window.opera has existed for years, but will be dropped when Opera replaces its engine with Blink + V8 (used by Chromium).
• Update 1: Opera 15 has been released, its UA string looks like Chrome, but with the addition of "OPR". In this version the chrome object is defined (but chrome.webstore isn't). Since Opera tries hard to clone Chrome, I use user agent sniffing for this purpose.
• Update 2: !!window.opr && opr.addons can be used to detect Opera 20+ (evergreen).
• Blink: CSS.supports() was introduced in Blink once Google switched on Chrome 28. It's of course, the same Blink used in Opera.

Successfully tested in:

• Firefox 0.8 - 61
• Chrome 1.0 - 71
• Opera 8.0 - 34
• Safari 3.0 - 10
• IE 6 - 11
• Edge - 20-42
• Edge Dev - 80.0.361.9

Updated in November 2016 to include detection of Safari browsers from 9.1.3 and upwards

Updated in August 2018 to update the latest successful tests on chrome, firefox IE and edge.

Updated in January 2019 to fix chrome detection (because of the window.chrome.webstore deprecation) and include the latest successful tests on chrome.

Updated in December 2019 to add Edge based on Chromium detection (based on the @Nimesh comment).

Carpogonium

FYI This doesn't work with Chrome Extensions as window.chrome.webstore is undefined there. Haven't checked it with Firefox Extensions. is.js mentioned elsewhere does work in both Chrome and Firefox Extensions. – Deform

isSafari doesn't work with Safari 10. I'm going to argue this is a bad solution (not that I have a good one). There's no guarantee many of the things your checking for won't be removed OR won't be added by other browsers. Every site that was using this code for check for Safari just broke with macOS Sierra or Safari 10 upgrades :( – Diantha

@Diantha I agree with you. This solution works fine when you deploy it, but is not really future-proof as browsers evolves. – Ponceau

@Diantha I also agree with you. Regardless, I just evolved my solution to include Safaris from 9.1.3 and up :) – Primaveria

This breaks JS execution in Safari 10.0.1 as it doesn't know the objects "opr" and window.chrome, therefore I added two checks: – Game

var oprAddons = (typeof opr === 'object')? opr.addons : false; – Game

var isOpera = (!!w.opr && !!oprAddons) || !!window.opera || n.userAgent.indexOf(' OPR/') >= 0; – Game

var chromeWebstore = (typeof window.chrome === 'object')? window.chrome.webstore : false; – Game

var isChrome = !!window.chrome && !!chromeWebstore; – Game

I don't know how to insert line breaks in comments so I used several comments. btw., I've no Mac at home so I used macincloud.com for Safari testing. Very slow RDP connection to a virtual Mac but nifty anyway, 24h trial for 99c. – Game

In Chrome it says "true" also for Blink. – Drawtube

But has this been tested on the mobile versions of those browsers as well as the desktop versions too? And truthfully, there are different mobile versions and different desktop versions per platform. So really, firefox has 3 binaries for Windows, Linux, Mac OS, and 2 binaries for Android and iOS. – Kwok

I am particularly trying to detect if the browser is Chrome or Firefox, and it seems to work great in Windows, Debian and MacOS for both browsers. In Android, it fails detecting Chrome, and in iPhone it fails for both of them. – Zosi

Thank you. Though, just tested on Chrome 55.0.2883.87 m, and it didn't work. – Bragdon

I'd like to check for chrome and this is definitely not working on latest chrome mobile .55 version :/ – Lowrey

A general question though, why !!document.documentMode? Instead this is good without this !!. – Indium

Mozilla added the runtime.getBrowserInfo() WebExtension-API to get information about the browser in which an add-on is running. – Misdirect

It does not work with desktop version of Safari/603.2.4, anyone knows a solution? – Coolant

@Coolant add /constructor/i.test(function HTMLElementConstructor() {}) || to the beginning of the safari test – Deterrent

The current isSafari does not work under <iframe> under Safari 10.1.2 – Ritz

ReactJS Addendum: Since React is strongly-typed, this will cause compile-time errors for lack of definition in var's opr and safari. – Gertrudegertrudis

Note: When Chrome is run headless, there is no window.chrome object. – Citify

I get this error in safari 'safari' is not defined – Extrajudicial

Thanks for the ans. Worked for Desktop but not working in Android phone especially for Chrome. tell me if any solution there,, thanks again... – Gurolinick

"It's trivial to spoof this value" -- Why is this being acknowledged at all? ANY form of browser detection can be spoofed. That doesn't matter at all; browser detection is largely a form of convenience to let people know of browser UI hints, known issues, etc., and user agents are a perfectly valid way to do that. This answer feels like a terrible mixed misunderstanding of feature detection vs user agent sniffing, and I'm really not sure why it's so popular. Nothing you've said is technically incorrect, but this is an incredibly unhelpful answer. – Mercedezmerceer

Detecting mobile browser: #11382173 – Steck

FYI !!window.chrome && !!window.chrome.webstore; returns false when Chrome is in headless mode. – Positive

Firefox typeof InstallTrigger is returning undefined for me in Firefox v25. I am using it in the debug console – Zingale

Chrome v.64 will report back "Safari". – Gertrudegertrudis

window.chrome.webstore is deprecated starting from Chrome ver. 71: blog.chromium.org/2018/06/… – Yakutsk

!!window.chrome.webstore return false from chrome on android. – Puentes

Chrome test (due to v71 obsolescence) can be fixed by !!window.chrome && !isOpera. – Morley

As chrome and others are non-standard window properties it would be safer to use window.hasOwnProperty('chrome'). In other hand I am personally not a big fan of double negation. It is confusing when reading code. – Oppose

I think you get less credit so thank you for coming up with a great solution. The usage of navigator.userAgent is rampant and i feel that your direction should be implemented natively. – Ciliary

Turns out !!window.chrome && !isOpera doesn't work as it matches for Edge. – Morley

!!window.navigator.plugins.namedItem('Chrome PDF Plugin') – Deafmute

Its browser version dependent and doen't work in Chrome 71(tested). My code broke and it took lot of time to figure out. – Abvolt

isChrome: false with Chrome 71 win7 – Haply

Can confirm on chrome. Does no work on Chrome 71 & 72. – Gullible

var isChrome = !!window.chrome && !!window.Browser && window.Browser.name === 'chrome'; This appropriately identifies Chrome, but excludes Edge. Haven't tested with Opera. – Franzoni

FYI Edge will be switching to the Chromium engine: theverge.com/2018/12/4/18125238/… – Armory

it's false for all on chrome on ios – Myriammyriameter

Took some time to figure out, so it might help some: !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime) will fail when you open local domains or IPs! Chrome seems to invalidate the runtime when you browse to a local page. – Sticktight

Adding to @eyecatchUp, it seems that the chrome test works on https pages, but not http pages (without ssl). – Turbosupercharger

This seems to work better: var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.csi) It at least works when the URL is not SSL and reports correctly on Edge. I'm not sure about Safari. – Obnubilate

As of right now, my chrome Version 74.0.3729.169 says isChrome: true and isBlink: true So seems like there is an issue here. – Alburg

Why used: false || !!document.documentMode if it is equivalent to !!document.documentMode? Am I missing something? – Anticosti

isChrome being true through Opera. Not a problem as Opera behaviour is too similar to Chrome but is still a missmatch. – Michael

"because it's trivial to spoof this value." so what? If a browser is pretending to be something else, then why should the site care? – Lammastide

@UKMonkey, have you found any lightweight solution to find a browser using userAgent? – Jaysonjaywalk

@Jaysonjaywalk not sure what exactly you mean, but the answer from Nimesh seems to be what you're looking for? – Lammastide

@UKMonkey, yes, It is what I am looking for. Although I needed more browsers (like Yandex browser, Vivaldi, etc..). So finally I found a library that does what I need, in case other people are interested the library is called bowser – Jaysonjaywalk

use document['documentMode'] instead of document.documentMode, if you want to get rid of the error/warning message – Bagby

Seems pretty ridiculous to me that we have to go through all this to find out which browser is being used. I would think it would make sense for the browser vendors to agree on a standard javascript variable they can all send down, some crazy name like 'browserName'! – Flocculant

Isn’t the Edge Chromium detection of just the substring “Edg” going to match on the old “Edge” (Trident based)? – Anschluss

Anyone has code to also detect Safari 11, 12 and 13? – Ait

Chrome 80 and 81 are not detected with this. And not Safari on iOS (no idea where it has its version tag). – Friedrich

This has failed to detect Firefox 78. – Complicacy

isEdgeChromium is false for Edge Version 83.0.478.61 (Official build) (64-bit). Otherwise this works for the latest Safari, Firefox, and Chrome on Windows 10 and OSX Catalina. – Streamlined

Safari detection is no longer working as of Safari 14 Beta 2 on macOS 10.15.6 Catalina. – Olein

I'm running Edge Chromium, but it says false for it. Everything is false. – Casta

After reading all the comments I will never use duck typing to detect which browser is being used ever again. Using the userAgent string is not without it's problems but still seems like the best option and is still the preferred method by Google. – Groenendael

Unfortunately not working under iOS 12.4.9 ipad Air in all three browsers: Safari, Chrome, Firefox – Boomer

Is it intended, that on EdgeChromium and on Opera also isChrome == true? Besides that, it is kind a cool hack! :) – Affianced

Please do not do that. It creates issues down the line for browser implementers and web developpers. When using non standard API for detecting a browser, basically we solidify the existence of this API and makes it part of the Web platform. The more people rely on it, the more the browser implementer will be unable to remove it one day because removing it will break websites. – Epidemic

@dmikester1—one reason vendors do not want to standardise navigator.useragent is because they do not want their users to see "Your browser is not supported, please download a supported browser from …" like in the Netscape vs IE days. – Ung

please update it, because it's doesn't work in Edge Chromium, (!!window.chrome.webstore || !!window.chrome.runtime) always return false – Hughmanick

Chrome 71+ returns false. This answer needs to be updated... – Vietnamese

isChrome: true on edge browser – Martinet

Doesn't work in modules it seems, well it's pretty damn stupid that this sort of approach is what one would have to resort to. It's brittle & can change at any time. Well, seeing as its javascript pretty much explains most of it. – Dhaulagiri

it's not working anymore – Maypole

As of 2022, Firefox detection with InstallTrigger is going to break because it's going away around Firefox 103 or so. – Parthia

I was trying to use this in a browser extension background script, but got an error that 'window' is not defined which is understandable because it's a background script and doesn't have a window. Is there any solution to that? – Osage

This is ever-obsolete. Instead use npmjs.com/package/detect-browser – Adulteress

This solution no longer works in modern browsers, as mentioned above. – Sigmoid

This doesn't work for me. I get all "false" n MS Edge Version 108.0.1462.46. Your answer is extremely overrated with 1900+ upvotes. @Nimesh's answer below has only 184 upvotes and it works! – Pennant

For Firefox version 112+ the check for InstallTrigger does not work anymore. typeof mozInnerScreenX !== 'undefined' might be an alternative. – Mercedes

Firefox 113 gives a warning that InstallTrigger will be deprecated. Fast forward to Firefox 124, the warning has disappeared (Mozilla changed their mind?) and the test of installTrigger continues to work. – Yip

Answer 2

You can try the following way to check the browser:

function myFunction() {
  if ((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1) {
    alert('Opera');
  } else if (navigator.userAgent.indexOf("Edg") != -1) {
    alert('Edge');
  } else if (navigator.userAgent.indexOf("Chrome") != -1) {
    alert('Chrome');
  } else if (navigator.userAgent.indexOf("Safari") != -1) {
    alert('Safari');
  } else if (navigator.userAgent.indexOf("Firefox") != -1) {
    alert('Firefox');
  } else if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) //IF IE > 10
  {
    alert('IE');
  } else {
    alert('unknown');
  }
}

<!DOCTYPE html>
<html>

<body>
  <p>What is the name(s) of your browser?</p>
  <button onclick="myFunction()">Try it</button>
  <p id="demo"></p>

</body>

</html>

And if you need to know only IE Browser version then you can follow below code. This code works well for version IE6 to IE11

function getInternetExplorerVersion() {
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf("MSIE ");
  var rv = -1;

  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
  {

    if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
      //For IE 11 >
      if (navigator.appName == 'Netscape') {
        var ua = navigator.userAgent;
        var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null) {
          rv = parseFloat(RegExp.$1);
          alert(rv);
        }
      } else {
        alert('otherbrowser');
      }
    } else {
      //For < IE11
      alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    }
    return false;
  }
}

<!DOCTYPE html>
<html>

<body>

  <p>Click on Try button to check IE Browser version.</p>

  <button onclick="getInternetExplorerVersion()">Try it</button>

  <p id="demo"></p>

</body>

</html>

Frayne

Why would one write so many lines of code? userAgent is ambiguous. – Cardoon

What about Microsoft Edge? – Downwards

doesn't work. Using Chrome 51 and user agent includes Safari string: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36 – Stopple

the answer above checks for chrome before checking for safari. because safari will not have chrome keyword in the useragent. example of safari useragent - mozilla/5.0 (macintosh; intel mac os x 10_11_5) applewebkit/601.6.17 (khtml, like gecko) version/9.1.1 safari/601.6.17 – Tip

Stackoverflow uses this method – Aleksandr

Work smoothly on Chrome 55, Firefox 50 and IE 11, but not on Edge 38.14393.0.0 (shows "Chrome"). Thank you. – Bragdon

Edge has safari in it, need to check edge prior to safari – Grommet

and what we should write for chrome in ipad? – Undenominational

When testing this in Opera (latest version), this returns 'Chrome' for me. To fix this, I changed the Opera if statement to: if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 ) – Rwanda

At least use a switch block. – Cacogenics

For some reason my navigator.userAgent in chrome includes Safari: "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36" but my firefox does not: "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:25.0) Gecko/20100101 Firefox/25.0" – Zingale

I've heard navigator.userAgent is unreliable because of spoofing... – Gause

Which is expected and desired: if someone sets their UA to a different browser, they're doing that to get the content that would get served for that browser. User agent spoofing is literally why you want a browser detection solution based on userAgent instead of using duck typing, as you're generating different content for different browsers (as opposed to trying to implement progressive enhancement based on JS support, which should use duck typing because you'd need feature detection). – Ethe

This is my userAgent string in Chrome!! 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36' This method doesn't work since it contains Safari and Mozilla too. – Cienfuegos

Yes! This works! You should get the most upvotes, not the first answer, which got 1900 upvotes and it doesn't work. – Pennant

it doesn't handle brave browser – Excide

@Excide Brave will never work because they intentionally hide it from the user agent. Check github.com/brave/browser-laptop/blob/master/CHANGELOG.md#090 – Eulogy

@Eulogy there's a way #36523948 – Excide

This detects Chrome on IOS as Safari! Take care – Gilson

I was able to detect Chrome on iOS by using if ((navigator.userAgent.indexOf('Chrome') != -1) || (navigator.userAgent.indexOf('CriOS') != -1)) ...apparently on iOS Chrome uses CriOS in the user agent (at least on the devices I have tested) – Bisect

Answer 3

Here are several prominent libraries that handle browser detection as of Dec 2019.

Bowser by lancedikson - 4,065★s - Last updated Oct 2, 2019 - 4.8KB

var result = bowser.getParser(window.navigator.userAgent);
console.log(result);
document.write("You are using " + result.parsedResult.browser.name +
               " v" + result.parsedResult.browser.version + 
               " on " + result.parsedResult.os.name);

<script src="https://unpkg.com/[email protected]/es5.js"></script>

*supports Edge based on Chromium

---

Platform.js by bestiejs - 2,550★s - Last updated Apr 14, 2019 - 5.9KB

console.log(platform);
document.write("You are using " + platform.name +
               " v" + platform.version + 
               " on " + platform.os);

<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script>

jQuery Browser by gabceb - 504★s - Last updated Nov 23, 2015 - 1.3KB

console.log($.browser)
document.write("You are using " + $.browser.name +
               " v" + $.browser.versionNumber + 
               " on " + $.browser.platform);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>

Detect.js (Archived) by darcyclarke - 522★s - Last updated Oct 26, 2015 - 2.9KB

var result = detect.parse(navigator.userAgent);
console.log(result);
document.write("You are using " + result.browser.family +
               " v" + result.browser.version + 
               " on " + result.os.family);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>

Browser Detect (Archived) by QuirksMode - Last updated Nov 14, 2013 - 884B

console.log(BrowserDetect)
document.write("You are using " + BrowserDetect.browser +
               " v" + BrowserDetect.version + 
               " on " + BrowserDetect.OS);

<script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script>

---

Notable Mentions:

• WhichBrowser - 1,355★s - Last updated Oct 2, 2018
• Modernizr - 23,397★s - Last updated Jan 12, 2019 - To feed a fed horse, feature detection should drive any canIuse style questions. Browser detection is really just for providing customized images, download files, or instructions for individual browsers.

Further Reading

• Stack Overflow - Browser detection in JavaScript?
• Stack Overflow - How can you detect the version of a browser?

Semicircle

Well worth a few Kb of overhead to not reinvent the wheel. – Nerve

Answer 4

I know it may be overkill to use a lib for that, but just to enrich the thread, you could check is.js way of doing this:

is.firefox();
is.ie(6);
is.not.safari();

Eructate

Just worth noting that under the hood it's primarily doing User-Agent detection. Supplemented with vendor detection / some feature detection in places. – Seaware

@Seaware sure, you are absolutely right. That is actually what I meant with my answer: open the source code of is.js and check how they do it. – Eructate

jQuery used to include similar properties: $.browser.msie... Were removed from version 1.9 api.jquery.com/jquery.browser – Stopple

@RafaelEyng: I think the issue with it doing User-Agent detection is that this method is unreliable. – Gertrudegertrudis

This is definitely the most robust approach when you assume that the UA string hasn't been modified. It also properly detects OS (android, win, mac, linux); device type (desktop, tablet, mobile). It can also test for version of browser. – Versieversification

is.js Bug: is.Chrome() returns false on the Google Chrome of all iOS Devices. MacOS on Chrome works. – Hornblende

Answer 5

In case anyone finds this useful, I've made Rob W's answer into a function that returns the browser string rather than having multiple variables floating about. Since the browser also can't really change without loading all over again, I've made it cache the result to prevent it from needing to work it out the next time the function is called.

/**
 * Gets the browser name or returns an empty string if unknown. 
 * This function also caches the result to provide for any 
 * future calls this function has.
 *
 * @returns {string}
 */
var browser = function() {
    // Return cached result if avalible, else get result then cache it.
    if (browser.prototype._cachedResult)
        return browser.prototype._cachedResult;

    // Opera 8.0+
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;

    // Blink engine detection
    var isBlink = (isChrome || isOpera) && !!window.CSS;

    return browser.prototype._cachedResult =
        isOpera ? 'Opera' :
        isFirefox ? 'Firefox' :
        isSafari ? 'Safari' :
        isChrome ? 'Chrome' :
        isIE ? 'IE' :
        isEdge ? 'Edge' :
        isBlink ? 'Blink' :
        "Don't know";
};

console.log(browser());

Flier

in Edge browser, it returns Chrome – Runesmith

@eFriend I updated the answer to the latest browser tests. – Primaveria

I like this, but I would have preferred a fallback to userAgent(), instead of "Don't know". – Gertrudegertrudis

Property window.chrome.webstore was removed in Chrome 71, so this approach is no longer working. – Gabbi

you can overwrite the function with a function that simply returns the cachedResult and omit the if statement. The first time around you have to still return the result. browser = function(){ return cachedResult}; return cachedResult; – Salimeter

Says Don't know for Microsoft's new Chrome version of Edge. – Hiragana

I tried this in Safari, Firfox, and Chrome, always returns Don't know. – Salters

Answer 6

Short variant (update 10 july 2020 mobile browser detection fix)

var browser = (function() {
    var test = function(regexp) {return regexp.test(window.navigator.userAgent)}
    switch (true) {
        case test(/edg/i): return "Microsoft Edge";
        case test(/trident/i): return "Microsoft Internet Explorer";
        case test(/firefox|fxios/i): return "Mozilla Firefox";
        case test(/opr\//i): return "Opera";
        case test(/ucbrowser/i): return "UC Browser";
        case test(/samsungbrowser/i): return "Samsung Browser";
        case test(/chrome|chromium|crios/i): return "Google Chrome";
        case test(/safari/i): return "Apple Safari";
        default: return "Other";
    }
})();
console.log(browser)

Typescript version:

export enum BROWSER_ENUM {
  EDGE ,
  INTERNET_EXPLORER ,
  FIRE_FOX ,
  OPERA ,
  UC_BROWSER ,
  SAMSUNG_BROWSER ,
  CHROME ,
  SAFARI ,
  UNKNOWN ,
}

const testUserAgent = (regexp: RegExp): boolean => regexp.test(window.navigator.userAgent);

function detectBrowser(): BROWSER_ENUM {
  switch (true) {
    case testUserAgent(/edg/i): return BROWSER_ENUM.EDGE;
    case testUserAgent(/trident/i): return BROWSER_ENUM.INTERNET_EXPLORER;
    case testUserAgent(/firefox|fxios/i): return BROWSER_ENUM.FIRE_FOX;
    case testUserAgent(/opr\//i): return BROWSER_ENUM.OPERA;
    case testUserAgent(/ucbrowser/i): return BROWSER_ENUM.UC_BROWSER;
    case testUserAgent(/samsungbrowser/i): return BROWSER_ENUM.SAMSUNG_BROWSER;
    case testUserAgent(/chrome|chromium|crios/i): return BROWSER_ENUM.CHROME;
    case testUserAgent(/safari/i): return BROWSER_ENUM.SAFARI;
    default: return BROWSER_ENUM.UNKNOWN;
  }
}

export const BROWSER: BROWSER_ENUM = detectBrowser();

export const IS_FIREFOX = BROWSER === BROWSER_ENUM.FIRE_FOX;

Functional algorithm, just for fun:

 var BROWSER =  new Array(
     ["Microsoft Edge", /edg/i],
     ["Microsoft Internet Explorer", /trident/i],
     ["Mozilla Firefox", /firefox|fxios/i],
     ["Opera", /opr\//i],
     ["UC Browser", /ucbrowser/i],
     ["Samsung Browser", /samsungbrowser/i],
     ["Google Chrome", /chrome|chromium|crios/i],
     ["Apple Safari", /safari/i],
     ["Unknown", /.+/i],
 ).find(([, value]) => value.test(window.navigator.userAgent)).shift();

Kilocalorie

If you dislikes me, please explain why. – Kilocalorie

this will show 'safari' while browsing with 'chrome' on ios – Myriammyriameter

This method worked with Chrome and Firefox on desktop and Safari on iOS. It fails with Chrome and Firefox on iOS. – Complicacy

@Complicacy retest this please, I haven't any apple device:) – Kilocalorie

I tested this with Firefox (78.0.1 on Win10), Chrome (83.0 on Win10), Edge (83.0 on Win10 - Chromium base), Firefox(27 on iOS), and Chrome (83.0 on iOS) successfully. This logic still reported Safari (on iOS 13.5.1) still reported as 'chrome'. Could this be because Chromium is derived from WebKit base? – Complicacy

@Complicacy yes all webkits are similar, but have some different features.But browsers can have different useragents on ios. For example firefox and chrome on ios have fxios and crios strings. Retest it please) – Kilocalorie

It does work on both Chrome and Safari on macOs. @BReddy: Order does matter here, hence the Safari check needs to be after Chrome. – Duhon

this works for me since I'm targeting Chrome, Edge, Firefox (later Safari) only. But is it currently reliable for all browsers? – Osage

@Osage it currently reliable for all browsers that you see in a code)Microsoft Edge,Microsoft Internet Explorer,Opera,Firefox,Uc,samsung,chrome,safari – Kilocalorie

Answer 7

No idea if it is useful to anyone but here is a variant that would make TypeScript happy:

export function getBrowser() {

 // Opera 8.0+
    if ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0) {
        return 'opera';
    }

    // Firefox 1.0+
    if (typeof window["InstallTrigger"] !== 'undefined') {
        return 'firefox';
    }

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    if (/constructor/i.test(window["HTMLElement"]) || (function(p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof window["safari"] !== 'undefined' && window["safari"].pushNotification))) {
        return 'safari';
    }

    // Internet Explorer 6-11
    if (/*@cc_on!@*/false || !!document["documentMode"]) {
        return 'ie';
    }

    // Edge 20+
    if (!(/*@cc_on!@*/false || !!document["documentMode"]) && !!window["StyleMedia"]) {
        return 'edge';
    }

    // Chrome 1+
    if (!!window["chrome"] && !!window["chrome"].webstore) {
        return 'chrome';
    }

    // Blink engine detection
    if (((!!window["chrome"] && !!window["chrome"].webstore) || ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0)) && !!window["CSS"]) {
        return 'blink';
    }
}

Ensnare

Why do you have some ifs with "false" as a condition? – Faraway

@YonatanNir I think it's meant to detect conditional compilation: developer.mozilla.org/en-US/docs/Web/JavaScript/… – Babita

Typescript say the same with this: Argument of type '{ new (): HTMLElement; prototype: HTMLElement; }' is not assignable to parameter of type 'string' – Urga

Answer 8

Thank you, everybody. I tested the code snippets here on the recent browsers: Chrome 55, Firefox 50, IE 11 and Edge 38, and I came up with the following combination that worked for me for all of them. I'm sure it can be improved, but it's a quick solution for whoever needs:

var browser_name = '';
isIE = /*@cc_on!@*/false || !!document.documentMode;
isEdge = !isIE && !!window.StyleMedia;
if(navigator.userAgent.indexOf("Chrome") != -1 && !isEdge)
{
    browser_name = 'chrome';
}
else if(navigator.userAgent.indexOf("Safari") != -1 && !isEdge)
{
    browser_name = 'safari';
}
else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
{
    browser_name = 'firefox';
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
    browser_name = 'ie';
}
else if(isEdge)
{
    browser_name = 'edge';
}
else 
{
   browser_name = 'other-browser';
}
$('html').addClass(browser_name);

It adds a CSS class to the HTML, with the name of the browser.

Bragdon

did you test chrome on ios? – Pericline

Answer 9

You can use try and catch to use the different browser error messages. IE and edge were mixed up, but I used the duck typing from Rob W (based on this project here: https://www.khanacademy.org/computer-programming/i-have-opera/2395080328).

var getBrowser = function() {        
    try {
        var e;
        var f = e.width;
    } catch(e) {
        var err = e.toString();

        if(err.indexOf("not an object") !== -1) {
            return "safari";
        } else if(err.indexOf("Cannot read") !== -1) {
            return "chrome";
        } else if(err.indexOf("e is undefined") !== -1) {
            return "firefox";
        } else if(err.indexOf("Unable to get property 'width' of undefined or null reference") !== -1) {
            if(!(false || !!document.documentMode) && !!window.StyleMedia) {
                return "edge";
            } else {
                return "IE";
            }
        } else if(err.indexOf("cannot convert e into object") !== -1) {
            return "opera";
        } else {
            return undefined;
        }
    }
};

Aundrea

That's a great idea: you don't need neither "window", nor "navigator" objects! – Underage

My suggestion is to get rid document and window completely. See IE chunk: return "firefox"; } else if(err.search("[object Error]") !== -1 && e.message != null && e.description != null){ return "IE"; } else if(err.search("cannot convert e into object") !== -1){ return "opera"; – Underage

How does that differentiate between IE and edge? – Aundrea

Strange, I can't reproduce err.search("[object Error]") anymore. Anyway, for me firefox vs chrome vs some thing else is enough. I use it in a PAC file where window and document objects are not available. – Underage

Just figured out the cause. It looks like that for funning a PAC file Windows 7 does not use IE11, which is installed at my machine, but rather IE7-like engine (probably from the Windows host). So err.toString() there gives "[object Error]" while inside the IE11 it gives "Unable to get property..." string as in your code. So, the code above should fail with the IE7. – Underage

Running Chrome 67 and Opera 54 (OS X), they both return the same error string :( – Promiscuity

Answer 10

Here's a 2016 adjusted version of Rob's answer, including Microsoft Edge and detection of Blink:

(edit: I updated Rob's answer above with this information.)

// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
isBlink = (isChrome || isOpera) && !!window.CSS;

/* Results: */
console.log("isOpera", isOpera);
console.log("isFirefox", isFirefox);
console.log("isSafari", isSafari);
console.log("isIE", isIE);
console.log("isEdge", isEdge);
console.log("isChrome", isChrome);
console.log("isBlink", isBlink);

The beauty of this approach is that it relies on browser engine properties, so it covers even derivative browsers, such as Yandex or Vivaldi, which are practically compatible with the major browsers whose engines they use. The exception is Opera, which relies on user agent sniffing, but today (i.e. ver. 15 and up) even Opera is itself only a shell for Blink.

Primaveria

The !!window.MSAssertion; test doesn't work for me in the Edge beta via Remote Desktop. It returns false. – Raker

@Raker What version of Edge are you using? It matters – Primaveria

The VM Version: 20150801 --- Edge Version: 20.10240.16384.0 – Raker

@Raker Oh you're using the VM... The MSAssertion trick is adjusted to version 25. But since many devs rely on the VMs, I'll try to adjust it this older version. Good call. Thanks. – Primaveria

@Raker Updated - should be futureproof. The StyleMedia (capitalized) object is specific to IE and Edge and doesn't seem to be going anywhere. – Primaveria

@IssacGable let's fix it - which version? – Primaveria

@Primaveria Safai Version 10.1.2 (12603.3.8) – Chibouk

I have also found UAParser a js plugin that still maintained and has be highly accurate and easy to use. – Chibouk

Property window.chrome.webstore was removed in Chrome 71, so this approach is no longer working. – Gabbi

Answer 11

If you need to know what is the numeric version of some particular browser you can use the following snippet. Currently it will tell you the version of Chrome/Chromium/Firefox:

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;

Flightless

Answer 12

There is also a less "hacky" method which works for all popular browsers. Google has included a browser-check in their Closure Library. In particular, have a look at goog.userAgent and goog.userAgent.product. In this way, you are also up to date if something changes in the way the browsers present themselves (given that you always run the latest version of the closure compiler.)

Qumran

Most of the answers here are not concerned with being "hacky" if they are the only reliable method. userAgent, as noted multiple times, is easily spoofed, and is therefore, unreliable. – Gertrudegertrudis

Answer 13

UAParser is one of the JavaScript Library to identify browser, engine, OS, CPU, and device type/model from userAgent string.

There's an CDN available. Here, I have included a example code to detect browser using UAParser.

<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>
<script type="text/javascript">
    var parser = new UAParser();
    var result = parser.getResult();
    console.log(result.browser);     // {name: "Chromium", version: "15.0.874.106"}
</script>
</head>
<body>
</body>
</html>

Now you can use the value of result.browser to conditionally program your page.

Source Tutorial: How to detect browser, engine, OS, CPU, and device using JavaScript?

Spinoza

a thousand lines of code you call lightweight? – Lamellate

Answer 14

Detecting Browsers on Desktop and Mobile : Edge, Opera, Chrome, Safari, Firefox, IE

I did some changes in @nimesh code now it is working for Edge also, and Opera issue fixed:

function getBrowserName() {

    if ( navigator.userAgent.indexOf("Edge") > -1 && navigator.appVersion.indexOf('Edge') > -1 ) {
        return 'Edge';
    }
    else if( navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
    {
        return 'Opera';
    }
    else if( navigator.userAgent.indexOf("Chrome") != -1 )
    {
        return 'Chrome';
    }
    else if( navigator.userAgent.indexOf("Safari") != -1)
    {
        return 'Safari';
    }
    else if( navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
        return 'Firefox';
    }
    else if( ( navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ) ) //IF IE > 10
    {
        return 'IE';
    }  
    else 
    {
        return 'unknown';
    }
}

Thanks @nimesh user:2063564

Kaciekacy

It's picking up Safari when I'm in Chrome... – Bayard

Answer 15

Detecting Browser and Its version

This code snippet is based on the article from MDN. Where they gave a brief hint about various keywords that can be used to detect the browser name.

The data shown in the image above is not sufficient for detecting all the browsers e.g. userAgent of Firefox will have Fxios as a keyword rather than Firefox.

A few changes are also done to detect browsers like Edge and UCBrowser

The code is currently tested for the following browsers by changing userAgent with the help of dev-tools (How to change userAgent):

• FireFox
• Chrome
• IE
• Edge
• Opera
• Safari
• UCBrowser

getBrowser = () => {
    const userAgent = navigator.userAgent;
    let browser = "unkown";
    // Detect browser name
    browser = (/ucbrowser/i).test(userAgent) ? 'UCBrowser' : browser;
    browser = (/edg/i).test(userAgent) ? 'Edge' : browser;
    browser = (/googlebot/i).test(userAgent) ? 'GoogleBot' : browser;
    browser = (/chromium/i).test(userAgent) ? 'Chromium' : browser;
    browser = (/firefox|fxios/i).test(userAgent) && !(/seamonkey/i).test(userAgent) ? 'Firefox' : browser;
    browser = (/; msie|trident/i).test(userAgent) && !(/ucbrowser/i).test(userAgent) ? 'IE' : browser;
    browser = (/chrome|crios/i).test(userAgent) && !(/opr|opera|chromium|edg|ucbrowser|googlebot/i).test(userAgent) ? 'Chrome' : browser;;
    browser = (/safari/i).test(userAgent) && !(/chromium|edg|ucbrowser|chrome|crios|opr|opera|fxios|firefox/i).test(userAgent) ? 'Safari' : browser;
    browser = (/opr|opera/i).test(userAgent) ? 'Opera' : browser;

    // detect browser version
    switch (browser) {
        case 'UCBrowser': return `${browser}/${browserVersion(userAgent,/(ucbrowser)\/([\d\.]+)/i)}`;
        case 'Edge': return `${browser}/${browserVersion(userAgent,/(edge|edga|edgios|edg)\/([\d\.]+)/i)}`;
        case 'GoogleBot': return `${browser}/${browserVersion(userAgent,/(googlebot)\/([\d\.]+)/i)}`;
        case 'Chromium': return `${browser}/${browserVersion(userAgent,/(chromium)\/([\d\.]+)/i)}`;
        case 'Firefox': return `${browser}/${browserVersion(userAgent,/(firefox|fxios)\/([\d\.]+)/i)}`;
        case 'Chrome': return `${browser}/${browserVersion(userAgent,/(chrome|crios)\/([\d\.]+)/i)}`;
        case 'Safari': return `${browser}/${browserVersion(userAgent,/(safari)\/([\d\.]+)/i)}`;
        case 'Opera': return `${browser}/${browserVersion(userAgent,/(opera|opr)\/([\d\.]+)/i)}`;
        case 'IE': const version = browserVersion(userAgent,/(trident)\/([\d\.]+)/i);
            // IE version is mapped using trident version 
            // IE/8.0 = Trident/4.0, IE/9.0 = Trident/5.0
            return version ? `${browser}/${parseFloat(version) + 4.0}` : `${browser}/7.0`;
        default: return `unknown/0.0.0.0`;
    }
}

browserVersion = (userAgent,regex) => {
    return userAgent.match(regex) ? userAgent.match(regex)[2] : null;
}

console.log(getBrowser());

Rabin

Only this one worked for me. Thank you. – Weiss

Answer 16

You can use Detect-browser.js, JavaScript library that detects and prints an object of browser information including browser language/name, user agent, device type, user OS, referer, online/0ffline, user timezone, screen resolution, and cookie enabled.

Get it from here detect-browser.js

it will give you something like that:

Bunn

This is definitely the best solution, as all other approaches are not actively maintained in the ever-changing world of browsers. – Adulteress

Answer 17

Here is my customized solution.

        const inBrowser = typeof window !== 'undefined'
        const UA = inBrowser && window.navigator.userAgent.toLowerCase()
        const isIE =
          UA && /; msie|trident/i.test(UA) && !/ucbrowser/i.test(UA).test(UA)
        const isEdge = UA && /edg/i.test(UA)
        const isAndroid = UA && UA.indexOf('android') > 0
        const isIOS = UA && /iphone|ipad|ipod|ios/i.test(UA)
        const isChrome =
          UA &&
          /chrome|crios/i.test(UA) &&
          !/opr|opera|chromium|edg|ucbrowser|googlebot/i.test(UA)
        const isGoogleBot = UA && /googlebot/i.test(UA)
        const isChromium = UA && /chromium/i.test(UA)
        const isUcBrowser = UA && /ucbrowser/i.test(UA)
        const isSafari =
          UA &&
          /safari/i.test(UA) &&
          !/chromium|edg|ucbrowser|chrome|crios|opr|opera|fxios|firefox/i.test(UA)
        const isFirefox = UA && /firefox|fxios/i.test(UA) && !/seamonkey/i.test(UA)
        const isOpera = UA && /opr|opera/i.test(UA)
        const isMobile =
          /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
          /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
        const isSamsung = UA && /samsungbrowser/i.test(UA)
        const isIPad = UA && /ipad/.test(UA)
        const isIPhone = UA && /iphone/.test(UA)
        const isIPod = UA && /ipod/.test(UA)
    
        console.log({
          UA,
          isAndroid,
          isChrome,
          isChromium,
          isEdge,
          isFirefox,
          isGoogleBot,
          isIE,
          isMobile,
          isIOS,
          isIPad,
          isIPhone,
          isIPod,
          isOpera,
          isSafari,
          isSamsung,
          isUcBrowser,
        }
      }

Hurtful

Answer 18

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});

Jest

Answer 19

Chrome & Edge introduced a new User-Agent Client Hints API for this:

navigator.userAgentData.brands.map(item => item.brand).includes('Google Chrome')

Firefox & Safari don't support it yet unfortunately.

Giacometti

Answer 20

To check for IE browser using following code.

console.log(/MSIE|Trident/.test(window.navigator.userAgent))

OR

var isIE = !!document.documentMode; 

console.log(isIE)

Thanks

Order

Answer 21

This method is currently valid for detecting all browsers. I quoted the vue-element-admin template

 export function fnBrowserDetect() {
      var browserName = (function(agent) {
        switch (true) {
          case agent.indexOf('edge') > -1: return 'MS Edge'
          case agent.indexOf('edg/') > -1: return 'Edge (chromium based)'
          case agent.indexOf('opr') > -1 && !!window.opr: return 'Opera'
          case agent.indexOf('chrome') > -1 && !!window.chrome: return 'Chrome'
          case agent.indexOf('trident') > -1: return 'MS IE'
          case agent.indexOf('firefox') > -1: return 'Mozilla Firefox'
          case agent.indexOf('safari') > -1: return 'Safari'
          default: return 'other'
        }
      })(window.navigator.userAgent.toLowerCase())
      return browserName.toLowerCase()
    }

Bramwell

I have so many questions for this code... Why switch(true)?! – Kauai

@Kauai I'm thinking the reason behind switch(true) is to avoid writing a while loop of any kind My question though is what is window.opr or window.chrome?? They aren't properties of the window class from all that I've read. ref: developer.mozilla.org/en-US/docs/Web/API/Window – Sidney

@CarloNyte window.chrome seems to be a Chrome extension and not something defined in the standard. I would be slightly worried if Google did a Microsoft and defined itself as the standard - and got away with it – Kauai

Answer 22

import getAgent, { getAccurateAgent } from "@egjs/agent";

const agent = getAgent();
getAccurateAgent().then((accurate_agent)=>{
    console.log(agent,'accurate.');
})
console.log(agent);

https://github.com/naver/egjs-agent

Leaven

Answer 23

Perhaps the real answer is that 90% of the time, you can't reliably detect any specific browser.

The most reliable way for your use case is to provide a download button for each browser and let the user - who knows for certain what browser they are on "tell you." All of the detection methods shown in these other answers will either eventually stop working, or can easily be faked.

User-agent strings can be overridden by the user.

Browsers, over time, trend toward removing unique API differences. (Source: look at Internet Explorer over the years)

If you must use browser detection, use a well-updated library to do so. So long as you keep that library up-to-date, you can be assured that the detection will not fail - so long as it's not too reliant upon UA strings.

---

For other use cases, don't use browser detection - use feature detection. Modern Firefox supports everything - if not more - that Chrome does, and generally is closer to the w3 & etc. specs. A tool called "browserlist" is a great tool to determine which browsers' features your code should use. Tools like Webpack, Parcel, Babel, and more use this - so you can use the latest browser features without having to write the compatibility code yourself.

Spavined

Answer 24

This combines both Rob's original answer and Pilau's update for 2016

    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isIE Edge: ' + isEdge + '<br>';
document.body.innerHTML = output;

Alba

Is there a point to telling the user what browser they're using? I imagine they'd already know this. – Gertrudegertrudis

@Gertrudegertrudis it's main intention was more to adapt the most compatible code to the active browser, rather than to inform the user which browser they're using. Unless the browser they're using is super outdated and has been excluded from backwars compatibility, in which it wouldn't hurt to let the user know they can benefit from a better experience should they switch to something more up to date – Alba

If that's really what this code is for, don't use this approach. Use feature detection instead. Does the browser support promises? if so, use it. If not, complain to the user or apply a polyfill. – Spavined

Answer 25

Here you find out which browser is it running.

function isValidBrowser(navigator){

            var isChrome =  navigator.indexOf('chrome'),
            isFireFox= navigator.indexOf('firefox'),
            isIE = navigator.indexOf('trident') ,
            isValidChromeVer = parseInt(navigator.substring(isChrome+7, isChrome+8)) >= 4,
            isValidFireForVer = parseInt(navigator.substring(isFireFox+8, isFireFox+9)) >= 3,
            isValidIEVer = parseInt(navigator.substring(isIE+8, isIE+9)) >= 7;

            if((isChrome > -1 && isValidChromeVer){ console.log("Chrome Browser")}

            if(isFireFox > -1 && isValidFireForVer){ console.log("FireFox  Browser")}

            if(isIE > -1 && isValidIEVer)){ console.log("IE Browser")}


        }

Kaleighkalends

Answer 26

We can use below util methods

utils.isIE = function () {
        var ver = navigator.userAgent;
        return ver.indexOf("MSIE") !== -1 || ver.indexOf("Trident") !== -1; // need to check for Trident for IE11
    };

    utils.isIE32 = function () {
        return (utils.isIE() && navigator.appVersion.indexOf('Win64') === -1);
    };

    utils.isChrome = function () {
        return (window.chrome);
    };

    utils.isFF64 = function () {
        var agent = navigator.userAgent;
        return (agent.indexOf('Win64') >= 0 && agent.indexOf('Firefox') >= 0);
    };

    utils.isFirefox = function () {
        return (navigator.userAgent.toLowerCase().indexOf('firefox') > -1);
    };

Fibrovascular

The agent.indexOf('Win64') check fails on Firefox 122 on Linux. This is because Linux is not Windows. This check will fail on MacOS, iOS, and Android as well. – Spavined

Answer 27

const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)

Condemnatory

Unfortunately, it's not a good answer. Edge has Chrome in his userAgent message. It's better to use !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime); – Genitourinary

your answer also fail for Opera browser – Condemnatory

Answer 28

Simple:

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
if (navigator.appVersion.indexOf("Linux x86_64")!=-1) OSName="Ubuntu";

var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var fullVersion  = ''+parseFloat(navigator.appVersion); 
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
 fullVersion = nAgt.substring(verOffset+6);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
 fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
 fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
 fullVersion = nAgt.substring(verOffset+7);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
 fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
          (verOffset=nAgt.lastIndexOf('/')) ) 
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName = navigator.appName;
 }
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
   fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
   fullVersion=fullVersion.substring(0,ix);

majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
 fullVersion  = ''+parseFloat(navigator.appVersion); 
 majorVersion = parseInt(navigator.appVersion,10);
}

document.write(''
 +'Hey! i see you\'re using '+browserName+'! <br>'
 +'The full version of it is '+fullVersion+'. <br>'
 +'Your major version is '+majorVersion+', <br>'
 +'And your "navigator.appName" is '+navigator.appName+'. <br>'
 +'Your "navigator.userAgent" is '+navigator.userAgent+'. <br>'
)

document.write('And, your OS is '+OSName+'. <br>');

Gid

I came from android with microsoft edge browser. Your code says that I am "ubuntu with chrome" – Kilocalorie

Answer 29

You can detect it like:

if (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)) {
   alert('Firefox');
}

Caplin

Answer 30

var BrowserType;
(function (BrowserType) {
    BrowserType["OPERA"] = "Opera";
    BrowserType["OPERA2"] = "OPR";
    BrowserType["EDGE"] = "Edg";
    BrowserType["CHROME"] = "Chrome";
    BrowserType["SAFARI"] = "Safari";
    BrowserType["FIREFOX"] = "Firefox";
    BrowserType["UNKNOWN"] = "unknown";
})(BrowserType || (BrowserType = {}));
const detectBrowser = () => {
    return Object.values(BrowserType).find((browser) => navigator.userAgent.indexOf(browser) != -1);
};
console.log(detectBrowser());

Preengage

Answer 31

const getBrowserName = () => {
    var userAgent = navigator.userAgent;
    var browser_names = ['Firefox', 'Chrome', 'Safari', 'Edge', 'Opera', 'MSIE', 'OPR', 'Trident/']
    var browser_name = "Unknown Browser"

    for (let i = 0; i < browser_names.length; i++) {
      if (userAgent.indexOf(browser_names[i]) > -1) {
          browser_name = browser_names[i]
          return browser_name
      }
    }
    return browser_name
  }

Less verbose than others

Patronage

Answer 32

Simple, single line of JavaScript code will give you the name of browser:

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}

Seaver

The userAgent alone doesn't tell us enough. For example, my user agent is "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36", which mentions Mozilla, Chrome and Safari. Which browser type am I? – Stickler

Sorry but I didn't get you for "Which browser type am I?" what you want to get? – Seaver

@NiravMehta What he meant is that navigator.userAgent tells you every browser possible you have.. So this is really not reliable, the only case it would work is if the user only has one browser. – Triplane

this is not a reliable way to detect browser. Some useragents includes both chrome and safari, so there is not way to detect which one should we consider and last but, not the least, useragent can be modified by the web page. – Zoospore