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

Question

I have a Chrome extension, and I am currently writing a website to advertise it. I know that a Chrome extension can be installed in all Chromium-based browsers (Chrome, Opera, etc.).

Is it possible to check if a browser can download the extension from the web store or is chromium-based?

I found code to detect if it was Google Chrome here. Correct me if I'm wrong, but I think window.chrome doesn't return in all Chromium-based browsers.

Answer 1

window.chrome

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

var isChromium = !!window.chrome;

console.log(isChromium)

Resources

• https://browserstrangeness.github.io/css_hacks.html
• http://browserhacks.com/

navigator.userAgentData

User-Agent Client Hints API returns information about the browser and operating system of a user. (Introduced in chrome 90)

var isChromium = !!navigator.userAgentData && navigator.userAgentData.brands.some(data => data.brand == 'Chromium');

console.log(isChromium)

Resources

• https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgentData
• https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData
• https://web.dev/migrate-to-ua-ch/

Answer 2

Considering that you just want to get to know whether browser is chromium based or not ,

Method 1: ( Server Side Detection)

-- Get Browser name from client request itself and serving the webpage accordingly. For example, If backend is based on Nodejs, You can get browser name as answered in this answer.

Method 2: ( Client Side Detection)

-- On client Side ,You can first get the Browser Name as answered in this answer , and then check it from HARD-CODED Chromium-based browsers Array.

Answer 3

Try using the following expression

navigator.userAgent.includes("Chrome")

Answer 4

Try this. This check shows true for chrome, safari, edge, samsung browser.. etc

The -webkit-appearance property is used by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing.

function isChromium(){
   return window.CSS && window.CSS.supports && window.CSS.supports('(-webkit-appearance:none)');
}

Answer 5

I guess:

var isChrome = navigator.userAgent.match(/Chrome\/\d+/) !== null;