JavaScript: How to Find Out If the User Browser Is Chrome

JavaScript: How to find out if the user browser is Chrome?

Update: Please see Jonathan's answer for an updated way to handle this. The answer below may still work, but it could likely trigger some false positives in other browsers.

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

However, as mentioned User Agents can be spoofed so it is always best to use feature-detection (e.g. Modernizer) when handling these issues, as other answers mention.

How to detect Safari, Chrome, IE, Firefox and Opera browsers?

Googling for browser reliable detection often results in checking the User agent string. This method is not reliable, because it's trivial to spoof this value.

I've written a method to detect browsers by duck-typing.

Only use the browser detection method if it's truly necessary, such as showing browser-specific instructions to install an extension. Use feature detection when possible.

Demo: https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;


var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

How to detect browser for chrome

I suggest you can refer to this code example that may help you to identify the MS Edge legacy, Ms. Edge Chromium, Opera, Google Chrome, IE, Firefox, and Safari browser.

<!doctype html><html><head><title>Test demo</title></head><body><script>    var browser = (function (agent) {        switch (true) {            case agent.indexOf("edge") > -1: return "MS Edge (EdgeHtml)";            case agent.indexOf("edg") > -1: return "MS Edge Chromium";            case agent.indexOf("opr") > -1 && !!window.opr: return "opera";            case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";            case agent.indexOf("trident") > -1: return "Internet Explorer";            case agent.indexOf("firefox") > -1: return "firefox";            case agent.indexOf("safari") > -1: return "safari";            default: return "other";        }    })(window.navigator.userAgent.toLowerCase());    document.body.innerHTML =  "This is " + browser + " browser." + "<br><br>" + window.navigator.userAgent.toLowerCase();</script></body></html>

Using Javascript to detect Google Chrome to switch CSS

Use the following to detect chrome:

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

Source: http://davidwalsh.name/detecting-google-chrome-javascript

Update (2015-07-20):

The above solution does not always work. A more reliable solution can be found in this answer (see below). That being said, I would avoid browser detection and go with feature detection instead:

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

You can include a css file specifically for chrome like this:

if (isChrome) {
    document.write('<'+'link rel="stylesheet" href="../component/chromeDefault.css" />');
}

UPDATE (2014-07-29):

@gillesc has a more elegant suggestion for detecting Chrome which he posted in a comment below and it can also be viewed on this question.

var isChrome = !!window.chrome

How to tell user to open page in Chrome with Browser Detect

A simple solution would be to not assign any value to sBrowser if the user is using chrome, and then check for undefined.

var sBrowser, sUsrAg = navigator.userAgent;

if (sUsrAg.indexOf("Safari") > -1) {
  sBrowser = "Apple Safari";
} else if (sUsrAg.indexOf("Opera") > -1) {
  sBrowser = "Opera";
} else if (sUsrAg.indexOf("Firefox") > -1) {
  sBrowser = "Mozilla Firefox";
} else if (sUsrAg.indexOf("MSIE") > -1) {
  sBrowser = "Microsoft Internet Explorer";
}

if (sBrowser != null) {
  document.write("You are using " + sBrowser + ". Use Chrome instead"); // or whatever
}

A problem with this approach is that you have to account for every single browser in existence. Just check for chrome, and then tell everyone else to use it. You lose the ability to tell them what browser they're using but that seems unimportant here.

var sUsrAg = navigator.userAgent,
  usingChrome = sUsrAg.indexOf("Chrome") > -1;

if (!usingChrome) {
  document.write("You are not using Chrome. Switch to blah blah blah"); // or whatever
}

How to detect my browser version and operating system using JavaScript?

Detecting browser's details:

var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var fullVersion  = ''+parseFloat(navigator.appVersion); 
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
 fullVersion = nAgt.substring(verOffset+6);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
 fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
 fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
 fullVersion = nAgt.substring(verOffset+7);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
 fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
          (verOffset=nAgt.lastIndexOf('/')) ) 
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName = navigator.appName;
 }
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
   fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
   fullVersion=fullVersion.substring(0,ix);

majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
 fullVersion  = ''+parseFloat(navigator.appVersion); 
 majorVersion = parseInt(navigator.appVersion,10);
}

