I need some function returning a boolean value to check if the browser is Chrome.
How do I create such functionality?
I need some function returning a boolean value to check if the browser is Chrome.
How do I create such functionality?
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.
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(\"Edge\") > -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: http://codepen.io/jonathan/pen/WpQELR
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!
even shorter: var is_chrome = /chrome/i.test( navigator.userAgent );
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, \' \'));
A much simpler solution is just to use:
var isChrome = !!window.chrome;
The !!
just converts the object to a boolean value. In non-Chrome browsers, this property will be undefined
, which is not truthy.
var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
You may also want the specific version of Chrome:
var ua = navigator.userAgent;
if(/chrome/i.test(ua)) {
var uaArray = ua.split(\' \')
, version = uaArray[uaArray.length - 2].substr(7);
}
Apologies to The Big Lebowski for using his answer within mine.
You can use:
navigator.userAgent.indexOf(\"Chrome\") != -1
It is working on v.71
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
}
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
}