从 0 到 1 开发梦精灵提示词管理器：我的全栈开发实战记录​

作为一名每天与多个 AI 平台打交道的程序员，被混乱的提示词管理折磨许久后，我决定开发一款专属的浏览器插件 —— 梦精灵提示词管理器。历时两个多月，基于 Golang、Vue3 和 WXT 框架完成了从后端到前端再到浏览器插件的全栈开发。本文将毫无保留地分享技术实现细节与踩坑经验，希望能为同行提供参考。

一、技术栈选型：为何选择这些工具？

（一）后端 API：Golang+HotGo 框架的高效组合

选择 Golang 主要基于三点考虑：

1. 高性能：原生协程模型非常适合处理高频 API 请求

2. 开发效率：HotGo 框架（基于 GoFrame）提供了完整的企业级开发解决方案，内置 ORM、缓存、JWT 认证等常用组件

3. 生态成熟：丰富的中间件支持（如 CORS、限流、日志），开箱即用的代码生成工具节省 30% 以上开发时间

4. hotgo 的 addons 设计模式，很方便的在不改变框架核心的基础上，扩展自己的业务逻辑，如开发一个小程序 app 的接口模块

实际开发中，HotGo 的代码生成器帮了大忙。管理后台可以直接通过代码生成工具来生成逻辑和界面，后端的增删改查，没什么特殊要求，基本可以不用改。例如后台的提示词管理模块，从创建数据库表到前后端联调，很快就完成基础功能开发。

（二）后台管理界面：Vue3+Naive UI 的极简实践

后台界面也是找了是用 Naive-ui 开发的框架，正好 hotgo 就是：

• 响应式设计：组合式 API 更适合复杂状态管理

• 性能优势：相比 Vue2，编译速度提升 40%，打包体积减少 25%

Naive UI 的选择则是因为：

1. 极简风格：符合工具类产品的设计定位，组件样式可定制性强

2. 轻量高效：不含任何第三方依赖，运行时性能优异

3. 完整文档：对 Vue3 组合式 API 的支持非常友好，开发过程中几乎零障碍

（三）浏览器插件：WXT 框架的跨浏览器解决方案

在插件开发选型时，WXT 框架的优势脱颖而出：

• 统一 API：支持 Chrome、Edge、Firefox 等主流浏览器，一次开发多端运行

• 现代技术栈：基于 TypeScript 和 Web Extensions API 标准，支持 ES6 + 特性

• 高效调试：内置的热更新功能，修改代码后无需重新加载插件

实际使用中发现，WXT 对浏览器存储 API（如 chrome.storage）的封装非常实用，通过统一的 Storage 类，轻松实现不同存储区域（local、sync、managed）的读写操作，兼容各浏览器的差异。 再配合 naive-ui 来开发弹窗等管理界面，真的是太方便了。

二、核心功能实现：从需求到代码的落地

（一）私有提示词管理：数据安全的三重保障

1. 传输层加密：全站启用 HTTPS，API 接口使用 JWT 认证，每次请求携带签名令牌

1. 提示词隐私：提示词内容查询只能根据当前登录用户来查询

1. 访问控制：每个用户只能操作自己的提示词和分类

（二）跨平台管理：统一数据模型的设计

为支持多 AI 平台，设计了统一的提示词数据结构：

// 前端数据模型interface Prompt {    id: number;    platform: 'jimeng' | 'vidu' | 'keling' | 'duiyou' | 'tongyi'; // 支持的平台列表    content: string;    tags: string[]; // 标签分类    createTime: Date;    updateTime: Date;}

后端 API 通过 platform 参数区分不同平台，在浏览器插件中实现平台识别逻辑：

// 插件中自动识别当前平台function detectPlatform(url: string): string | null {    const platformMap = {        'jimeng.com': 'jimeng',        'vidu.ai': 'vidu',        // 其他平台映射...    };    return platformMap[new URL(url).hostname] || null;}

（三）全场景操作：浏览器插件的核心能力

1. 一键收藏功能：通过监听浏览器动作，在支持的平台页面注入收藏按钮，调用 WXT 的 tabs API 获取当前页面信息

