Safe feature-based way for detecting Google Chrome with Javascript?

Question

As the title states, I'd be interested to find a safe feature-based (that is, without using navigator.appName or navigator.appVersion) way to detect Google Chrome.

By feature-based I mean, for example:

if(window.ActiveXObject) {
    // internet explorer!
}

Edit: As it's been pointed out, the question doesn't make much sense (obviously if you want to implement a feature, you test for it, if you want to detect for a specific browser, you check the user agent), sorry, it's 5am ;) Let me me phrase it like this: Are there any javascript objects and/or features that are unique to Chrome...

Answer 1

Not exactly an answer to the question... but if you are trying to detect a specific browser brand, the point of feature-checking is kind of lost. I highly doubt any other browsers are using the Chrome userAgent string, so if your question is 'is this browser Chrome', you should just look at that. (By the way, window.ActiveXObject does not guarantee IE, there are plug-ins for other browsers that provide this object. Which kind of illustrates the point I was trying to make.)

Answer 2

So, if you accept Marijn's point and are interested in testing the user agent string via javascript:

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

(Credit to: http://davidwalsh.name/detecting-google-chrome-javascript )

---

Here's a really nice analysis/breakdown of the chromes user agent string: http://www.simonwhatley.co.uk/whats-in-google-chromes-user-agent-string

Answer 3

Why do you need to check what the browser is? Surely if you code for standards, then this becomes superfluous and the web works The Way It Was Intended To (tm).

Don't give those people who ignore standards any more arguments!

Answer 4

isChrome = function() {
    return Boolean(window.chrome);
}

Answer 5

As others pointed out, Chrome should be mostly standards compliant. Since it is based on WebKit, its HTML, CSS and JavaScript capabilities should match those already presenrt in Apple Safari.

Answer 6

You shouldn't be detecting Chrome specifically. If anything, you should be detecting WebKit, since as far as page rendering is concerned, Chrome should behave exactly like other WebKit browsers (Safari, Epiphany).

If you need not only to detect WebKit, but also find out exactly what version is being used, see this link: http://trac.webkit.org/wiki/DetectingWebKit

But again, as other people said above, you shouldn't detect browsers, you should detect features. See this ADC article for more on this: http://developer.apple.com/internet/webcontent/objectdetection.html

Answer 7

Hi all,

One reason you might need to know the browser is Chrome is because it 'is' so damn standards compliant. I have already run into problems with old JavaScript code which I thought was standards compliant (by FF or Opera standards - which are pretty good), but Chrome was even more picky. It forced me to rewriting some code, but at times it might be easier to use the if(isChrome) { blah...blah ) trick to get it running. Chrome seems to work very well (I'm for standard compliance), but sometimes you just need to know what the user is running in grave detail.

Also, Chrome is very fast. Problem is, some JavaScript code unintentionally depends on the slowness of other browsers to work properly, ie: page loading, iframe loading, placement of stylesheet links and javascript links in page head, etc. These can cause new problems with when functions are really available to interact with page elements. So for now, you really might need to know...

Answer 8

For all the standards nazis... sometimes you might want to use bleeding "standard technologies" which aren't just yet standard but they will be... Such as css3 features.

Which is the reason why I found this page.

For some reason, Safari runs a combo of border-radius with box-shadow just fine, but chrome doesn't render the combination correctly. So it would be nice to find a way to detect chrome even though it is webkit to disable the combination.

I've ran into hundreds of reasons to detect a specific browser/version which usually ends up in scrapping an idea for a cool feature because what I want to do is not supported by the big evil...

But sometimes, some features are just too cool to not use them, even if they aren't standardized yet.

Answer 9

Detecting Chrome...

<script type="text/javascript">
if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Chrome/x.x 
 var cversion=new Number(RegExp.$1); // capture x.x portion and store as a number
 if (cversion>=3)
  document.write("You're using Chrome 3.x or above");
 else if (cversion>=2)
  document.write("You're using Chrome 2.x");
 else if (cversion>=1)
  document.write("You're using Chrome 1.x");
}
else
 document.write("n/a");
</script>

Detecting FireFox...

<script type="text/javascript">
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
 var ffversion=new Number(RegExp.$1); // capture x.x portion and store as a number
 if (ffversion>=3)
  document.write("You're using FF 3.x or above");
 else if (ffversion>=2)
  document.write("You're using FF 2.x");
 else if (ffversion>=1)
  document.write("You're using FF 1.x");
}
else
 document.write("n/a");
</script>

Detecting IE...

<script type="text/javascript">
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
 var ieversion=new Number(RegExp.$1); // capture x.x portion and store as a number
 if (ieversion>=8)
  document.write("You're using IE8 or above");
 else if (ieversion>=7)
  document.write("You're using IE7.x");
 else if (ieversion>=6)
  document.write("You're using IE6.x");
 else if (ieversion>=5)
  document.write("You're using IE5.x");
}
else
 document.write("n/a");
</script>

Detecting Opera...

<script type="text/javascript">
if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Opera/x.x or Opera x.x (ignoring remaining decimal places);
 var oprversion=new Number(RegExp.$1); // capture x.x portion and store as a number
 if (oprversion>=10)
  document.write("You're using Opera 10.x or above");
 else if (oprversion>=9)
  document.write("You're using Opera 9.x");
 else if (oprversion>=8)
  document.write("You're using Opera 8.x");
 else if (oprversion>=7)
  document.write("You're using Opera 7.x");
 else
  document.write("n/a");
}
else
 document.write("n/a");
</script>

Answer 10

I think feature detect is more usefull than navigator.userAgent parsing, as I googled Opera ambiguosity here. Nobody can know if IE16 will parse the /MSIE 16.0;/ regexp - but we can be quite sure, there will be the document.all support. In real life, the features are usually synonyms for the browsers, like: "No XMLHttpRequest? It is the f....d IE6!" No nonIE browser supports document.all, but some browsers like Maxthon can scramble the userAgent. (Of course script can define document.all in Firefox for some reason, but it is easilly controllable.) Therefore I suggest this solution.

Edit Here I found complete resources.

Edit 2 I have tested that document.all is also supported by Opera!

var is = {
  ff: window.globalStorage,
  ie: document.all && !window.opera,
  ie6: !window.XMLHttpRequest,
  ie7: document.all && window.XMLHttpRequest && !XDomainRequest && !window.opera,
  ie8: document.documentMode==8,
  opera: Boolean(window.opera),
  chrome: Boolean(window.chrome),
  safari: window.getComputedStyle && !window.globalStorage && !window.opera
}

Using is simple:

if(is.ie6) { ... }

I have not tested the safari detection, can somebody help?

Answer 11

I often use behavior/capability detection. Directly check whether the browser supports functionality before working around it, instead of working around it based on what might be the browser's name (user-agent).

A problem with browser-specific workarounds, is you don't know if the bug has been fixed or if the feature is supported now. When you do capability detection, you know the browser does or doesn't support it directly, and you're not just being browser-ist.

http://diveintohtml5.org/everything.html

Answer 12

isIE: !!(!window.addEventListener && window.ActiveXObject),

isIE6: typeof document.createElement('DIV').style.maxHeight == "undefined",

isIE7: !!(!window.addEventListener && window.XMLHttpRequest && !document.querySelectorAll),

isIE8: !!(!window.addEventListener && document.querySelectorAll && document.documentMode == 8),

isGecko: navigator.product == 'Gecko',

isOpera: !!window.opera,

isChrome: !!window.chrome,

isWebkit: !!(!window.opera && !navigator.taintEnable && document.evaluate && navigator.product != 'Gecko'),