在当前的网络环境中，账户安全十分重要。传统的密码认证机制在面对多样化的攻击手段时显得愈发脆弱，因此，双重认证（2FA）已从一个可选项变为了业界推荐的必要安全措施。在众多 2FA 方案中，基于时间的一次性密码（Time-based One-Time Password, TOTP）成为了应用最普遍的技术之一，而在国内较多使用的 2FA 方式是短信验证码。

本文将简单介绍一下我从零开始开发一款新的 TOTP 浏览器扩展——Nx2FA 的动机、选型与实现。

动机

长期以来，我习惯在 Android 设备上使用 Aegis Authenticator 这款优秀的开源应用来管理 2FA 凭证。然而，当视线转向浏览器端时，我发现浏览器扩展生态中缺少一个能与之媲美的选项。

在开始 Nx2FA 的开发前，我调研了多款现有的 TOTP 扩展。它们虽然实现了基本功能，却普遍存在一些共通的缺憾：部分应用的界面设计语言陈旧，交互体验与现代操作系统脱节；另一些则功能冗余，核心体验不够纯粹；还有一些在细节上打磨不足，缺少清晰的倒计时指示或便捷的账户编辑功能。

因此，我的目标是创建一款轻量、专注、安全且具备现代化 UI 的 TOTP 扩展，它应只做好一件事：在浏览器中高效地管理 TOTP 验证码。

选型

四舍五入，我的目标只有两个：美观和实用。

• 美观：我选择了 Google 最新的设计风格 Material Design 3 (MD3)。 相较于前代，MD3 提供了更柔和的组件形态、更富表现力的色彩系统，使界面看起来更友好、更具呼吸感。这对于提升一个工具型应用的使用体验至关重要，并且 MD3 可以与 Chrome 的 UI 风格进行良好的配合。

• 实用：二维码生成使用 jeromeetienne/jquery-qrcode，TOTP 实现使用 LanceGin/jsotp。

实现

代码开源在 Github NeterAlex/Nx_2FA: A Chrome Extension for generating and managing TOTP 2FA .

基于 Google Manifest V3 标准，最终实现了如下功能：

• TOTP验证码生成: 支持标准的6位 TOTP 验证码

• 实时倒计时: 显示验证码剩余有效时间

• 一键复制: 点击验证码或复制按钮快速复制到剪贴板

• 智能搜索: 实时搜索账户名称和发行商

• 智能置顶: 自动识别并置顶与当前网页匹配的账户

• 可视化标识: 匹配账户显示置顶标签提示

• 导入导出功能: 支持otpauth://格式的备份和恢复

• 多账户管理: 支持添加、编辑和删除多个2FA账户

• Material Design 3: 使用 Google Material Design 3 风格设计 UI

上架

注意: 此扩展处理敏感的认证信息，请确保只从可信来源安装，并定期检查扩展权限。

经 Google Chrome 应用商店审核，Nx2FA 已经上架在 Nx 2FA - Chrome 应用商店，欢迎下载试用，目前功能还在不断迭代更新中。