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

Profile picture for FrankC
FrankC

I have 5 addons/extensions for Firefox, Chrome, Internet Explorer(IE), Opera, and Safari.

How can I correctly recognize the user browser and redirect (once an install button has been clicked) to download the corresponding addon?

Here are several prominent libraries that handle browser detection as of Dec 2019.

Bowser by lancedikson - 4,065★s - Last updated Oct 2, 2019 - 4.8KB

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 
var result = bowser.getParser(window.navigator.userAgent);
console.log(result);
document.write("You are using " + result.parsedResult.browser.name +
               " v" + result.parsedResult.browser.version + 
               " on " + result.parsedResult.os.name);
<!-- language: lang-html --> 
<script src="https://unpkg.com/bowser@2.7.0/es5.js"></script>
<!-- end snippet -->

<i>*supports Edge based on Chromium</i>

Platform.js by bestiejs - 2,550★s - Last updated Apr 14, 2019 - 5.9KB

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 
console.log(platform);
document.write("You are using " + platform.name +
               " v" + platform.version + 
               " on " + platform.os);
<!-- language: lang-html --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script>
<!-- end snippet -->

jQuery Browser by gabceb - 504★s - Last updated Nov 23, 2015 - 1.3KB

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 
console.log($.browser)
document.write("You are using " + $.browser.name +
               " v" + $.browser.versionNumber + 
               " on " + $.browser.platform);
<!-- language: lang-html --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>
<!-- end snippet -->

Detect.js (Archived) by darcyclarke - 522★s - Last updated Oct 26, 2015 - 2.9KB

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 
var result = detect.parse(navigator.userAgent);
console.log(result);
document.write("You are using " + result.browser.family +
               " v" + result.browser.version + 
               " on " + result.os.family);
<!-- language: lang-html --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>
<!-- end snippet -->

Browser Detect (Archived) by QuirksMode - Last updated Nov 14, 2013 - 884B

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 
console.log(BrowserDetect)
document.write("You are using " + BrowserDetect.browser +
               " v" + BrowserDetect.version + 
               " on " + BrowserDetect.OS);
<!-- language: lang-html --> 
<script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script>
<!-- end snippet -->

Notable Mentions:

  • WhichBrowser - 1,355★s - Last updated Oct 2, 2018
  • Modernizr - 23,397★s - Last updated Jan 12, 2019 - To feed a fed horse, feature detection should drive any canIuse style questions. Browser detection is really just for providing customized images, download files, or instructions for individual browsers.

Further Reading