JavaScript: How to find out if the user browser is Chrome?

Question

I need some function returning a boolean value to check if the browser is Chrome.

How do I create such functionality?

Solution 1

Update: Please see Jonathan's answer for an updated way to handle this. The answer below may still work, but it could likely trigger some false positives in other browsers.

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

However, as mentioned User Agents can be spoofed so it is always best to use feature-detection (e.g. Modernizer) when handling these issues, as other answers mention.

Solution 2

To check if browser is Google Chrome, try this:

// please note, 
// that IE11 now returns undefined again for window.chrome
// and new Opera 30 outputs true for window.chrome
// but needs to check if window.opr is not undefined
// and new IE Edge outputs to true now for window.chrome
// and if not iOS Chrome check
// so use the below updated condition
var isChromium = window.chrome;
var winNav = window.navigator;
var vendorName = winNav.vendor;
var isOpera = typeof window.opr !== "undefined";
var isIEedge = winNav.userAgent.indexOf("Edg") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");

if (isIOSChrome) {
   // is Google Chrome on IOS
} else if(
  isChromium !== null &&
  typeof isChromium !== "undefined" &&
  vendorName === "Google Inc." &&
  isOpera === false &&
  isIEedge === false
) {
   // is Google Chrome
} else { 
   // not Google Chrome 
}

Example of use: https://codepen.io/jonathan/pen/RwQXZxJ?editors=1111

The reason this works is because if you use the Google Chrome inspector and go to the console tab. Type 'window' and press enter. Then you be able to view the DOM properties for the 'window object'. When you collapse the object you can view all the properties, including the 'chrome' property.

You can't use strictly equals true anymore to check in IE for window.chrome. IE used to return undefined, now it returns true. But guess what, IE11 now returns undefined again. IE11 also returns a empty string "" for window.navigator.vendor.

I hope this helps!

UPDATE:

Thank you to Halcyon991 for pointing out below, that the new Opera 18+ also outputs to true for window.chrome. Looks like Opera 18 is based on Chromium 31. So I added a check to make sure the window.navigator.vendor is: "Google Inc" and not is "Opera Software ASA". Also thanks to Ring and Adrien Be for the heads up about Chrome 33 not returning true anymore... window.chrome now checks if not null. But play close attention to IE11, I added the check back for undefined since IE11 now outputs undefined, like it did when first released.. then after some update builds it outputted to true .. now recent update build is outputting undefined again. Microsoft can't make up it's mind!

UPDATE 7/24/2015 - addition for Opera check

Opera 30 was just released. It no longer outputs window.opera. And also window.chrome outputs to true in the new Opera 30. So you must check if OPR is in the userAgent. I updated my condition above to account for this new change in Opera 30, since it uses same render engine as Google Chrome.

UPDATE 10/13/2015 - addition for IE check

Added check for IE Edge due to it outputting true for window.chrome .. even though IE11 outputs undefined for window.chrome. Thanks to artfulhacker for letting us know about this!

UPDATE 2/5/2016 - addition for iOS Chrome check

Added check for iOS Chrome check CriOS due to it outputting true for Chrome on iOS. Thanks to xinthose for letting us know about this!

UPDATE 4/18/2018 - change for Opera check

Edited check for Opera, checking window.opr is not undefined since now Chrome 66 has OPR in window.navigator.vendor. Thanks to Frosty Z and Daniel Wallman for reporting this!

Solution 3

If you want to detect Chrome's rendering engine (so not specific features in Google Chrome or Chromium), a simple option is:

var isChrome = !!window.chrome;

NOTE: this also returns true for many versions of Edge, Opera, etc that are based on Chrome (thanks @Carrm for pointing this out). Avoiding that is an ongoing battle (see window.opr below) so you should ask yourself if you're trying to detect the rendering engine (used by almost all major modern browsers in 2020) or some other Chrome (or Chromium?) -specific feature.

And you can probably skip !!

Solution 4

