如何检测客户端使用的Web浏览器是否为Vivaldi？

Vivaldi出于网站兼容性考虑，默认会将User-Agent字符串伪装为Chrome的UA值，因此无法通过常规的navigator.userAgent关键字匹配完成检测，可使用以下两种方案实现识别：

方案1：调用Vivaldi专属API（推荐，准确率最高） #

Vivaldi浏览器会在全局navigator对象上挂载独有的vivaldi属性，是官方预留的标识特征，所有Vivaldi 1.0及以上版本均支持该属性，检测代码如下：

function checkIsVivaldi() {
  return typeof navigator !== 'undefined' && !!navigator.vivaldi;
}

该方案可以覆盖99%以上的常规使用场景，无需额外的特征校验。

方案2：多特征组合校验（备用方案） #

如果遇到navigator.vivaldi被人为篡改的极端场景，可以结合Vivaldi的独有运行特征做组合判断，核心判断维度包括：

• 内核特征为Chrome
• 存在Vivaldi专属的插件、扩展运行标记
• 内部API存在Vivaldi独有标识

示例代码如下：

async function checkIsVivaldiFallback() {
  // 首先排除非Chromium内核浏览器
  if (typeof navigator === 'undefined' || !navigator.userAgent.includes('Chrome')) {
    return false;
  }
  try {
    // 校验插件特征
    const hasVivaldiPlugin = Array.from(navigator.plugins).some(plugin => 
      plugin.name.includes('Vivaldi') || plugin.description.includes('Vivaldi')
    );
    // 校验扩展运行时特征，mpognobbkildjkofajifpdfhcoklimli为Vivaldi内置扩展固定ID
    const hasVivaldiRuntime = typeof chrome !== 'undefined' && 
      chrome.runtime?.id?.includes('mpognobbkildjkofajifpdfhcoklimli');
    return hasVivaldiPlugin || hasVivaldiRuntime;
  } catch (e) {
    return false;
  }
}

注意：该备用方案仅作为第一种方案的补充，不建议单独使用，特征规则可能随浏览器版本迭代发生变化。

内容的提问来源于stack exchange，提问作者Phillip Yeo Kian Yong