如何检查浏览器是否基于 Chromium？

Question

我有一个 Chrome 扩展，我目前正在写一个网站来宣传它。 我知道 Chrome 扩展可以安装在所有基于 Chromium 的浏览器（Chrome、Opera 等）中。

是否可以检查浏览器是否可以从网上商店下载扩展程序或者是基于 chromium 的？

我找到了检测它是否为 Google Chrome here 的代码。如果我错了请纠正我，但我认为 window.chrome 不会在所有基于 Chromium 的浏览器中 return。

Answer 1

window.chrome

截至目前，window.chrome 适用于所有基于 chromium 的浏览器

var isChromium = !!window.chrome;

console.log(isChromium)

资源

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

navigator.userAgentData

User-Agent Client Hints API returns 用户的浏览器和操作系统信息。 （在chrome90中介绍）

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

console.log(isChromium)

资源

• 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

尝试使用以下表达式

navigator.userAgent.includes("Chrome")

Answer 3

试试这个。此检查对 chrome、Safari、Edge、三星浏览器等

显示为真

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 4

我猜：

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

Answer 5

考虑到您只是想知道浏览器是否基于 chromium，

方法一：（服务端检测）

-- 从客户端请求本身获取浏览器名称并相应地提供网页。例如，如果后端基于 Nodejs，您可以获得 this 答案中的浏览器名称。

方法二：（客户端检测）

-- 在客户端，您可以先获取 this 答案中回答的浏览器名称，然后从硬编码的基于 Chromium 的浏览器数组中检查它。