even shorter: var is_chrome = /chrome/i.test( navigator.userAgent );

Solution 5

console.log(JSON.stringify({
  isAndroid: /Android/.test(navigator.userAgent),
  isCordova: !!window.cordova,
  isEdge: /Edge/.test(navigator.userAgent),
  isFirefox: /Firefox/.test(navigator.userAgent),
  isChrome: /Google Inc/.test(navigator.vendor),
  isChromeIOS: /CriOS/.test(navigator.userAgent),
  isChromiumBased: !!window.chrome && !/Edge/.test(navigator.userAgent),
  isIE: /Trident/.test(navigator.userAgent),
  isIOS: /(iPhone|iPad|iPod)/.test(navigator.platform),
  isOpera: /OPR/.test(navigator.userAgent),
  isSafari: /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent),
  isTouchScreen: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
  isWebComponentsSupported: 'registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template')
}, null, '  '));

View more solutions

Comments

[bdukes]

Are you sure that you don't want to do feature detection instead (instead of asking "is this Chrome?" ask "can this do that I need?")

[kander]

Amen to that - detecting specific browsers is exactly how we got the problem of sites refusing to work with any other browser than IE and Netscape, even when other browsers are perfectly capable of rendering them properly. Capability detection is the safer, future-compatible, way forward.

[naveen]

who knows? he might want to have user download a chrome extension

[Rella]

No - my point is to use some three.js just to create fun 3d box backgrownd=) which works fast only in chrome...=)

[Álvaro González]

This question illustrates the problem of user agent detection. Only three years later, the Fun 3D Box Background will (try to) load in Chrome my low-end mobile phone but won't even try in Firefox in my high-end desktop computer.

[Drew Noakes]

@ÁlvaroG.Vicario, agreed. The use case given isn't great. I have a situation where we've developed a proof of concept app and know for a fact that it only lays out correctly in Chrome, yet we'll be sending the link out to a bunch of non-technical execs. So for those who click the link and open it in IE/Firefox/Opera, we show a note explaining that this is just a POC and we will make it support their browser in future. I think that's a valid use case.

[frostymarvelous]

I agree feature detection is the way to go. but there are legitimate areas where you would like to detect. e.g. I want to monkey patch xhr.sendAsBinary for chrome only. my initial solution checked if filereader.readasbinary is implemented. however, i am having issues where it patches for certain mobile browsers as well and therefore upload fails. I want this fix only for chrome.

[user239558]

Another example where feature detection will not work: I want to detect whether entering the name of a site and TAB TAB makes it possible to use the site-local search, so I can add a tip. This is not possible to do using feature detection.

[Pic Mickael]

Want to know why it might be relevant to know if a browser is Chrome? How about Chrome not being able to load RSS feeds? So that instead of linking to a RSS feed that will fail to load in Chrome, you could actually provided a warning or redirect the user? No thanks to you Google Chrome...

[Hans]

To those preaching feature detection... yes it's generally understood that it's preferable, but there are many cases where it's not viable, so the question has merit. Eg, polyfilling incomplete/incorrect implementations of a feature such as IndexedDB in IE/Edge.

[eidylon]

Like @PicMickael I am also looking at this for RSS feed alternative info to the user, since Chrome does not provide any native RSS ability.

[Miloš Đakonović]

There are odd situations where Google Chrome browser has a specific bug/inconsistency that does not exist in other browsers. I had this few times in past five years or so...

[5Diraptor]

I'd like to re-surface this question - is there a reliable & simple answer to this yet? There are many 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 are even 50% reliable. If I'm better off asking a new question please let me know.

[Stephen P]

@5Diraptor - if you look at Jonathan's answer as Rion's top answer recommends you do, you'll see the history of revision "UPDATE"s -- what this history tells you is that no, there is no reliable and simple answer to this and there probably never will be. If you absolutely must detect which browser instead of using feature detection you are going to have maintenance to keep up with changes.

[AlanFoster]

