你是不是也经常这样？
- 在 VS Code 里写代码，需要反复敲同一个长命令，或者从浏览器文档里复制粘贴示例代码，切来切去烦得要死？
- 作为软件工程 + AI 专业的学生，我每天要在终端、编辑器、笔记软件之间来回搬运代码片段、SQL 语句、API 参数，传统剪贴板只能记住最近一条，一不留神就覆盖了。
- 好不容易攒了一堆常用代码，散落在各个聊天记录、备忘录里，想用的时候搜都搜不到。
为了根治这个痛点，我用 Vue 3 + Dexie.js 花了三周时间，从零开发了一款浏览器扩展形态的智能剪贴板管理器。它就像我的“代码第二大脑”，把所有常用的文本片段分门别类存好，随时搜索、一键复制，还能自动高亮语法。最重要的是——所有数据只存在本地，绝对隐私安全。
🛠️ 功能简介
✅ 分类管理
- 支持自定义分类，并为每个分类设置颜色标签
- 分类名称超长自动省略，鼠标悬停显示完整名称
- 分类、编辑、删除、重命名，操作灵活
✅ 强大的搜索与高亮
- 全局模糊搜索，同时匹配标题和内容
- 搜索结果中，关键词实时高亮显示，一眼定位
✅ 语法高亮
- 自动识别 JavaScript、Python、Bash、SQL、JSON 等常用语言
- 基于
highlight.js实现，代码块更清晰可读
✅ 视图切换
- 卡片视图 / 列表视图，一键切换，适应不同浏览习惯
✅ 数据备份与迁移
- 一键导出所有数据为 JSON 文件
- 导入时先预览内容，并智能计算变更：
- 新增多少个分类
- 新增多少条指令
- 有多少同名条目会保留本地（避免覆盖）
- 用户确认后才真正合并，安全感拉满
✅ 跨设备设置同步
- 默认视图、主题模式等设置通过
chrome.storage.sync自动同步到所有登录同一浏览器的设备
✅ 深色模式
- 跟随系统或手动切换，保护眼睛
✅ 安全操作
- 所有删除操作都有二次确认
- 清空数据需要输入“确认清空”文字验证，防止手滑
✅ 快捷键
- 支持
Ctrl+Shift+Y快速打开扩展弹窗（Manifest V3 commands）
🧰 技术栈
- 前端框架：Vue 3 + Composition API + Vite
- UI 组件库：Element Plus（简洁美观）
- 本地存储：Dexie.js 封装 IndexedDB（支持结构化查询，性能远超 localStorage）
- 语法高亮：highlight.js（按需加载语言包，控制体积）
- 浏览器扩展 API：Manifest V3 + chrome.storage.sync（设置同步）
- 构建工具：Vite + @crxjs/vite-plugin（热更新开发体验极佳）
📁 项目结构
clipboard-manager/
├── public/ # 静态资源（图标等）
├── src/
│ ├── assets/ # 样式、图片
│ ├── components/ # Vue 组件（卡片、列表、弹窗等）
│ ├── db.js # Dexie 数据库初始化与操作
│ ├── App.vue # 主弹窗界面
│ ├── options.js # 设置页面入口
│ └── background.js # 后台脚本（快捷键等）
├── dist/ # 打包后的扩展（可加载）
├── package.json
├── vite.config.js # Vite 配置（含 crxjs 插件）
└── README.md
📸 效果展示
-
弹窗主界面：卡片视图下，每个片段带颜色分类标签，代码块语法高亮，底部有搜索框和视图切换按钮。
-
设置页面：深色模式开关、默认视图选择，修改后立刻同步到其他设备。
-
导入预览弹窗：上传 JSON 后，清晰列出“新增分类/指令”数量，以及“同名保留”的提示，确认按钮默认禁用，需勾选同意。
-
删除确认：点击删除分类时弹出二次确认，清空全部数据需要输入文字验证。
🚀 快速上手
- 从 GitHub 下载或克隆项目，执行
npm install安装依赖。 - 运行
npm run build生成dist文件夹。 - 打开 Edge 或 Chrome 浏览器的扩展管理页面（
edge://extensions或chrome://extensions）。 - 开启“开发人员模式”，点击“加载已解压的扩展”，选择
dist文件夹。 - 点击浏览器工具栏的扩展图标，开始管理你的代码片段！
💡 开发经验与心得
1️⃣ 为什么放弃 localStorage，选择 IndexedDB + Dexie.js？
一开始为了简单，我用 localStorage 存数据。但很快发现两个问题：一是容量限制（通常 5-10MB），存不了多少条带格式的代码；二是查询功能太弱，无法实现“搜索内容中的关键词”。后来调研发现 IndexedDB 才是正道，但原生 API 用起来像受刑。直到遇到 Dexie.js，它提供了类似 MongoDB 的优雅查询语法，支持模糊搜索、分页、索引，而且完美配合 Vue 3 的响应式系统。真香！
2️⃣ 导入合并的“安全感”设计
数据备份功能很简单，但导入时如何让用户放心？我见过不少工具直接覆盖本地数据，导致用户丢失现有内容。我的做法是：
- 解析上传的 JSON 后，不立即写入数据库，而是弹出预览对话框。
- 计算三个关键数字：新增分类数、新增指令数、同名指令保留数（本地已有的同名条目不会被覆盖）。
- 用户必须手动勾选“我已确认合并内容”，确认按钮才可用。
这个设计上线后，身边的朋友都说“终于敢导入数据了”。多给用户一点控制权，信任感会翻倍。
3️⃣ 语法高亮：按需加载，性能与体积的平衡
highlight.js 支持 190+ 种语言，如果全量引入，扩展体积会暴涨。我的解决方案是在 db.js 里维护一个常用语言列表（JS、Python、Bash、SQL、JSON……），只在初始化时动态导入这些语言模块。代码大致如下：
import { ref } from 'vue'
import hljs from 'highlight.js/lib/core'
// 按需导入语言
import javascript from 'highlight.js/lib/languages/javascript'
import python from 'highlight.js/lib/languages/python'
// ... 注册
hljs.registerLanguage('javascript', javascript)
这样既保证了核心功能，又控制了打包体积。
4️⃣ Manifest V3 下的新挑战
迁移到 Manifest V3 后，后台脚本被 Service Worker 替代，无法长期保持状态。我的快捷键 Ctrl+Shift+Y 需要监听命令，但 Service Worker 会在几秒后休眠。解决办法是利用 chrome.storage 存储必要状态，并在命令触发时唤醒。另外，V3 要求所有外部资源必须在 permissions 或 host_permissions 中声明，还好我只用到 storage 和 clipboardWrite，权限请求很干净。
5️⃣ 跨设备同步：chrome.storage.sync 真香
一开始我打算自己实现云同步，但涉及后端、加密、维护成本太高。后来发现 Chrome 内置的 chrome.storage.sync 正好适合同步设置类的小数据（最大 8KB 每项，总容量 100KB）。我把用户偏好（主题、默认视图）存在这里，只要用户登录了同一个 Chrome 账号，设置就会自动漫游。充分利用平台能力，事半功倍。
6️⃣ 细节体验：从“能用”到“好用”
- 分类名称太长怎么办？用 CSS 截断 +
title属性显示完整名称。 - 删除重要数据怕误操作？所有删除都弹二次确认，清空全部需要输入固定文字。
- 操作后希望有反馈？每个异步动作都有 loading 状态和 Toast 提示。
这些细节看起来微不足道，但累积起来就是用户愿意持续使用的理由。
🔒 隐私与安全说明
本扩展严格遵守 零云端存储 原则：
- 所有你添加的代码片段、分类数据，仅保存在你电脑的 IndexedDB 本地数据库中，绝不发送到任何服务器。
- 仅申请两个必要权限：
storage（用于同步设置）和clipboardWrite（用于复制内容到剪贴板）。 - 隐私声明已准备就绪，随时可以提交给 Edge/Chrome 应用商店审核。
📌 项目地址
GitHub: https://github.com/liguojing112/clipboard-manager
欢迎 Star、Fork、提 Issue 或 PR！如果你也有类似的效率工具想法，欢迎来交流。
💡 后续计划
- [ ] 上架 Microsoft Edge Add-ons 和 Chrome 网上应用店(目前正在向微软申请)，让更多人方便安装。
- [ ] 增加“云同步”选项（端到端加密，作为可选的增值服务）。
- [ ] 支持图片、文件等更多格式的剪贴板历史（可能会做成独立应用）。
- [ ] 提供常用代码片段的模板库，一键导入（社区驱动）。
🤝 欢迎交流
我是软件工程 + AI 专业的一名学生，热爱捣鼓提升效率的工具。如果你也对开发者工具、本地优先应用感兴趣，欢迎在评论区留言或到 GitHub 上找我。希望这个小工具能帮你从重复劳动中解放出来，专注于真正有创造力的工作。
Happy coding! 🚀
8
