279

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

How do I create such functionality?

Improve this question
14
  • 19
    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?") Commented Dec 30, 2010 at 18:20
  • 2
    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. Commented Dec 30, 2010 at 18:41
  • 52
    who knows? he might want to have user download a chrome extension Commented Dec 30, 2010 at 18:53
  • 5
    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. Commented Dec 15, 2013 at 1:08
  • 4
    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... Commented Apr 6, 2015 at 3:12

20 Answers 20

Reset to default
376

To check if browser is Google Chrome, try this (updated 7/18/2024):

// 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 winNav = window.navigator; var vendorName = winNav.vendor; var isChromium = window.chrome; var isOpera = typeof window.opr !== "undefined"; var isFirefox = winNav.userAgent.indexOf("Firefox") > -1; var isIEedge = winNav.userAgent.indexOf("Edg") > -1; var isIOSChrome = winNav.userAgent.match("CriOS"); var isGoogleChrome = isChromium !== null && typeof isChromium !== "undefined" && vendorName === "Google Inc." && isOpera === false && isIEedge === false && (typeof winNav.userAgentData === "undefined" || winNav.userAgentData.brands.some(x => x.brand === "Google Chrome")); if (isIOSChrome) { // is Google Chrome on IOS } else if(isGoogleChrome) { // 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.

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!

UPDATE 6/10/2024 - change for Google Chrome browser brand check

Added extra check for if Google Chrome since Google added window.navigator.userAgentData.brands array in useragent

UPDATE 7/18/2024 - change for Google Chrome browser brand check

Modified if Google Chrome check (isGoogleChrome) to account for userAgentData brands array change and if userAgentData does not existing in non google Chrome Browsers so it doesnt trigger undefined. Also added not Firefox check.

UPDATE 11/19/2024 - Google Chrome browser brand array change

For var isGoogleChrome.. Google Chrome Version 131.0.6778.70, changed brands[] array check back to 0. Thanks [Morco][8] for letting me know.

[8]" https://stackoverflow.com/users/25327560/morco

Improve this answer
Sign up to request clarification or add additional context in comments.

36 Comments

var isGoogleChrome = window.chrome != null && window.navigator.vendor === "Google Inc.";
Thanks @xinthose .. I just added a check for IOS Chrome.. much appreciated! :)
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.
Thank you @FrostyZ and @DanielWallman for letting us know. I fixed it so Opera checks for window.opr is not undefined.
The latest Edge user agent value is actually Edg and not Edge (see also these docs: learn.microsoft.com/en-us/microsoft-edge/web-platform/…). So maybe this line: inNav.userAgent.indexOf("Edge") should be changed to inNav.userAgent.indexOf("Edg").
|
229

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.

Improve this answer

17 Comments

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?
@Serg because they do not have Chrome. It is only a skin around iOS Safari.
Returns true in Microsoft Edge.
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));
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
|
23

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 !!

Improve this answer

10 Comments

Opera actually returns true to window.chrome. Check out conditionizr.com which has a bulletproof detect + fix.
Well, Opera is basically Chrome though
I just don't understand why two times !! , u can directly use , if(chrome){ }
@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.
This also returns true for Edge.
|
21

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

Improve this answer

3 Comments

Return true in Microsoft Edge.
Return true on Opera
this is a very wrong approach...
18 

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, ' '));

Improve this answer

4 Comments

Unfortunately, navigator.vendor === "Google Inc." on Opera (at least v.49) so using your code Opera appears as Chrome.
Somewhere in the world a kitten dies for every regex we don't actually need.
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.
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).
16

As of Chrome 89 (March 2021), all earlier answers are obsolete. Chrome now supports User Agent Hints. So now this should be done using:

navigator.userAgentData?.brands?.some(b => b.brand === 'Google Chrome')

Or, if you're not using Babel:

navigator.userAgentData && navigator.userAgentData.brands && navigator.userAgentData.brands.some(b => b.brand === 'Google Chrome')

This returns true for Chrome 89 and above, false for the latest Opera and Edge, and undefined for browsers that don't support userAgentData.

Improve this answer

1 Comment

This is nice as navigator.userAgentData.brands actually returns the browser brand. The issue with other answers is they return true for Chromium-based browsers, like Edge.
10

