[jquery] How to detect if a browser is Chrome using jQuery?

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

The answer is


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.


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

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!


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.


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.


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


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

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

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

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

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.


Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to jquery-ui

How to auto adjust the div size for all mobile / tablet display formats? jQuery not working with IE 11 JavaScript Uncaught ReferenceError: jQuery is not defined; Uncaught ReferenceError: $ is not defined Best Practice to Organize Javascript Library & CSS Folder Structure Change table header color using bootstrap How to get HTML 5 input type="date" working in Firefox and/or IE 10 Form Submit jQuery does not work Disable future dates after today in Jquery Ui Datepicker How to Set Active Tab in jQuery Ui How to use source: function()... and AJAX in JQuery UI autocomplete

Examples related to google-chrome

SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 81 SameSite warning Chrome 77 What's the net::ERR_HTTP2_PROTOCOL_ERROR about? session not created: This version of ChromeDriver only supports Chrome version 74 error with ChromeDriver Chrome using Selenium Jupyter Notebook not saving: '_xsrf' argument missing from post How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue? Selenium: WebDriverException:Chrome failed to start: crashed as google-chrome is no longer running so ChromeDriver is assuming that Chrome has crashed WebDriverException: unknown error: DevToolsActivePort file doesn't exist while trying to initiate Chrome Browser How to make audio autoplay on chrome How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66?

Examples related to jquery-selectors

Why is my JQuery selector returning a n.fn.init[0], and what is it? How to use placeholder as default value in select2 framework Access the css ":after" selector with jQuery jQuery: using a variable as a selector Check if any ancestor has a class using jQuery jQuery selector first td of each row Select element by exact match of its content jQuery selector to get form by name jQuery : select all element with custom attribute Set select option 'selected', by value

Examples related to cross-browser

Show datalist labels but submit the actual value Stupid error: Failed to load resource: net::ERR_CACHE_MISS Click to call html How to Detect Browser Back Button event - Cross Browser How can I make window.showmodaldialog work in chrome 37? Cross-browser custom styling for file upload button Flexbox and Internet Explorer 11 (display:flex in <html>?) browser sessionStorage. share between tabs? How to know whether refresh button or browser back button is clicked in Firefox CSS Custom Dropdown Select that works across all browsers IE7+ FF Webkit