Get Browser name (Chrome, Firefox, etc) and Version in JS

# Table of Contents

# Get Browser name (Chrome, Firefox, Safari) in JavaScript

To get the browser name (e.g. Chrome, Firefox, Safar) in JavaScript:

Use the navigator.userAgent property to get the user agent string for the current browser.
Use the RegExp.test() method to check if a regular expression matches the user agent string for each browser.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <h2 id="browser-type"></h2>

    <br />
    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
function getBrowserType() {
  const test = regexp => {
    return regexp.test(navigator.userAgent);
  };

  console.log(navigator.userAgent);

  if (test(/opr\//i) || !!window.opr) {
    return 'Opera';
  } else if (test(/edg/i)) {
    return 'Microsoft Edge';
  } else if (test(/chrome|chromium|crios/i)) {
    return 'Google Chrome';
  } else if (test(/firefox|fxios/i)) {
    return 'Mozilla Firefox';
  } else if (test(/safari/i)) {
    return 'Apple Safari';
  } else if (test(/trident/i)) {
    return 'Microsoft Internet Explorer';
  } else if (test(/ucbrowser/i)) {
    return 'UC Browser';
  } else if (test(/samsungbrowser/i)) {
    return 'Samsung Browser';
  } else {
    return 'Unknown browser';
  }
}

const browserType = getBrowserType();

console.log(browserType);

const browserTypeElement =
  document.getElementById('browser-type');

browserTypeElement.innerHTML = browserType;

The code for this article is available on GitHub

You can start a basic development server by opening your terminal in the same directory as the index.html and index.js files and issuing the following command.

shell

Copied!
npx serve .

If I load the example in Chrome, I get the following output.

get browser type function used in chrome

And here is a screenshot of opening the page in Firefox.

get browser type function used in firefox

The navigator.userAgent property returns the user agent string for the current browser.

index.js

Copied!
console.log(navigator.userAgent);

// 👇️ Chrome
// Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

// 👇️ Firefox
// Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0

The name of the browser is located toward the end of the user agent string (e.g. Chrome or Firefox).

We used the RegExp.test() method to check if the user agent string contains specific substrings.

The forward slashes mark the start and the end of the regular expressions / /.

index.js

Copied!
if (test(/chrome|chromium|crios/i)) {
  return 'Google Chrome';
}

The pipe | symbol means "OR", e.g. chrome or chromium or crios.

The i flag stands for ignore and does a case-insensitive search in string.

If the regex is matched in the string, we return the name of the corresponding browser.

# Get Browser name (Chrome, Firefox, Safari) using `String.includes()` in JavaScript

You can also use the String.includes() method to get the browser name in JavaScript.

Here is an example that uses the method and some internal browser-specific properties.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <h2 id="browser-type"></h2>

    <br />
    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
function getBrowserType() {
  if (isOpera()) {
    return 'Opera';
  } else if (isEdge() || isEdgeChromium()) {
    return 'Microsoft Edge';
  } else if (isChrome()) {
    return 'Google Chrome';
  } else if (isFirefox()) {
    return 'Mozilla Firefox';
  } else if (isSafari()) {
    return 'Apple Safari';
  } else if (isInternetExplorer()) {
    return 'Microsoft Internet Explorer';
  } else if (isUCBrowser()) {
    return 'UC Browser';
  } else if (isSamsungBrowser()) {
    return 'Samsung browser';
  } else {
    return 'Unknown browser';
  }
}

const browserType = getBrowserType();

console.log(browserType);

const browserTypeElement =
  document.getElementById('browser-type');

browserTypeElement.innerHTML = browserType;

function isOpera() {
  return (
    !!window.opr ||
    !!window.opera ||
    navigator.userAgent.toLowerCase().includes('opr/')
  );
}

function isFirefox() {
  return (
    navigator.userAgent.toLowerCase().includes('firefox') ||
    typeof InstallTrigger !== 'undefined'
  );
}

function isSafari() {
  return navigator.userAgent.toLowerCase().includes('safari');
}

function isInternetExplorer() {
  return false || !!document.documentMode;
}

function isEdge() {
  return !isInternetExplorer() && !!window.StyleMedia;
}

function isChrome() {
  const userAgent = navigator.userAgent.toLowerCase();

  return (
    userAgent.includes('chrome') ||
    userAgent.includes('chromium') ||
    userAgent.includes('crios')
  );
}

function isEdgeChromium() {
  return isChrome() && navigator.userAgent.includes('Edg');
}

function isUCBrowser() {
  return navigator.userAgent.toLowerCase().includes('ucbrowser');
}

function isSamsungBrowser() {
  return navigator.userAgent
    .toLowerCase()
    .includes('samsungbrowser');
}

The code for this article is available on GitHub

Here is a screenshot of using the function in Chrome.

get browser type chrome

And here is a screenshot of using the function in Firefox.

get browser type function used in firefox

And, here is an example of using the function in Opera.

get browser type opera

We created reusable functions that check for each browser name.

The functions use the navigator.userAgent property and some internal, browser-specific properties.

index.js

Copied!
function isChrome() {
  const userAgent = navigator.userAgent.toLowerCase();

  return (
    userAgent.includes('chrome') ||
    userAgent.includes('chromium') ||
    userAgent.includes('crios')
  );
}

Each function returns true if the browser is of the expected type and false otherwise.

We used the String.toLowerCase() method to convert the user agent string to lowercase before using String.includes() to check if it contains specific substrings in a case-insensitive manner.

# Get the Browser Name and Version in JavaScript using Bowser

You can also use the popular Bowser NPM package to get the browser name and version.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }
    </style>

    <script src=" https://cdn.jsdelivr.net/npm/bowser@2.11.0/es5.min.js "></script>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <h2 id="browser-type"></h2>

    <br />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Notice that we load the bowser package using a CDN.