document.write(''
 +'Browser name  = '+browserName+'<br>'
 +'Full version  = '+fullVersion+'<br>'
 +'Major version = '+majorVersion+'<br>'
 +'navigator.appName = '+navigator.appName+'<br>'
 +'navigator.userAgent = '+navigator.userAgent+'<br>'
)

Source JavaScript: browser name.

See JSFiddle to detect Browser Details.

Detecting OS:

// This script sets OSName variable as follows:
// "Windows"    for all versions of Windows
// "MacOS"      for all versions of Macintosh OS
// "Linux"      for all versions of Linux
// "UNIX"       for all other UNIX flavors 
// "Unknown OS" indicates failure to detect the OS

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

document.write('Your OS: '+OSName);

source JavaScript: OS detection.

See JSFiddle to detect OS Details.

    var nVer = navigator.appVersion;    var nAgt = navigator.userAgent;    var browserName  = navigator.appName;    var fullVersion  = ''+parseFloat(navigator.appVersion);     var majorVersion = parseInt(navigator.appVersion,10);    var nameOffset,verOffset,ix;        // In Opera, the true version is after "Opera" or after "Version"    if ((verOffset=nAgt.indexOf("Opera"))!=-1) {     browserName = "Opera";     fullVersion = nAgt.substring(verOffset+6);     if ((verOffset=nAgt.indexOf("Version"))!=-1)        fullVersion = nAgt.substring(verOffset+8);    }    // In MSIE, the true version is after "MSIE" in userAgent    else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {     browserName = "Microsoft Internet Explorer";     fullVersion = nAgt.substring(verOffset+5);    }    // In Chrome, the true version is after "Chrome"     else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {     browserName = "Chrome";     fullVersion = nAgt.substring(verOffset+7);    }    // In Safari, the true version is after "Safari" or after "Version"     else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {     browserName = "Safari";     fullVersion = nAgt.substring(verOffset+7);     if ((verOffset=nAgt.indexOf("Version"))!=-1)        fullVersion = nAgt.substring(verOffset+8);    }    // In Firefox, the true version is after "Firefox"     else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {     browserName = "Firefox";     fullVersion = nAgt.substring(verOffset+8);    }    // In most other browsers, "name/version" is at the end of userAgent     else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <               (verOffset=nAgt.lastIndexOf('/')) )     {     browserName = nAgt.substring(nameOffset,verOffset);     fullVersion = nAgt.substring(verOffset+1);     if (browserName.toLowerCase()==browserName.toUpperCase()) {      browserName = navigator.appName;     }    }    // trim the fullVersion string at semicolon/space if present    if ((ix=fullVersion.indexOf(";"))!=-1)       fullVersion=fullVersion.substring(0,ix);    if ((ix=fullVersion.indexOf(" "))!=-1)       fullVersion=fullVersion.substring(0,ix);        majorVersion = parseInt(''+fullVersion,10);    if (isNaN(majorVersion)) {     fullVersion  = ''+parseFloat(navigator.appVersion);      majorVersion = parseInt(navigator.appVersion,10);    }        document.write(''     +'Browser name  = '+browserName+'<br>'     +'Full version  = '+fullVersion+'<br>'     +'Major version = '+majorVersion+'<br>'     +'navigator.appName = '+navigator.appName+'<br>'     +'navigator.userAgent = '+navigator.userAgent+'<br>'    )
    // This script sets OSName variable as follows:    // "Windows"    for all versions of Windows    // "MacOS"      for all versions of Macintosh OS    // "Linux"      for all versions of Linux    // "UNIX"       for all other UNIX flavors     // "Unknown OS" indicates failure to detect the OS        var OSName="Unknown OS";    if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";    if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";    if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";    if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";        document.write('Your OS: '+OSName);

How can I check if a browser is Chromium-based?

window.chrome

As of now, window.chrome works in all chromium based browsers

var isChromium = !!window.chrome;

console.log(isChromium)

JavaScript: How to Find Out If the User Browser Is Chrome