How to detect if a browser is Chrome using jQuery?

JqueryJquery UiGoogle ChromeJquery SelectorsCross Browser

Jquery Problem Overview


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)?

Jquery Solutions


Solution 1 - Jquery

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

Solution 2 - Jquery

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

Solution 3 - Jquery

This question was already discussed here: https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-user-browser-is-chrome/13348618#13348618

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!

Solution 4 - Jquery

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.

Solution 5 - Jquery

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

Solution 6 - Jquery

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

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

Solution 7 - Jquery

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

Solution 8 - Jquery

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.

Solution 9 - Jquery

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.

Solution 10 - Jquery

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.

Solution 11 - Jquery

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTaylorMacView Question on Stackoverflow
Solution 1 - JqueryHaim EvgiView Answer on Stackoverflow
Solution 2 - JqueryadedoyView Answer on Stackoverflow
Solution 3 - JqueryJonathan MarzulloView Answer on Stackoverflow
Solution 4 - JqueryMasterView Answer on Stackoverflow
Solution 5 - JquerythinkdevcodeView Answer on Stackoverflow
Solution 6 - JqueryEndlessView Answer on Stackoverflow
Solution 7 - JqueryRafael SoterasView Answer on Stackoverflow
Solution 8 - JquerystefgosselinView Answer on Stackoverflow
Solution 9 - JqueryStephen JenkinsView Answer on Stackoverflow
Solution 10 - JqueryFlorrieView Answer on Stackoverflow
Solution 11 - JqueryBahadir TasdemirView Answer on Stackoverflow