如何检测WebExtension运行的浏览器（Chrome/Firefox）并展示对应提示？

嘿，这个问题问得很实际！在WebExtension里区分Firefox和Chrome，最靠谱的方式肯定是用浏览器原生提供的扩展API，而不是去解析navigator.userAgent——毕竟userAgent太容易被篡改，不同版本的格式还可能乱变，稳定性差远了。

下面给你推荐递进的方案，优先用第一种，第二种作为兜底：

1. 优先使用 runtime.getBrowserInfo() API #

这是浏览器官方专门用来获取自身信息的API，返回结果准确且不受外部干扰，是首选方案。

代码示例 #

async function getCurrentBrowser() {
  let browserDetails;
  try {
    // 先尝试标准的browser命名空间（Firefox原生支持，Chrome 88+也兼容）
    if (typeof browser !== 'undefined' && browser.runtime?.getBrowserInfo) {
      browserDetails = await browser.runtime.getBrowserInfo();
    } 
    // Chrome传统用chrome命名空间，它的getBrowserInfo是回调式，转成Promise统一处理
    else if (typeof chrome !== 'undefined' && chrome.runtime?.getBrowserInfo) {
      browserDetails = await new Promise(resolve => chrome.runtime.getBrowserInfo(resolve));
    }
    // 如果以上都不支持，再兜底到userAgent解析（尽量不用，但留个后手）
    else {
      const ua = navigator.userAgent;
      if (ua.includes('Firefox')) {
        browserDetails = {
          name: 'Firefox',
          version: ua.match(/Firefox\/(\d+)/)[1]
        };
      } else if (ua.includes('Chrome') && !ua.includes('Edg')) { // 排除Edge伪装的Chrome UA
        browserDetails = {
          name: 'Chrome',
          version: ua.match(/Chrome\/(\d+)/)[1]
        };
      } else {
        browserDetails = { name: 'Unknown' };
      }
    }
    return browserDetails;
  } catch (err) {
    console.error('浏览器检测出错:', err);
    return { name: 'Unknown' };
  }
}

// 调用示例，在选项页面中使用
getCurrentBrowser().then(info => {
  const noteElement = document.getElementById('browser-warning');
  if (info.name === 'Firefox') {
    // 这里替换成你的漏洞提示和修复版本信息
    noteElement.textContent = `⚠️ 注意：Firefox版本低于115存在XX漏洞，请升级到115及以上版本以修复。`;
    noteElement.style.color = '#dc2626';
  } else if (info.name === 'Chrome') {
    noteElement.textContent = '您使用的是Chrome浏览器，不受该漏洞影响。';
    noteElement.style.color = '#059669';
  } else {
    noteElement.textContent = '无法识别当前浏览器，请确认是否为支持的浏览器类型。';
  }
});

为什么这个方案好？ #

• 准确性高：API直接返回浏览器的官方标识，不会像userAgent那样被篡改或伪造。
• 兼容性广：同时覆盖Firefox的browser命名空间和Chrome的chrome命名空间，还处理了两者API异步方式的差异（Firefox用Promise，Chrome用回调）。
• 有兜底：留了userAgent解析的后手，应对极少数不支持getBrowserInfo的旧版本浏览器。

2. 额外提示：如果用了WebExtension Polyfill #

如果你在扩展里引入了Mozilla的WebExtension Polyfill（用来抹平Firefox和Chrome的API差异），那更简单了——直接用browser.runtime.getBrowserInfo()就行，polyfill会自动帮你适配Chrome的环境，不用再区分chrome和browser命名空间。

内容的提问来源于stack exchange，提问作者Alexey Romanov