🔐 档案智填助手 (SecureProfile)

加密资料仓库 + 智能识别 + 系统级生物验证，将重复的资料录入压缩为"一键填充"

一个现代化的浏览器扩展，通过智能字段识别和安全的本地加密存储，实现表单的自动填充功能。

✨ 核心特性

🧠 智能识别：自动识别表单字段类型，支持中英文字段匹配
🔒 安全第一：AES-GCM 端到端加密，WebAuthn 生物认证
📱 零云存储：所有数据本地加密存储，保护用户隐私
⚡ 一键填充：类似密码管理器的下拉选择体验
🎯 精准匹配：基于置信度的字段匹配算法
🌍 多场景支持：支持个人信息、企业资料、证书信息等

🚀 快速开始

环境要求

Node.js 18+
npm 或 yarn
Chrome/Edge 浏览器（支持Manifest V3）

安装依赖

# 克隆项目（或直接使用已创建的文件）
git clone <your-repo-url>
cd SecureProfile

# 安装依赖
npm install

开发构建

# 开发模式（监听文件变化）
npm run dev

# 生产构建
npm run build

# 清理构建产物
npm run clean

加载到浏览器

运行 npm run build 构建项目
打开 Chrome 浏览器，进入 chrome://extensions/
开启"开发者模式"
点击"加载已解压的扩展程序"
选择项目根目录下的 dist 文件夹
扩展安装完成！

📖 使用指南

第一次使用

安装扩展后，会自动打开设置页面
添加资料：点击"添加新资料"创建您的第一个资料模板
配置安全：在安全设置中启用生物认证（推荐）

日常使用

访问表单页面：在任何包含表单的网页
点击字段：点击需要填充的输入框
选择资料：从弹出的下拉菜单中选择对应资料
生物认证：如果资料需要二次认证，完成指纹/面容识别
自动填充：系统自动填充所有匹配的字段

快捷键

Ctrl/Cmd + Shift + A：在当前聚焦字段触发快速填充

📁 项目结构

SecureProfile/
├── src/
│   ├── background/           # 后台服务（Service Worker）
│   │   └── main.ts          # 后台脚本主文件
│   ├── content/             # 内容脚本
│   │   ├── injector.ts      # 主注入器
│   │   ├── field-detector.ts # 字段检测器
│   │   ├── autofill-dropdown.ts # 下拉组件
│   │   └── styles.css       # 样式文件
│   ├── popup/               # 扩展弹窗
│   │   ├── index.html       # 弹窗页面
│   │   └── popup.ts         # 弹窗脚本
│   ├── options/             # 设置页面
│   │   ├── index.html       # 设置页面
│   │   └── options.ts       # 设置脚本
│   └── shared/              # 共享模块
│       ├── types.ts         # 类型定义
│       ├── constants.ts     # 常量定义
│       └── crypto.ts        # 加密工具
├── manifest.json            # 扩展清单
├── package.json            # 项目配置
├── webpack.config.js       # Webpack配置
├── tsconfig.json           # TypeScript配置
└── README.md               # 项目说明

🛡️ 安全设计

本地优先的安全架构

零云存储：默认情况下所有数据仅存储在本地
端到端加密：使用 AES-GCM 算法加密所有敏感数据
生物认证：支持 WebAuthn 指纹/面容识别
GDPR合规：自动日志脱敏，保护用户隐私

加密流程

主密钥生成：基于用户密码 + 随机盐生成主密钥
数据加密：每个字段值独立加密存储
认证保护：敏感资料需要二次生物认证才能使用

🎨 UI设计理念

基于需求文档中的5个核心交互场景：

智能下拉选择：类似Chrome密码泡泡的原生体验
生物认证：简洁的指纹识别模态框
填充确认：成功状态反馈和提交确认
资料管理：卡片式资料展示和管理
安全设置：开关式安全选项配置

🔧 技术栈

前端框架：原生 TypeScript + DOM API
构建工具：Webpack 5 + ts-loader
加密库：Web Crypto API (原生)
UI样式：原生 CSS3（无依赖）
扩展标准：Manifest V3

📊 字段识别

支持的字段类型

个人信息

姓名、身份证号、手机号、邮箱
出生日期、地址等

企业信息

公司名称、税号、营业执照
注册地址、法人代表等

银行信息

银行卡号、开户行等

智能匹配算法

字段匹配逻辑（4步骤）

扩展使用4个步骤的字段匹配逻辑，按优先级依次执行：

第1步：Label 完全匹配

// 字段的 label 与模板中的 label 完全匹配
if (label === field.label.toLowerCase()) {
  return `${templateType}.${field.key}`;
}

第2步：Label 与别名完全匹配

// 字段的 label 与模板中的 aliases 完全匹配
if (label === alias.toLowerCase()) {
  return `${templateType}.${field.key}`;
}

第3步：Name 与别名完全匹配

// 字段的 name 属性与模板中的 aliases 完全匹配
if (name === alias.toLowerCase()) {
  return `${templateType}.${field.key}`;
}

