ExtensionLink 组件

ExtensionLink 组件

浏览器扩展链接组件，根据用户浏览器显示对应的扩展下载链接。

功能概述

  • 浏览器检测: 自动检测 Chrome 或 Firefox
  • 动态链接: 根据浏览器类型显示对应扩展链接
  • 图标适配: 显示 Chrome 或 Firefox 图标

Props 接口

interface ExtensionLinkProps {
  url: string;  // Chrome 扩展商店链接
}

浏览器检测

使用 lib/utils.ts 中的工具函数：

  • isChromeBrowser() - 检测 Chrome/Chromium 浏览器
  • isFirefoxBrowser() - 检测 Firefox 浏览器

链接配置

const FIREFOX_ADDON_URL = "https://addons.mozilla.org/en-US/firefox/addon/prompts-chat/";
浏览器链接目标
Chrome传入的 url 参数
FirefoxMozilla Add-ons 页面

状态处理

  • 非 Chrome/Firefox 浏览器：不显示组件
  • 仅在客户端检测（避免 SSR 不匹配）

依赖

  • next-intl - 国际化
  • next/link - 链接组件
  • lucide-react - Chromium 图标
  • @/lib/utils - 浏览器检测工具

使用示例

import { ExtensionLink } from "@/components/layout/extension-link";

<ExtensionLink url="https://chrome.google.com/webstore/detail/xxx" />

翻译键

{
  "homepage": {
    "extension": "扩展"
  }
}

样式说明

  • 背景色: bg-zinc-900 (dark: bg-zinc-800)
  • 高度: 40px (h-10)
  • 圆角: rounded-lg
  • 响应式：移动端只显示图标，桌面端显示文字
  • 文字颜色: 白色 (text-zinc-100)

注意事项

  • 组件使用 "use client" 指令
  • 使用 useEffect 进行浏览器检测
← 返回目录