I liked this, remember you can also do var is_chrome = /chrome/i.test(navigator.userAgent); too

[Jon]

what is the reasoning behind using .toLowerCase - why not just navigator.userAgent.indexOf('Chrome') I see a lot of people use it but im not sure the point?

[Jonathan Marzullo]

adding .toLowerCase just makes sure the string gets forced to lowercase, so when the string in the condition is checked, it evaluates correctly when checking against the user agent

[magritte]

This does not work for IE10. typeof window.chrome in IE10 returns {object}

[Jonathan Marzullo]

it wouldn't work in ie10 because ie10 does not have window.chrome.. . so this would return false in ie10.

[Jonathan Marzullo]

if NOT chrome it would also return undefined or false

[Arnaldo Capo]

window.chrome didn't returned {object} in my computer. I think it would be VERY weird if window.chrome exists in the window object. So far I believe this is the correct answer.

[Arnaldo Capo]

^ Exists in an IE browser I meant.

[Stephen Jenkins]

Worth noting that Opera now responds true to window.chrome! Check out conditionizr.com which has a bulletproof detect + fix.

[Jonathan Marzullo]

@Halcyon991 Thank you for the heads up! Looks like Opera 18 is now based on Chromium. I added a condition, to also check if the browser is Google (Chrome) vs Opera (Chrome), Thanks again

[Poetro]

@Serg because they do not have Chrome. It is only a skin around iOS Safari.

[Stephen Jenkins]

Opera actually returns true to window.chrome. Check out conditionizr.com which has a bulletproof detect + fix.

[Serg]

Strange, sometimes i used to fix bugs only for that skinned with chrome version of ios safari.

[Ring]

var isGoogleChrome = window.chrome != null && window.navigator.vendor === "Google Inc.";

[Karel Bílek]

Just a note - IE9 has "chromeframe" in user agent.

[Karel Bílek]

Well, Opera is basically Chrome though

[Adrien Be]

@Mr.Bacciagalupe: I had to use Ring's updated answer to make this work if(isChromium === true) does not work in Chrome version 33.

[Adrien Be]

@Ring: did you test this solution across browser versions? I could only test on Chrome 33, IE11 & Firefox 27 (latest versions of each as of writting, end of March 2014)

[Jonathan Marzullo]

@Ring and @Adrien Be .. Thanks.. IE11 will now return true for window.chrome ... IE11 also returns a empty string for window.navigator.vendor. So if you test for both window.chrome and window.navigator.vendor then you should be fine. :)

[Vishal Sharma]

I just don't understand why two times !! , u can directly use , if(chrome){ }

[Drew Noakes]

@vishalsharma, the !! converts the value to be either true or false. typeof(window.chrome) gives "object", whereas typeof(!!window.chrome) gives "boolean". Your code sample also works too because the if statement does the conversion.

[Vishal Sharma]

yes that was i m trying to tell , if will take care of conversion.. yes but u r also right , for assignment we have to use this way..

[vogomatix]

Running IE11, "window.chrome" returns undefined in the console

[Jonathan Marzullo]

@vogomatix Thanks.. I added the check back for undefined since IE11 now outputs undefined, like it did when first released.. then after some update builds it outputted to true.. now recent update build is outputting undefined again.. ohh silly Microsoft :)

[vogomatix]

So we have some builds of IE11 that don't pretend to be chrome and others that do - wonderful! :-)

[Jonathan Marzullo]

@vogomatix .. if you have automatic updates ON for IE and windows 7 or 8, than you should be fine. One of these days Microsoft will get their act together .. or not :)

[Marwan]

if the browser is Maxthon it will return true also so check first if the browser is not maxthon and then check is it chrome

[Dimitri Kopriwa]

Thanks, though your var name should be camelCase

[Craig Brett]

Feature detection is great, except when developing extensions for sites that return completely different views for Chrome than any other browser. Something that feature detection is no help with.

[AnthumChris]

As of today, this fails with Chrome 31 (latest) on iOS 7, iPhone 4

