JavaScript to Detect Google Chrome

The negative side of having a new (and promisingly become popular) browser, no matter how good it can be, is you’ll have to test your web apps with it among many others.

Probably, the first step is to detect the browser from JavaScript code by parsing browser’s user agent, and here is what of Google Chrome.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US)
AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

I guess old JavaScript codes can mistakenly tell it Safari like when running the code snippet below using JQuery’s browser utility.

1 2 3 4

$.each($.browser, function(i, val) { $("<div>" + i + " : <span>" + val + "</span></div>") .appendTo(document.body); });

It may be no problem until you find something wrong when your apps running on Chrome only. So, here is the code line to detect Chrome generally:

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

We’ll have to change the JQuery browser utility to support Chrome detection as follows:

1 2 3 4 5 6 7 8 9 10 11

var userAgent = navigator.userAgent.toLowerCase();   // Figure out what browser is being used jQuery.browser = { version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1], chrome: /chrome/.test( userAgent ), safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ), opera: /opera/.test( userAgent ), msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ), mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ) };

Now, correct result shows on test screen:

Just one notice: Current version of JQuery (1.2.6) is treating Chrome as if it was Safari and basically no serious problem has been found yet. Modifying browser detection can cause the lib render pages/elements incorrectly for it has no knowledge of Chrome’s rendering engine. To keep compatibility, you can change line 7 back to:

7	safari: /webkit/.test( userAgent ),

But in this case the browser will be detected as both Chrome and Safari — not nice solution, I accept.

Anyway, it’s very likely that JQuery and other JavaScript frameworks will include Chrome to browser list for detection in next versions.

Detect Browsers using jQuery

jQuery provides a property to detect the browser. It works well for IE, mozilla, Safari and opera browser but it doesn't work for Google Chrome. Below jQuery code gives you an idea about $.browser property

$(document).ready(function() {

  if ($.browser.mozilla && $.browser.version >= "2.0" ){

   alert('Mozilla above 1.9');

  }

  

  if( $.browser.safari ){

   alert('Safari');

  }

 

  if( $.browser.opera){

   alert('Opera');

  }

 

  if ($.browser.msie && $.browser.version <= 6 ){

   alert('IE 6 or below version');

  }

 

  if ($.browser.msie && $.browser.version > 6){

   alert('IE above 6');

  }

});

The jQuery browser property allows you to determine the browser in which the webpage is running. This property makes use of navigator.userAgent to determine the platform. As said earlier, that this property doesn't work for Chrome. If you simply make an alert statement of navigator.userAgent in chrome then you will see Chrome and Safari both the words in alert statement.
Then how to detect chrome?

Well, if you have installed chrome on your machine and safari is not installed then you can use $.browser.safari to detect chrome. As both the browsers are fully based on webkit. webkit is one of the flag of $.browser property. It will be true for safari and chrome. But that's not a proper way to detect chrome.

Well, you need to alter the $.browser utility to support chrome. I found a good article about detecting chrome using jQuery. Visit here.