FormBuddy - 快速填充表单工具

一款现代轻量的浏览器插件，辅助您在浏览器中方便填写您的常用信息

截图

功能特性

• 快速填充: 一键将常用信息填充到当前激活的输入框
• 拖拽排序: 支持拖拽调整信息顺序，自定义快捷键位置
• 快捷键支持: 使用 Alt + 1-9 快速填充对应位置的信息
• 本地存储: 所有数据保存在本地，隐私安全
• 复制功能: 快速复制信息到剪贴板
• 编辑管理: 支持新增、编辑、删除表单项
• 跨浏览器: 支持 Chrome 和 Firefox 浏览器

技术栈

• 框架: Vue 3 - 渐进式 JavaScript 框架
• 构建工具: WXT - 现代浏览器扩展开发框架
• 语言: TypeScript - JavaScript 的超集
• 样式: Tailwind CSS - 原子化 CSS 框架
• UI 组件: Element Plus - Vue 3 组件库
• 工具库: VueUse - Vue 组合式工具集
• 拖拽: @vue-dnd-kit/core - Vue 拖拽工具
• 代码规范: Oxlint + Oxfmt - 快速代码检查和格式化
• Git Hooks: Husky - Git hooks 管理

安装使用

从 Release 安装

1. 前往 Releases 页面下载最新版本的压缩包
2. 打开浏览器的扩展管理页面：
   • Chrome: chrome://extensions/
   • Firefox: about:addons
3. 开启右上角的"开发者模式"
4. 将下载的压缩包解压成文件夹
5. 将解压后的文件夹拖拽到扩展管理页面
6. 点击"添加扩展"完成安装

使用方法

1. 点击浏览器工具栏中的 FormBuddy 图标打开弹窗
2. 点击"新增表单"添加常用信息
3. 使用快捷键 Alt + 1-9 快速填充对应位置的信息
4. 或直接点击"填充"按钮将信息填入当前激活的输入框
5. 拖拽项目可以调整顺序，改变快捷键对应关系

开发指南

环境要求

• Node.js >= 18
• pnpm (推荐) 或 npm

安装依赖

# 使用 pnpm
pnpm install

# 或使用 npm
npm install

开发模式

# Chrome 开发模式
pnpm dev

# Firefox 开发模式
pnpm dev:firefox

构建

# Chrome 生产构建
pnpm build

# Firefox 生产构建
pnpm build:firefox

# 打包压缩
pnpm zip

代码检查和格式化

# 代码检查
pnpm lint

# 自动修复
pnpm lint:fix

# 代码格式化
pnpm fmt

# 拼写检查
pnpm spellcheck

# 运行所有检查
pnpm check

提交代码

项目使用 Commitizen 进行规范化提交：

pnpm commit

项目结构

FormBuddy-wxt/
├── public/              # 静态资源
│   └── icon/           # 图标文件
├── src/
│   ├── components/     # 组件
│   │   └── sortable/   # 可排序列表组件
│   ├── entries/        # 扩展入口
│   │   ├── background.ts   # 后台脚本
│   │   ├── content.ts      # 内容脚本
│   │   └── popup/          # 弹窗页面
│   └── types/          # TypeScript 类型定义
├── .husky/            # Git hooks
├── wxt.config.ts      # WXT 配置
├── tsconfig.json      # TypeScript 配置
└── package.json       # 项目配置

核心功能说明

内容脚本 (content.ts)

负责在网页中监听和填充表单：

• 监听来自弹窗的填充消息
• 监听快捷键事件（Alt + 数字键）
• 将数据填充到当前激活的输入框

弹窗界面 (popup/App.vue)

提供用户交互界面：

• 显示和管理常用信息列表
• 支持拖拽排序
• 发送填充消息到内容脚本
• 数据持久化到浏览器存储

浏览器兼容性

Chrome	Firefox	Edge	Safari
✅	✅	✅	⚠️

贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (pnpm commit)
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

许可证

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

致谢

感谢以下开源项目：

• WXT - 现代浏览器扩展开发框架
• Vue - 渐进式 JavaScript 框架
• Element Plus - Vue 3 组件库
• Tailwind CSS - 原子化 CSS 框架
• VueUse - Vue 组合式工具集

联系方式

• GitHub: dandelion-promise520
• Issues: GitHub Issues