// 注入收藏按钮    // 检查是否已经插入过    if (!document?.querySelector("#dreamelf-top-btn")) {      // 创建一个新的div元素      const newDiv = document.createElement("div");      // console.log("elementselementselementselements", elements);      newDiv.innerHTML = await dreamelfTopBtnElement("one");      newDiv.className = "dreamelf-top-btn-lay-container";      newDiv.addEventListener("click", () => {        // 点击后显示我的记录弹窗        showMyRecordDialog.value = true;      });
      // 追加此按钮前，先移除界面已有的按钮，保证界面只有一个按钮      document.querySelector("#dreamelf-top-btn")?.remove();
      // 插入到第一个元素位置       targetContainer?.insertBefore(newDiv, targetContainer.firstChild);          }

1. 右键保存功能：监听 contextMenu 事件，获取选中的文本内容

// 注册右键菜单broswer.contextMenus.create({    id: 'save-selected-text',    title: '保存到梦精灵',    contexts: ['selection']});broswer.contextMenus.onClicked.addListener((info) => {    if (info.selectionText) {        broswer.runtime.sendMessage({             action: 'savePrompt',             prompt: { content: info.selectionText, platform: detectCurrentPlatform() }         });    }});

（四）游戏化设计：等级系统的实现

1. 后端逻辑：在用户表中增加 power（灵力值）和 level（等级）字段，每次收藏提示词时触发更新（大概示例）

-- 数据库表结构CREATE TABLE user (    id INT PRIMARY KEY AUTO_INCREMENT,    power INT DEFAULT 0,    level INT DEFAULT 1,    -- 其他字段...);-- 更新语句UPDATE user SET power = power + 1 WHERE id = ?;

1. 前端展示：在 Naive UI 的卡片组件中显示等级信息（大概示例）

<template>    <n-card>        <h3>精灵名称：{{ user.name}}</h3>         <p>等级：LV{{ user.id}}  {{ user.levelname }}</p>    </n-card></template><script setup>const { user } = useStore();</script>

三、开发中的挑战与解决方案

（一）前后端联调效率

HotGo 框架自带的 Swagger 文档解决了大部分联调问题，但在处理文件上传（如提示词截图）时遇到格式不一致问题。通过统一使用 FormData 格式传输，后端使用 multipart 包解析，前端通过 Naive UI 的 Upload 组件封装上传逻辑，最终实现全平台一致的文件处理方案。还有一种是生成 base64 字符串到后台转为图片存储。

（二）插件各个 ai 工具平台里插入操作按钮优化

每个平台的样式会随着 ai 工具平台的更新而产生变化，这时候就需要动态来获取按钮需要插入的位置。

四、开发环境配置：提升效率的工具链

（一）VSCode 配置

1. 安装 Trae（原 MarsCode）插件，实现 HotGo 框架的代码片段自动补全

2. 使用 ai 编程插件的自动补全功能，按 tab 键能够自动补全一些代码逻辑

（二）调试工具

• 后端：调试器配合 HotGo 的日志输出，精准定位 API 逻辑问题

• 前端：使用浏览器自带的开发审查调试

• 插件：浏览器开发者工具的 Extension 面板，实时查看插件后台页面日志

五、总结与展望

两个多月的开发过程中，最大的收获是全栈开发能力的提升，尤其是不同技术栈之间的协作与数据流转。梦精灵提示词管理器目前已实现核心功能，但还有优化空间：

1. 下一步计划支持更多 AI 平台

2. 开发小程序，支持用户在手机里查看自己收藏的提示词

3. 引入 AI 推荐算法，根据使用习惯推荐优质提示词

4. 开发网页版管理后台，更加方便用户统一管理

如果你对某个技术细节感兴趣，或在类似开发中遇到问题，欢迎在评论区留言交流。完整的技术文档和开源计划正在筹备中，后续将逐步开放部分核心代码。希望这篇实战记录能为你的全栈开发之旅提供一些启发，让我们在工具开发的道路上共同进步！