Chrome浏览器检测方案选型咨询：适配自助终端特定功能

首先得明确你的核心需求：针对Chrome自助终端（Kiosk模式），把原本下载文档的逻辑改成新标签页打开，因为这类终端限制了下载和直接打开文档的操作。接下来咱们聊聊你试过的几个方案，以及我给的专业建议：

你尝试过的方案分析 #

1. 仅依赖userAgent检测 #

• 问题：这种方式很容易误判，现在很多Chromium内核的浏览器（比如Edge、Opera）都会在userAgent里带上Chrome字样，没法精准区分原生Chrome和其他Chromium浏览器。
• 你的代码：

  this.isChromeBrowser = (/(?!.*chrome).*/i).test(navigator.userAgent);
  

  （顺便提一句，这个正则逻辑好像写反了？应该是匹配包含Chrome的UA才对，但核心问题还是误判的问题）

2. 仅使用window.chrome检测 #

• 问题：之前这个方法能生效，但现在在某些Chrome环境（比如你的Kiosk终端）里，window.chrome.webstore或者window.chrome.runtime可能被限制而未定义，导致整个检测表达式返回false，没法正确识别Chrome。
• 你的代码：

  this.isChromeBrowser = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
  

3. 结合userAgent与navigator.vendor的方案 #

这是你倾向的方向，确实比前两种靠谱，咱们拆解两种写法的优劣：

• 写法一：

  this.isChromeBrowser = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  

  优势：完美避开了前两种的坑——通过navigator.vendor的Google Inc来区分原生Chrome和其他Chromium浏览器（比如Edge的vendor是Microsoft Corporation），同时不用依赖window.chrome的子属性，避免了Kiosk环境下的属性缺失问题。
• 写法二：

  this.isChromeBrowser = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && window.chrome;
  

  优势：多了一层window.chrome的校验，理论上误判概率更低，但要注意：如果你的Kiosk终端里window.chrome本身是存在的（只是webstore/runtime没了），那这个写法没问题；但如果Kiosk模式完全禁用了window.chrome对象，那这个检测就会失效，反而不如写法一稳妥。

最终建议 #

我更推荐写法一，原因如下：

1. 精准性：通过navigator.vendor的Google Inc，能准确把原生Chrome和其他Chromium内核浏览器区分开，解决了userAgent单独使用的误判问题；
2. 稳定性：不依赖window.chrome的子属性，也不用纠结Kiosk环境下window.chrome是否存在，只要是原生Chrome（包括Kiosk模式），navigator.vendor必然是Google Inc，UA里也会有Chrome字样；
3. 兼容性：这个方案在绝大多数Chrome版本（包括桌面Kiosk）里都能稳定运行，不会因为浏览器的API限制而失效。

另外，建议你在目标Kiosk终端上实际测试一下navigator.userAgent和navigator.vendor的具体值，确保符合预期——毕竟不同的Kiosk配置可能有细微差异，但原生Chrome的这两个属性是很稳定的。

内容的提问来源于stack exchange，提问作者bharath c