var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );~
This is an old answer, written more than 12 years back; as of now(i.e., August 2022)

Update(August 2022):

Nowadays, browser detection using user agent (user agent sniffing) is usually a bad idea. Feature detection should be the way to go.

Reference: Browser detection using the user agent

However, if you still wish to do so, use a third party library like

var parser = new UAParser(); var result = parser.getResult(); console.log(result.browser);// {name: "Chrome", version: "104.0.0.0", "major": "104"} console.log(result.device); // {model: undefined, type: undefined, vendor: undefined} console.log(result.os); // {name: "Windows", version: "10"} console.log(result.engine); // {name: "Blink", version: "104.0.0.0"} console.log(result.cpu); // {"architecture": "amd64"}
<script src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/1.0.2/ua-parser.min.js"> </script>

The above snippet use the library ua-parser-js

  1. CDN - https://cdnjs.com/libraries/UAParser.js
  2. npm - https://www.npmjs.com/package/ua-parser-js

P.S: Please note that UA sniffing is bad practice and use feature detection wherever possible.

Improve this answer

4 Comments

I liked this, remember you can also do var is_chrome = /chrome/i.test(navigator.userAgent); too
Returns true in Microsoft Edge.
@Cobby: With all due respect, Edge was not released at the time. Thanks for the info :)
Return true on Opera
3

You can use:

navigator.userAgent.indexOf("Chrome") != -1

It is working on v.71

Improve this answer

3 Comments

navigator.userAgent.includes("Chrome")
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.
Return true on Opera
3

If you're feeling brave, you can experiment with browser sniffing and get a version:

var ua = navigator.userAgent; if(/chrome/i.test(ua)) { var uaArray = ua.split(' ') , version = uaArray[uaArray.length - 2].substr(7); }

This detected version might be a Chrome version, or a Edge version, or something else. Browser plugins can easily change userAgent and platform and other things though, so this is not recommended.

Apologies to The Big Lebowski for using his answer within mine.

Improve this answer

1 Comment

Version is "537.36" in Microsoft Edge.
3

There are some optional window properties that that can be used when doing browser detection. One of them is the optional chrome property (Chromium) and the other the optional opr property (Opera).

If a browser has the optional chrome property on the Window object, it means the browser is a Chromium browser. Previously this meant Chrome in most cases, but these days many browsers are built on Chromium (including Edge and Opera) so only checking the presence of the property will not help to detect Chrome browsers specifically.

Then there are often several user-agents for different browser versions (Edg or Edge) or operation systems (EdgiOS, ChriOS and FxiOS).

I use the following logic and tested against a lot of cases (common user agents):

const GOOGLE_VENDOR_NAME = 'Google Inc.'; function isOpera(){ return Boolean(window.opr); } function isChromium() { return Boolean(window.chrome); } function getBrowserName() { const userAgent = window.navigator.userAgent; const vendor = window.navigator.vendor; switch (true) { case /Edge|Edg|EdgiOS/.test(userAgent): return 'Edge'; case /OPR|Opera/.test(userAgent) && isOpera(): return 'Opera'; case /CriOS/.test(userAgent): case /Chrome/.test(userAgent) && vendor === GOOGLE_VENDOR_NAME && isChromium(): return 'Chrome'; case /Vivaldi/.test(userAgent): return 'Vivaldi'; case /YaBrowser/.test(userAgent): return 'Yandex'; case /Firefox|FxiOS/.test(userAgent): return 'Firefox'; case /Safari/.test(userAgent): return 'Safari'; case /MSIE|Trident/.test(userAgent): return 'Internet Explorer'; default: return 'Unknown'; } } function isChrome() { const name = getBrowserName(); return name === 'Chrome'; }

You can find this simplified code in this fiddle:

The trick is to test against other browsers then Chrome (Edge, Opera) first. In all these cases in the switch the different possible identifiers for a browser are combined in one regular expression and tested against the user agent string. For Chrome and Opera additional tests for the window property are added and for Chrome we also check whether the vendor name matches the expected value.

Note: I tested against a lot of different user agents, but won't claim here that this solution is flawless. Any suggestions for improvements, or failing browser detections are welcome so I can further improve this code.

UPDATE:

Fixed bug with Chrome on iOS (user agent CriOS) detection. Chrome on iOS doesn't have the chrome: true property on the window object, so should only be tested for presence of the user agent string.

Improve this answer

Comments

2

Works for me on Chrome on Mac. Seems to be or simpler or more reliable (in case userAgent string tested) than all above. 

 var isChrome = false; if (window.chrome && !window.opr){ isChrome = true; } console.log(isChrome);
Improve this answer

2 Comments

const isChrome = window.chrome && !window.opr;
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.
1

To check if browser is Google Chrome:

var isChrome = navigator.userAgent.includes("Chrome") && navigator.vendor.includes("Google Inc"); console.log(navigator.vendor); // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36 " console.log(navigator.userAgent); // "Google Inc."
Improve this answer

1 Comment

This shows true on Opera
0

User could change user agent . Try testing for webkit prefixed property in style object of body element

if ("webkitAppearance" in document.body.style) { // do stuff }
Improve this answer

2 Comments

In firefox: ("webkitAnimation" in document.body.style) === true
FYI: 'webkitAppearance' no longer works either. Edge is now using it. Probably best to delete your answer. ^^
0

To know the names of different desktop browsers (Firefox, IE, Opera, Edge, Chrome). Except Safari.

function getBrowserName() { var browserName = ''; var userAgent = navigator.userAgent; (typeof InstallTrigger !== 'undefined') && (browserName = 'Firefox'); ( /* @cc_on!@*/ false || !!document.documentMode) && (browserName = 'IE'); (!!window.chrome && userAgent.match(/OPR/)) && (browserName = 'Opera'); (!!window.chrome && userAgent.match(/Edge/)) && (browserName = 'Edge'); (!!window.chrome && !userAgent.match(/(OPR|Edge)/)) && (browserName = 'Chrome'); /** * Expected returns * Firefox, Opera, Edge, Chrome */ return browserName; }

Works in the following browser versions:

Opera - 58.0.3135.79 Firefox - 65.0.2 (64-bit) IE - 11.413.15063 (JS Fiddle no longer supports IE just paste in Console) Edge - 44.17763.1.0 Chrome - 72.0.3626.121 (Official Build) (64-bit)

View the gist here and the fiddle here

The original code snippet no longer worked for Chrome and I forgot where I found it. It had safari before but I no longer have access to safari so I cannot verify anymore.

Only the Firefox and IE codes were part of the original snippet.

The checking for Opera, Edge, and Chrome is straight forward. They have differences in the userAgent. OPR only exists in Opera. Edge only exists in Edge. So to check for Chrome these string shouldn't be there.

As for the Firefox and IE, I cannot explain what they do.

I'll be adding this functionality to a package i'm writing

Improve this answer

Comments

0

The best solution I found, and does give either true or false in most browsers is:

var isChrome = (navigator.userAgent.indexOf("Chrome") != -1 && navigator.vendor.indexOf("Google Inc") != -1)

Using .indexOf instead of .includes makes it more browser-compatible. Even though (or because) the whole point is to make your code browser-specific, you need the condition to work in most (or all) browsers.

Improve this answer

1 Comment

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

now u can use navigator.userAgent.includes("Chrome")

Improve this answer

Comments

0 
let isChrome = navigator.userAgentData?.brands.filter((elem)=> elem.brand === 'Google Chrome')?.length > 0 console.log(isChrome)
Improve this answer

1 Comment

Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation?
-1

Check this: How to detect Safari, Chrome, IE, Firefox and Opera browser?

In your case:

var isChrome = (window.chrome.webstore || window.chrome.runtime) && !!window.chrome;
Improve this answer

1 Comment

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

or check ather browsers:

browseris.firefox browseris.ie browseris.safari

and olso you can check the version like browseris.chrome7up and etc.

check all existing information in the 'browseris' object

Improve this answer

Comments

-4

all answers are wrong. "Opera" and "Chrome" are same in all cases.

(edited part)

here is the right answer

if (window.chrome && window.chrome.webstore) { // this is Chrome }
Improve this answer

7 Comments

Better comment than an answer.
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).
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.
@Zilk Have you tested for example the first answer which has 66 up vote?
This will no longer work as of chrome 71. window.chrome.webstore is now undefined
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.