How to detect if a browser is Chrome using jQuery?

Question

I have a bit of an issue with a function running in chrome that works properly in Safari, both webkit browsers...

I need to customize a variable in a function for Chrome, but not for Safari.

Sadly, I have been using this to detect if it is a webkit browser:

if ($.browser.webkit) {

But I need to detect:

if ($.browser.chrome) {

Is there any way to write a similar statement (a working version of the one above)?

Maybe you could post the broken function to see if we can help you get it working in chrome too? — Todd, Jun 14 '11 at 05:34
The function is rather long and I know how to fix it, I just need to be able to customize it for Chrome — TaylorMac, Jun 14 '11 at 05:38
http://stackoverflow.com/questions/3303858/distinguish-chrome-from-safari-using-jquery-browser — Haim Evgi, Jun 14 '11 at 05:38
That is a good idea though, I just feel like I have worked through it enough to know where the issue is — TaylorMac, Jun 14 '11 at 05:38
Haim, thank you. Could you post this as an answer so I can accept it? — TaylorMac, Jun 14 '11 at 05:39

Haim Evgi · Accepted Answer · 2014-02-12T14:29:37.507

107

$.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()); 

if($.browser.chrome){
  ............

}

UPDATE:(10x to @Mr. Bacciagalupe)

jQuery has removed $.browser from 1.9 and their latest release.

But you can still use $.browser as a standalone plugin, found here

edited Feb 12 '14 at 14:29

answered Jun 14 '11 at 05:41

Haim Evgi

114,996
43
205
218

@TaylorMac I'm not sure why it works much better than the others since the first link I posted has the same example in the 5th comment and the second link also uses the same technique but shows you how the others are detected also. Anyway I'm glad you found your solution. – Ben Jun 14 '11 at 06:04
3

Chromium also includes "Chrome" in its User-Agent, but why not `/chrom(e|ium)/` just to be safe :) – Naftuli Kay Oct 31 '11 at 16:27
jQuery api docs recommend AGAINST using $.browser. http://api.jquery.com/jQuery.browser/ .. also better to use feature detection than checking browser user agent that can be spoofed.. $.browser tests for user agent.. the jQuery api says to use $.support.. but in this case try testing if window.chrome exists.. – Jonathan Marzullo Oct 27 '12 at 04:10
2

Fails on IE8 as it lists chromeframe: mozilla/4.0 (compatible; msie 8.0; windows nt 5.1; trident/4.0; chromeframe/25.0.1364.97; .net clr 1.1.4322; .net clr 2.0.50727; infopath.1; ms-rtc lm 8; .net4.0c; .net4.0e; .net clr 3.0.4506.2152; .net clr 3.5.30729) – azsl1326 Feb 26 '13 at 16:59
@PAPAFRESH, unfortunately sometimes there is no feature available to differentiate compatibility. For example, I just had to use this because of browser differences with `position()` when the offset parent has a border. – Jacob Jun 14 '13 at 23:30
3

@Jacob, jQuery has removed $.browser from 1.9 and their latest release. But you can still use $.browser as a standalone plugin, found here: https://github.com/gabceb/jquery-browser-plugin – Jonathan Marzullo Jul 26 '13 at 20:03
jQuery.browser is deprecated now. do we have an alternative solution now. – 123 Feb 12 '14 at 13:34

score 46 · Answer 2 · answered Jul 17 '12 at 02:53

46

if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
 alert('I am chrome');
}

answered Jul 17 '12 at 02:53

adedoy

2,200
1
18
28

1

this is detected in IE Edge – klewis Jan 09 '17 at 20:52

Jonathan Marzullo · Answer 3 · 2018-11-19T14:38:07.697

This question was already discussed here: JavaScript: How to find out if the user browser is Chrome?

Please try this:

var isChromium = window.chrome;
if(isChromium){
    // is Google chrome 
} else {
    // not Google chrome 
}

But a more complete and accurate answer would be this since IE11, IE Edge, and Opera will also return true for window.chrome

So use the below:

// 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 
}

Above posts advise to use jQuery.browser. But the jQuery API recommends against using this method.. (see DOCS in API). And states its functionality may be moved to a team-supported plugin in a future release of jQuery.

The jQuery API recommends to use jQuery.support.

The reason being is that 'jQuery.browser' uses the user agent which can be spoofed and it is actually deprecated in later versions of jQuery. If you really want to use $.browser.. Here is the link to the standalone jQuery plugin, since it has been removed from jQuery version 1.9.1. https://github.com/gabceb/jquery-browser-plugin

It's better to use feature object detection instead of browser detection.

Also 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.

I hope this helps, even though the question was how to do with with jQuery. But sometimes straight javascript is more simple!

score 9 · Answer 4 · edited Oct 16 '12 at 11:11

9

User Endless is right,

$.browser.chrome = (typeof window.chrome === "object");

code is best to detect Chrome browser using jQuery.

If you using IE and added GoogleFrame as plugin then

var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );

code will treat as Chrome browser because GoogleFrame plugin modifying the navigator property and adding chromeframe inside it.

edited Oct 16 '12 at 11:11

Smamatti

3,882
3
29
42

answered Oct 16 '12 at 11:04

Master

91
1
1

score 5 · Answer 5 · answered Jul 08 '12 at 11:33

5

userAgent can be changed. for more robust, use the global variable specified by chrome

$.browser.chrome = (typeof window.chrome === "object");

answered Jul 08 '12 at 11:33

Endless

24,091
10
82
106

score 5 · Answer 6 · answered Jun 14 '11 at 05:39

5

var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );

answered Jun 14 '11 at 05:39

thinkdevcode

911
1
8
13

score 2 · Answer 7 · answered Mar 01 '19 at 12:20

2

if(navigator.vendor.indexOf('Goog') > -1){
  //Your code here
}

answered Mar 01 '19 at 12:20

Rafael Soteras

36
3

score 1 · Answer 8 · answered Dec 04 '13 at 10:43

Sadly due to Opera's latest update !!window.chrome (and other tests on the window object) when testing in Opera returns true.

Conditionizr takes care of this for you and solves the Opera issue:

conditionizr.add('chrome', [], function () {
    return !!window.chrome && !/opera|opr/i.test(navigator.userAgent);
});

I'd highly suggest using it as none of the above are now valid.

This allows you to do:

if (conditionizr.chrome) {...}

Conditionizr takes care of other browser detects and is much faster and reliable than jQuery hacks.

score 1 · Answer 9 · answered Jun 08 '15 at 18:36

1

As a quick addition, and I'm surprised nobody has thought of this, you could use the in operator:

"chrome" in window

Obviously this isn't using JQuery, but I figured I'd put it since it's handy for times when you aren't using any external libraries.

answered Jun 08 '15 at 18:36

Florrie

5,623
4
19
35

score 1 · Answer 10 · edited May 23 '17 at 12:10

1

When I test the answer @IE, I got always "true". The better way is this which works also @IE:

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

As described in this answer: https://stackoverflow.com/a/4565120/1201725

edited May 23 '17 at 12:10

Community

1
1

answered May 14 '16 at 13:32

Bahadir Tasdemir

8,208
3
44
55

score 1 · Answer 11 · answered Jun 14 '11 at 05:40

1

Although it is not Jquery , I use jquery myself but for browser detection I have used the script on this page a few times. It detects all major browsers, and then some. The work is pretty much all done for you.

answered Jun 14 '11 at 05:40

stefgosselin

8,696
5
38
63

How to detect if a browser is Chrome using jQuery?

11 Answers11

Linked