[Jace Cotton]

Better comment than an answer.

[Zilk]

In case you're wondering why you were modded down, this is simply not true. For one example, they handle keyboard shortcuts and access key modifiers differently (and these also cannot be feature detected).

[Ararat Harutyunyan]

I don't say that 'opera' and 'chrome' is the same browser only icon is different. I say that the methods described above are giving the same result for both browsers.

[Ararat Harutyunyan]

@Zilk Have you tested for example the first answer which has 66 up vote?

[Zilk]

Your edited "right answer" is not correct; it will throw a ReferenceError in Firefox and others. Use either typeof chrome or window.chrome.

[Ararat Harutyunyan]

you're right its possible to use just window.chrome.

[Martin Asenov]

for the newest version of Opera this check fails. Still getting browser is Chrome on it. :(

[Jonathan Marzullo]

Thanks @Martin Asenov .. i just added an additional check to my condition above to check for new Opera 30 due to it using the same Google Chrome engine, and outputing true to window.chrome. The above now detects only Google Chrome :)

[artfulhacker]

do not use @JonathanMarzullo suggestion anymore, in 2015 every browser has a window.chrome set :-(

[Jonathan Marzullo]

@artfulhacker .. IE will output undefined for windows.chrome.. if you even bothered to look at my full answer below you would see i account for that based on the vendor name, try looking at the condition in my statement first before badgering someones answer :)

[Jonathan Marzullo]

@artfulhacker Stack Overflow is not the community for badgering people. IE11 outputs window.chrome as undefined .. so i will add a check for IE Edge, Thank You.. At least have some common courtesy like everyone else and leave a helpful comment instead of being rude :)

[Jonathan Marzullo]

@artfulhacker My comment above was written in 2012, when IE Edge did not exist. Please see my full answer below. Every time i am notified or find out that a modern browser has changed, I update my answer below! But thank you for letting me know about IE Edge.outputting true for window.chrome :)

[artfulhacker]

@JonathanMarzullo you're welcome, I even up voted the answer :-) maybe time to remove the comment since it can't be updated.

[artfulhacker]

Let us continue this discussion in chat.

[Daniel Imms]

@Chris it fails on iOS because Blink can't be used, WebKit is used here so it would need to fallback to the user agent. However, you probably wouldn't want to consider this Google Chrome from a support standpoint since it's WebKit, not Blink.

[Cobby]

Returns true in Microsoft Edge.

[Cobby]

Return true in Microsoft Edge.

[Cobby]

Returns true in Microsoft Edge.

[Cobby]

Version is "537.36" in Microsoft Edge.

[naveen]

@Cobby: With all due respect, Edge was not released at the time. Thanks for the info :)

[xinthose]

this fails for Chrome on iOS because it's safari in a chrome skin I guess;

[Jonathan Marzullo]

Thanks @xinthose .. I just added a check for IOS Chrome.. much appreciated! :)

[Alex C.]

Since a lot of browser returns true at this, here's the code I used which excluded Edge, Maxthon, iOS safari ...etc var is_chrome = ((navigator.userAgent.toLowerCase().indexOf('chrome') > -1) &&(navigator.vendor.toLowerCase().indexOf("google") > -1));

[yorch]

Opera (at least version 42) returns Google Inc to navigator.vendor, so this method is not bulletproof, something like /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/OPR/.test(navigator.userAgent) would probably work better

[Jonathan Marzullo]

@DanielWallman What Android version are you using? I tested this on Android 6.1 and it alerts() showing it detects it is Google Chrome .. for Desktop Chrome and Mobile Chrome. See example: codepen.io/jonathan/pen/WpQELR

[rogerdpack]

As a side-note, this detects "chromium" as well as Google Chrome, FWIW...

[Jonathan Marzullo]

@rogerdpack Thank you for notifying me :). When i have time I will have to add a check for navigator.plugins[i].name == 'Chromium PDF Viewer' to make sure it is Google Chrome but not 'chromium', based on this SO answer: stackoverflow.com/questions/17278770/…

