How do I detect Chromium specifically vs. Chrome?

Question

Is there a way to detect if a visitor to my site is running Chromium as opposed to Google Chrome? Even basic UA sniffing (which I know is bad practice) would suffice for my particular case, but it appears that Chromium and Chrome share the same UA string – is that correct? Is there any other way that I can differentiate between the two?

Obidiah

Answer 1

Chrome ships with a built-in PDF reader, Chromium doesn't.
You could detect this by using JavaScript:

function isChrome() { // Actually, isWithChromePDFReader
    for (var i=0; i<navigator.plugins.length; i++)
        if (navigator.plugins[i].name == 'Chrome PDF Viewer') return true;
    return false;
}

This method is not 100% reliable, because users can copy the PDF reader binary from Chrome to their Chromium directory, see this answer on Ask Ubuntu.

There's almost no difference between Chromium and Chrome (certainly not in the rendering or JavaScript engine), so why do you want to spot the difference?

Underground

Thanks! I assume you probably mean navigator.plugins[i].name? (Shift the s. :p) – Profound

It's worth nothing this is only true for the Desktop Version of Chrome. – Amphibology

Sad, my Chromium 39 for Mac returns "true"! – Bignonia

Answer 2

Starting with Chromium 84 there's a new method called User-Agent Client Hints reference

You can check if the userAgentData property exists and look for brand data. It will return an array that looks something like this.

[{
    "brand": " Not;A Brand",
    "version": "99"
}, {
    "brand": "Google Chrome",
    "version": "91"
}, {
    "brand": "Chromium",
    "version": "91"
}]

userAgentData.brands will contain varying values in a varying order, so don't rely on something appearing at a certain index. Instead check if the property exists in the array.

if (navigator.userAgentData) {
    let vendors = window.navigator.userAgentData.brands;
    if (vendors.filter(e => e.brand === 'Google Chrome').length > 0) {
        console.log('Chrome')
    } else {
        console.log('Chromium')
    }
}

Tailrace

This is still working in October 2021. – Herpes

Answer 3

Note:
This no longer works, because now all Chrome-based-navigators have all plugins.

New Chromium-versions do have the PDF-plugin, too.
But they also have Chromium-plugins, so if any plugin starts with "Chromium", it's Chromium:

function isChromium() {

  for (var i = 0, u = "Chromium", l = u.length; i < navigator.plugins.length; i++) {
    if (navigator.plugins[i].name != null && navigator.plugins[i].name.substr(0, l) === u)
      return true;
  }

  return false;
}

Also, use this to identify Microsoft Chredge (aka. Anaheim)

function isEdg() {

  for (var i = 0, u = "Microsoft Edg", l = u.length; i < navigator.plugins.length; i++) {
    if (navigator.plugins[i].name != null && navigator.plugins[i].name.substr(0, l) === u)
      return true;
  }

  return false;
}

Mogilev

Answer 4

Here is a variation to Paul W.'s answer that works for Chromium version 42 and above:

function isChromium() { // Actually, isWithChromiumPDFReader
    for (var i=0; i<navigator.plugins.length; i++)
        if (navigator.plugins[i].name == 'Chromium PDF Viewer') return true;
    return false;
}

This of course only works if the plugin has not been disabled by the user.

Godinez

This didn't work with me on Chrome 94.0.4606.81. It returned true while it was Chrome, NOT Chromium! – Herpes

Answer 5

Here is another way, using SpeechSynthesis feature.

Google Chrome Browser ships TTS voices, where Chromium browsers (incl. Brave) do not. Voices can be installed manually, with espeak (on linux) however the Google voices all start with Google, where the manually installed voices do not. As far as I know the Chrome voices are propriety, not free.

The collection of voices is an Array where each voices looks like this:

{
    voiceURI: "Google Deutsch",
    name: "Google Deutsch",
    lang: "de-DE",
    localService: false,
    default: true
}

We just need to find one who's name/URI starts with Google ...

function hasGoogleVoices() {
    return window.speechSynthesis.getVoices()
      .some(v => /^google/i.test(v.name));
}

(Tested on Linux for Chrome, Brave, Chromium and Firefox) Please can someone check Safari and Windows. Thx.

Ivey

Tested on Chrome 94 on Windows 7 in 2021/10. It works! – Herpes

Answer 6

Could not comment on https://mcmap.net/q/110386/-how-do-i-detect-chromium-specifically-vs-chrome Josh Answer.

On latest Chrome and Chromium (Oct 2021) some of the solutions returns true for both, so I had to find a different solution.

I took https://mcmap.net/q/110386/-how-do-i-detect-chromium-specifically-vs-chrome fliptopbox code and implmented Josh answer.

const isChrome = navigator.userAgentData.brands.some((v) => /^google/i.test(v.brand));

The issue with Josh answer is that if you try this when just loading a page, the getVoices() returns empty array until all the voices are loaded (page finished loading) A promise solution to that here - https://mcmap.net/q/111865/-getting-the-list-of-voices-in-speechsynthesis-web-speech-api

For my use case it was a bit cumbersome with the getVoices() so I used the user agent hints solution.

Syndrome

Answer 7

After searching this was how I was able to make it work. You can use the navigator.userAgentData.brands[0].brand to fetch the Brand that a user's browser is. Because this object is not supported on all browsers (and older Google Chrome versions) you may need to wrap it in a try catch to prevent an unhandled exception error.

if (userAgent.includes("Chrome")) {
  try {
    const userBrand = navigator.userAgentData.brands[0].brand;

    if (userBrand === 'Google Chrome') {
      // User is 100% using Google Chrome
    } else {
      // User is maybe using an older
      // version of Google Chrome released in 2021 without support for the 
      //userAgentData or they're using a Chromium browser
    }
  } catch (error) {
    // Since the navigator.userAgentData.brands doesn't exist
    // We need to handle the error. If it doesn't exist, the user is not using 
    //Google Chrome or once again is using an older version of Google Chrome
  }
}

Boschbok

Answer 8

I've found a way that does not rely on the deprecated navigator.plugins API.

Disclaimer: it is not 100% guaranteed to work when someone uses customized Chromium with added codecs.

Disclaimer 2: it's still better to use a UserAgent-based method. In my particular use-case I couldn't rely on user agent.

const video = document.createElement('video') // Create a video element
const canPlayH264 =  video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"') // Verify h264 support

if (canPlayH264 === 'probably') {
  console.log('Only Chrome can play h264')
} else {
  console.log('Plain Chromium cannot play h264')
}

Vittorio