Detect browser name

Use window properties and user agent string to detect the browser name.

by wilt

HTML

<p>User-Agent: <span id="userAgent"></span></p>
<p>Vendor: <span id="vendor"></span></p>
<p>Chromium: <span id="chromium"></span></p>
<p>Opera: <span id="opera"></span></p>
<hr>
<p>Browser: <span id="browser"></span></p>

JavaScript

const GOOGLE_VENDOR_NAME = 'Google Inc.';

function isOpera() {
  return Boolean(window.opr);
}

function isChromium() {
  return Boolean(window.chrome);
}

function getBrowserName() {
  const userAgent = window.navigator.userAgent;
  const vendor = window.navigator.vendor;
  switch (true) {
    case /Edge|Edg|EdgiOS/.test(userAgent):
      return 'Edge';
    case /OPR|Opera/.test(userAgent) && isOpera():
      return 'Opera';
    case /CriOS/.test(userAgent):
    case /Chrome/.test(userAgent) && vendor === GOOGLE_VENDOR_NAME && isChromium():
      return 'Chrome';
    case /Vivaldi/.test(userAgent):
      return 'Vivaldi';
    case /YaBrowser/.test(userAgent):
      return 'Yandex';
    case /Firefox|FxiOS/.test(userAgent):
      return 'Firefox';
    case /Safari/.test(userAgent):
      return 'Safari';
    case /MSIE|Trident/.test(userAgent):
      return 'Internet Explorer';
    default:
      return 'Unknown';
  }
};

function isChrome() {
  const name = getBrowserName();
  return name === 'Chrome';
}

document.getElementById('vendor').innerText = window.navigator.vendor;

document.getElementById('userAgent').innerText = window.navigator.userAgent;

document.getElementById('chromium').innerText = isChromium().toString();

document.getElementById('opera').innerText = isOpera().toString();

document.getElementById('browser').innerText = getBrowserName();