[Tomás]

In firefox: ("webkitAnimation" in document.body.style) === true

[hexalys]

FYI: 'webkitAppearance' no longer works either. Edge is now using it. Probably best to delete your answer. ^^

[Wojtek Majerski]

Unfortunately, navigator.vendor === "Google Inc." on Opera (at least v.49) so using your code Opera appears as Chrome.

[Sz.]

Somewhere in the world a kitten dies for every regex we don't actually need.

[Frosty Z]

Maybe same problem as Daniel Wallman here: my Android Chrome user agent contains the "OPR" string! Mozilla/5.0 (Linux; Android 8.0.0; ASUS_Z012D Build/OPR1.170623.026) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Mobile Safari/537.36, therefore isChrome() returns false.

[Jonathan Marzullo]

Thank you @FrostyZ and @DanielWallman for letting us know. I fixed it so Opera checks for window.opr is not undefined.

[Esteban]

This will no longer work as of chrome 71. window.chrome.webstore is now undefined

[j.j.]

hmm, I have Opera 50 (Chromium 71) on my Android 7 phone. It returns undefined for window.chrome and window.opr. Any ideas why?

[Jonathan Marzullo]

When i console out window.chrome or window.opr on desktop Opera 58 it outputs those objects, so they do exist but also right after those objects it also outputs undefined. Not sure why? You might want to submit a bug and ask the Opera developers why that is? bugs.opera.com/wizard

[Alexandre Germain]

No explanations, no indications on false positive/negatives, just a piece of code dumped here... This response should really be downvoted. It isn't even an answer to THE question asked.

[Garrett]

Note for TypeScript, you will need to do const isChromium = (window as any).chrome; and similar for the Opera check.

[Carrm]

This also returns true for Edge.

[yestema]

It's false positive for Samsung Browser... Here is the UserAgent string: Mozilla/5.0 (Linux; Android 5.0.1; SAMSUNG GT-I9500 Build/LRX22C) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/2.1 Chrome/34.0.1847.76 Mobile Safari/537.36

[Alex Szücs]

navigator.userAgent.includes("Chrome")

[ifbamoq]

const isChrome = window.chrome && !window.opr;

[Sam]

This is returning true in IE for me. IE keeps returning exact same as Chrome of all userAgent and Navigator vars.

[Drew Noakes]

@Sam are you talking about IE or Edge? Edge is based on Chrome, which returns true for this property.

[yurin]

I guess, that answer downvoted by oneliners lovers. Despite, I understand your passion, I don't think you should downvote a perfectly correct answer based just on it.

[Simon B.]

Does not work on Chrome for Android neither in the browser or as PWA. Inspecting dev console shows that window.chrome is {loadTimes: ƒ, csi: ƒ}

[Wilt]

The latest Edge user agent value is actually Edg and not Edge (see also these docs: docs.microsoft.com/en-us/microsoft-edge/web-platform/…). So maybe this line: inNav.userAgent.indexOf("Edge") should be changed to inNav.userAgent.indexOf("Edg").

[Jeff Mergler]

Be advised this will return true on Edge Chromium as well as Google Chrome. For my use case this was a positive but the OP may be targeting Google Chrome only.

[Wilt]

Unfortunately, navigator.vendor === "Google Inc." on Edge as well (at least v.89) so using your code Edge also appears as Chrome and isEdge becomes false (user agent for Chromium based Edge browser is Edg).

[Heretic Monkey]

The same solution as an existing answer from several years ago. As noted on that answer, returns true for Edge Chromium.

[strix25]

take care that first part of check will return false on ios chrome

[Master DJon]

The codepen link doesn't work anymore.

[Jonathan Marzullo]

@MasterDJon I updated and fixed the above Codepen link so it should work now, thanks for letting me know: codepen.io/jonathan/pen/RwQXZxJ?editors=1111