TOTP 生成器 Chrome 扩展

基于时间的一次性密码 (TOTP) 生成器 Chrome 扩展，用于双因素认证。支持自动填充验证码到网页、多语言界面、数据导入导出等高级功能。

核心功能特点

🔐 TOTP 验证码生成

• 生成标准 30 秒间隔的 TOTP 验证码
• 支持 Base32 编码的密钥格式
• 使用 Web Crypto API 实现 HMAC-SHA1 安全加密
• 实时可视化倒计时进度环
• 验证码格式化显示（3位数字分组）

🎯 智能代码使用

• 左键点击：自动填充验证码到当前网页的输入框
• 回退机制：填充失败时自动复制到剪贴板
• 右键点击：删除账户（带确认对话框）
• 支持键盘导航和无障碍访问

💾 数据管理

• 本地安全存储账户信息（Chrome Storage API）
• JSON 格式数据导入导出功能
• 重复账户检测和处理
• 自动保存表单状态和滚动位置
• 应用状态持久化

🌍 多语言支持

• 内置中文（简体）和英文语言包
• 动态语言切换，无需重启
• 完整的 UI 文本国际化
• 语言偏好自动保存

🎨 用户体验

• 现代化渐变 UI 设计
• 响应式布局适配
• 流畅的动画效果
• Toast 消息提示系统
• 空状态友好提示

技术架构

核心模块

1. TOTP 核心引擎 (totp.js)

• base32Decode() - Base32 解码算法
• generateTOTP() - TOTP 代码生成（RFC 6238 标准）
• getRemainingSeconds() - 当前周期剩余时间计算

2. 主应用控制器 (App)

• 应用生命周期管理
• 验证码管理器 (codeManager)
• 定时器控制和动画循环
• 事件监听器统一管理

3. 存储管理器 (StorageManager)

• Chrome Storage API 封装
• 账户数据持久化
• 应用状态保存和恢复
• 异步存储操作

4. UI 管理器 (UIManager)

• DOM 操作和事件处理
• 进度环组件管理
• Toast 消息系统
• 确认对话框
• 设置页面控制

5. 导入导出管理器 (ImportExportManager)

• JSON 格式数据导出
• 文件导入验证和解析
• 重复账户处理逻辑
• 导入成功后 UI 更新

6. 页面分析器 (PageAnalyzer)

• 网页输入框自动检测
• TOTP 代码自动填充
• 页面内容脚本注入
• 填充结果反馈

7. 国际化系统 (I18n)

• 多语言文本管理
• 动态语言切换
• UI 文本实时更新
• 语言偏好存储

8. 工具类库 (Utils)

• DOM 操作辅助函数
• 键盘事件处理
• Chrome API 封装
• 数据验证工具
• 异步操作辅助

关键业务流程

账户管理流程

1. 添加账户：输入验证 → Secret 格式检查 → TOTP 测试生成 → 存储保存 → UI 更新
2. 删除账户：右键触发 → 确认对话框 → 数据删除 → 重新渲染列表

验证码生成流程

1. 定时更新：30秒周期检测 → 批量生成验证码 → 更新缓存 → UI 刷新
2. 进度显示：实时计算剩余时间 → 更新进度环 → 动画渲染

代码使用流程

1. 自动填充：检测 Chrome API → 查询当前标签页 → 注入内容脚本 → 查找输入框 → 填充验证码
2. 复制回退：填充失败检测 → 复制到剪贴板 → 显示提示消息

数据持久化流程

1. 状态保存：表单输入监听 → 滚动位置记录 → 本地存储更新
2. 状态恢复：应用启动 → 读取存储数据 → 恢复 UI 状态

安装方法

从 Chrome Web Store 安装（推荐）

访问 Chrome Web Store 直接安装

开发者模式安装

1. 克隆此仓库到本地
2. 打开 Chrome 浏览器，访问 chrome://extensions/
3. 在右上角启用"开发者模式"
4. 点击"加载已解压的扩展程序"，选择项目根目录

开发说明

环境要求

• Node.js 16+ 和 npm（用于图标生成）
• Chrome 浏览器 88+（支持 Manifest V2）

开发设置

1. 安装依赖：

npm install

2. 生成图标资源：

node generate_icons.js

3. 加载扩展进行开发测试

项目结构

mfa/
├── manifest.json          # 扩展配置文件
├── popup.html            # 主界面 HTML
├── popup.js              # 主应用逻辑（1000+ 行）
├── totp.js               # TOTP 核心算法
├── i18n.js               # 国际化语言包
├── generate_icons.js     # 图标生成脚本
├── icons/                # 扩展图标资源
├── website/              # 官网源码
└── package.json          # 项目依赖配置

核心文件说明

• popup.js - 主应用文件，包含所有核心模块和业务逻辑
• totp.js - TOTP 算法实现，符合 RFC 6238 标准
• i18n.js - 完整的中英文语言包和国际化系统
• popup.html - 响应式 UI 界面，支持现代浏览器特性

权限说明

扩展需要以下权限：

• storage - 本地数据存储
• activeTab - 当前标签页访问（用于自动填充）
• scripting - 内容脚本注入（用于页面操作）