第4步：模糊匹配（优先级算法）

// 使用 label、name、placeholder 进行包含匹配
if (identifier.includes(lowerAlias)) {
  let priority = 50; // 基础分数
  
  // 特定类型加分
  if (lowerAlias.includes('身份证') || lowerAlias.includes('驾驶证')) priority += 40;
  if (lowerAlias.includes('公司') || lowerAlias.includes('企业')) priority += 35;
  if (lowerAlias.includes('联系') || lowerAlias.includes('contact')) priority += 50;
  
  // 通用词汇减分
  if (lowerAlias === 'address' || lowerAlias === '地址') priority -= 30;
  if (lowerAlias === 'name' || lowerAlias === '姓名') priority -= 25;
  
  // 来源加分
  if (identifier === label) priority += 30;  // label 匹配
  else if (identifier === name) priority += 15; // name 匹配
}

匹配特性

多语言支持：中英文字段标签识别
置信度评分：基于标签匹配度、字段类型等因素
模糊匹配：支持别名和近似匹配
优先级排序：完全匹配 > 部分匹配，具体类型 > 通用类型
上下文分析：分析字段周围的文本内容

🚀 开发指南

字段模板配置

FIELD_TEMPLATES 结构

字段匹配基于 src/shared/constants.ts 中的 FIELD_TEMPLATES 配置：

export const FIELD_TEMPLATES = {
  // 身份证信息
  identity: [
    { 
      key: 'idNumber', 
      label: '身份证号码', 
      placeholder: '110101199001011234', 
      aliases: ['身份证', '身份证号码', '证件号码', '证件号', '公民身份号码', 'id number', 'identity'] 
    },
    // ... 更多字段
  ],
  
  // 营业执照信息
  businessLicense: [
    { 
      key: 'companyName', 
      label: '公司名称', 
      placeholder: '北京橙子科技有限公司', 
      aliases: ['名称', '公司名称', '企业名称', '目标主体名称', '主体名称', 'company name'] 
    },
    { 
      key: 'taxNumber', 
      label: '统一社会信用代码', 
      placeholder: '91110000123456789X', 
      aliases: ['统一社会信用代码', '税号', '纳税人识别号', '目标主体证件号', '主体证件号', 'tax number'] 
    },
    // ... 更多字段
  ]
};

字段配置说明

key: 字段的唯一标识符
label: 字段的显示名称（用于完全匹配）
placeholder: 字段的示例值
aliases: 字段的别名数组（用于匹配各种表单字段名）

添加新的字段类型

在 src/shared/constants.ts 的 FIELD_TEMPLATES 中添加新模板：

newCertificate: [
  { 
    key: 'certificateNumber', 
    label: '证书编号', 
    placeholder: 'ABC123456789', 
    aliases: ['证书编号', '证书号', 'certificate number'] 
  }
]

添加字段显示名称映射（在 getFieldDisplayName 方法中）：

certificateNumber: '证书编号',

添加资料类型图标（在 PROFILE_TYPE_ICONS 中）：

newCertificate: '📜',

字段匹配维护注意事项

修改匹配逻辑时的考虑

优先级影响：第4步模糊匹配的优先级调整会影响所有现有字段的匹配行为
别名冲突：添加新别名时要检查是否与现有别名冲突（如 证件号 同时用于身份证和营业执照）
测试范围：修改匹配逻辑后需要测试多种字段类型，确保不破坏现有功能
向后兼容：新增字段类型要保持与现有数据结构的兼容性

常见匹配冲突处理

通用词汇：如 姓名、证件号 等可能匹配多个字段类型，需要通过优先级权重区分
上下文依赖：如 目标主体证件号 vs 证件号，应优先匹配更具体的别名
语言混合：中英文混合的字段需要在别名中都包含对应的关键词

自定义UI组件

所有UI组件都支持自定义样式，通过修改对应的CSS类即可：

.autofill-dropdown：下拉菜单
.autofill-profile-option：资料选项
.autofill-modal：模态框

🤝 贡献指南

Fork 本项目
创建特性分支：git checkout -b feature/amazing-feature
提交更改：git commit -m 'Add amazing feature'
推送分支：git push origin feature/amazing-feature
提交 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

🙏 致谢

感谢 Chrome Extensions 团队提供的 Manifest V3 标准
感谢 Web Crypto API 提供的原生加密支持
参考了多个开源密码管理器的 UX 设计

📞 支持

如有问题或建议，请：

查看 Issues 页面
创建新的 Issue
发送邮件至：your-email@example.com

注意：本扩展注重隐私保护，所有数据均在本地加密存储，不会上传到任何服务器。请妥善保管您的主密码，遗失后数据无法恢复。

Name		Name	Last commit message	Last commit date
src		src
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
PRIVACY.md		PRIVACY.md
README.md		README.md
create-icons.js		create-icons.js
ensure-icons.js		ensure-icons.js
manifest.json		manifest.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
webpack.config.js		webpack.config.js

Latest commit

History

Folders and files

Repository files navigation