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

Chalcanthite

Why? Surely if you are checking by feature then it doesn't matter which browser it is, it matters which features it supports. – Minnich

I agree.. why do you need to do it this way? It seems like a bad idea to me unless there are compelling reasons, can you explain? – Okapi

Like I said, I asked mostly out of curiosity... I did put to much emphasis on the "safe" part I think :) , another way to ask would be: Any Javascript objects or features that are unique to Chrome? – Chalcanthite

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. – Villegas

Agreed: feature-based testing is, by definition, detecting feature support, not brand of browser. Are you certain there's no browser out there that supports ActiveXObject but isn't IE? (Hint: there are several.) – Bulldozer

+1 for feature-detection: peter.michaux.ca/articles/… – Ideo

-1 for user agent string – Ideo

Answer 1

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

Sounding

Could you show me an example usage like alerting 'Welcome Chrome User!' if their browser is Chrome – Gratifying

Is it just me, or does this simply not work? (As of: 1/14/2014) – Felloe

I just verified that the isChrome function above works, even for the most recent releases. (Open up your JS console in chrome. Type "Boolean(window.chrome)". You should see "true". Try it in other browsers and you should see "false".) – Sounding

This may seem off topic but you just opened my world up. I had no clue you could write to the console on there. It is probably very obvious, but I just never realized. Thanks! – Floriated

@Felloe Opera now has a window.chrome object, and you will be false positives – Shirl

I'd suggest window.chrome && window.chrome.webstore since Chromium based apps and opera have window.chrome – Malissa

@Joe Opera 27.0.1698.89115 (Android version at least) seems not publishing object window.chrome. @Malissa Object window.chrome.webstore doesn't exist in Chrome for Android. – Dorelle

!!window.chrome is true in Chrome. It is false in a Chrome WebView, false in Opera Mobile, true in Opera desktop. Maybe a variety of values in other Chrome derived browsers. Maybe also version dependant. – Kubiak

Answer 2

_{This answer is very outdated, but it was very relevant back then in the stone age.}

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) { ... }

Afro

it's like saying: have you got blonde hair, and white teeth? You must be Brad Pitt... – Ideo

What do you mean omg no? This is exactly what feature detection is about. – Unite

This answer is out of date. On Edge when I console.log this answer, I get "Chrome" and on Firefox I get "Safari". – Phonate

@RyanWalker it definitely is, as the first line warns. But the problem persists to these days, since there is absolutely no continuity in MS development. Nobody knows if Edge will be Sledge the other day. – Counteract

Haha how foolish this is now chrome, and edge are built in chromium and both does have chrome in window object, that means chrome === edge 😆😆😆 – Mortgagor

Answer 3

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

Condyloid

You are absolutely right! :) I guess what I SHOULD ask is: Are there any JS objects that are unique to Chrome... just asking out of curiosity really... – Chalcanthite

Answer 4

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.

Inalterable

Answer 5

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

Canarese

Answer 6

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.ep.io/everything.html

Pimiento

Answer 7

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

Erma

Answer 8

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

Macleod

Opera and Safari have better standard JS support than Chrome does. See: sputnik.googlelabs.com – Figureground

Answer 9

I use this code to make bookmarks for each browser (or display a message for webkit)

if (window.sidebar) { 
// Mozilla Firefox Bookmark
window.sidebar.addPanel(title, url,"");
} else if( window.external ) { // IE Favorite
  if(window.ActiveXObject) {
  //ie
  window.external.AddFavorite( url, title);
  } else {
  //chrome
  alert('Press ctrl+D to bookmark (Command+D for macs) after you click Ok');
  }
} else if(window.opera && window.print) { 
// Opera
  return true; }
 else { //safri
 alert('Press ctrl+D to bookmark (Command+D for macs) after you click Ok'); }

Snooker

Answer 10

There might be false positives since opera also has window.chrome object. As a nice solution I use;

var isOpera = !!window.opera || !!window.opr;// Opera 8.0+

var isChrome = !!window.chrome && !isOpera;

This solution almost always works. However one thing I discovered is that, isChrome returns false in iPad Chrome version 52.0 as window.chrome returns false.

Beach

!!window.chrome is true on new (chromium based) Edge browser – Mclaren

Answer 11

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'),

Druid

FYI, isIE doesn't work now that IE9 supports window.addEventListener. A durable check for IE shouldn't break each new version of IE. – Thalassography