Here is the related JavaScript file.

index.js

Copied!
console.log(window.navigator.userAgent);

const browser = bowser.getParser(window.navigator.userAgent);

const browserObject = browser.getBrowser();

// {
//     "name": "Chrome",
//     "version": "113.0.0.0"
// }
console.log(browserObject);

const browserName = browserObject.name;
console.log(browserName); // 👉️ 113.0.0.0

const browserVersion = browserObject.version;
console.log(browserVersion); // 👉️ Chrome

The browser.getBrowser() method returns an object that contains the name and version properties.

The name property stores the name of the current browser and the version property stores the version of the browser.

Here is a screenshot of the results in Google Chrome.

get browser name and version chrome

And here is a screenshot of the output in Firefox.

get browser name and version firefox

There is also a browser.getBrowserName() method.

index.js

Copied!
const browser = bowser.getParser(window.navigator.userAgent);

console.log(browser.getBrowserName()); // 👉️ Chrome

The example above uses a CDN script to load the Bowser library, however, you can also use the ES modules import syntax.

Here is the updated HTML file.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <h2 id="browser-type"></h2>

    <br />

    <script type="module" src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Notice that we set the type attribute of the script tag to module.

Here is the related JavaScript code.

index.js

Copied!
import bowser from 'https://cdn.jsdelivr.net/npm/bowser@2.11.0/+esm';

console.log(window.navigator.userAgent);

const browser = bowser.getParser(window.navigator.userAgent);

const browserObject = browser.getBrowser();

// {
//     "name": "Chrome",
//     "version": "113.0.0.0"
// }
console.log(browserObject);

const browserName = browserObject.name;
console.log(browserName); // 👉️ 113.0.0.0

const browserVersion = browserObject.version;
console.log(browserVersion); // 👉️ Chrome

The example uses an ES modules import statement to import the bowser module.

The remainder of the code is the same.

The bowser package also provides you with additional information, e.g. the operating system, the platform and the engine.

index.js

Copied!
import bowser from 'https://cdn.jsdelivr.net/npm/bowser@2.11.0/+esm';

// {
//     "browser": {
//         "name": "Chrome",
//         "version": "113.0.0.0"
//     },
//     "os": {
//         "name": "Linux"
//     },
//     "platform": {
//         "type": "desktop"
//     },
//     "engine": {
//         "name": "Blink"
//     }
// }
console.log(bowser.parse(window.navigator.userAgent));

The bowser.parse() method takes the user agent string and returns an object that contains information about the browser, the operating system, the platform and the engine.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Get Browser name (Chrome, Firefox, etc) and Version in JS

# Table of Contents

# Get Browser name (Chrome, Firefox, Safari) in JavaScript

# Get Browser name (Chrome, Firefox, Safari) using String.includes() in JavaScript

# Get the Browser Name and Version in JavaScript using Bowser

# Additional Resources

Borislav Hadzhiev

# Get Browser name (Chrome, Firefox, Safari) using `String.includes()` in JavaScript