如何为Chrome与Firefox同功能扩展设置统一跳转按钮？

这需求很常见，完全可以通过JavaScript + HTML实现单个按钮的智能跳转，下面是两种靠谱的方案，优先推荐第一种兼容性更好的：

方案一：通过User Agent检测浏览器（兼容性最优） #

核心思路是监听按钮点击事件，通过浏览器的navigator.userAgent字符串判断当前浏览器类型，动态设置跳转链接。

代码实现 #

<!-- 单个按钮 -->
<button id="extDownloadBtn">立即下载扩展</button>

<script>
// 获取按钮元素
const downloadBtn = document.getElementById('extDownloadBtn');

// 绑定点击事件
downloadBtn.addEventListener('click', () => {
  const userAgent = navigator.userAgent.toLowerCase();
  let targetUrl;

  // 检测Firefox浏览器
  if (userAgent.includes('firefox')) {
    targetUrl = '替换为你的Firefox扩展商店链接';
  } 
  // 检测Chrome（排除Edge，因为Edge UA也包含chrome）
  else if (userAgent.includes('chrome') && !userAgent.includes('edg')) {
    targetUrl = '替换为你的Chrome扩展商店链接';
  } 
  // 其他浏览器的 fallback 处理
  else {
    alert('抱歉，当前浏览器暂不支持，请使用Chrome或Firefox下载');
    return;
  }

  // 在新标签页打开下载链接
  window.open(targetUrl, '_blank');
});
</script>

说明 #

• 这种方法兼容性极强，覆盖几乎所有主流浏览器版本
• 如果你希望Edge用户也能跳Chrome扩展链接（毕竟Edge支持Chrome扩展），可以去掉&& !userAgent.includes('edg')的判断
• 若需要支持更多浏览器，只需在判断逻辑中添加对应的UA检测即可

方案二：使用现代API navigator.userAgentData（更精准） #

如果你不需要兼容太老的浏览器，可以用浏览器提供的userAgentData API，它能更精准地识别浏览器品牌，避免UA字符串被篡改的问题：

<button id="extDownloadBtn">立即下载扩展</button>

<script>
document.getElementById('extDownloadBtn').addEventListener('click', async () => {
  let targetUrl;

  // 检查浏览器是否支持userAgentData
  if (navigator.userAgentData) {
    // 获取浏览器品牌信息
    const { brands } = await navigator.userAgentData.getHighEntropyValues(['brands']);
    
    const isFirefox = brands.some(brand => brand.brand === 'Firefox');
    const isChrome = brands.some(brand => brand.brand === 'Google Chrome');

    if (isFirefox) {
      targetUrl = '替换为你的Firefox扩展商店链接';
    } else if (isChrome) {
      targetUrl = '替换为你的Chrome扩展商店链接';
    }
  } 
  // 兼容不支持userAgentData的浏览器，降级到UA检测
  else {
    const userAgent = navigator.userAgent.toLowerCase();
    if (userAgent.includes('firefox')) {
      targetUrl = '替换为你的Firefox扩展商店链接';
    } else if (userAgent.includes('chrome')) {
      targetUrl = '替换为你的Chrome扩展商店链接';
    }
  }

  if (targetUrl) {
    window.open(targetUrl, '_blank');
  } else {
    alert('抱歉，当前浏览器暂不支持，请使用Chrome或Firefox下载');
  }
});
</script>

说明 #

• userAgentData是Chrome 90+、Firefox 101+支持的API，比传统UA检测更可靠
• 代码中做了降级处理，不支持的浏览器会自动切换到UA检测，兼顾兼容性和准确性

额外提示 #

• 测试时可以在浏览器开发者工具的「网络」面板中修改UA字符串，验证不同浏览器的跳转逻辑是否正常
• 如果需要按钮样式更统一，可以用CSS美化按钮，不影响功能逻辑

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