前言

……因为自己的需求，所以做了一下表情包插件

仓库

哦，对了，还做了 market 环节
……但是我是一个很 lazy 的人，丢一下 AIGC 的介绍内容？

Bug-v3 表情扩展功能文档

项目概述

Bug-v3 是一个现代化的浏览器表情管理扩展，基于 Vue 3 + TypeScript + Vite 构建，提供强大的表情包管理、AI 智能功能和云端同步能力。

核心功能架构

1. 存储系统

多层渐进式存储架构

本地存储 (0ms 延迟) - 即时访问
会话存储 (100ms 延迟) - 会话级缓存
扩展存储 (500ms 延迟) - Chrome API 存储
IndexedDB (1000ms 延迟) - 持久化回退

存储特性

基于时间戳的冲突解决（新数据优先）
分组独立存储（替代单体存储）
跨上下文实时同步
队列化存储操作确保顺序执行

2. 状态管理

Pinia Store 架构

useEmojiStore - 主要状态管理，处理表情分组、设置、收藏
useGroupStore - 分组管理（创建、编辑、删除、排序）
useEmojiCrudStore - 表情 CRUD 操作
useFavoritesStore - 收藏管理
useTagStore - 标签系统
useSyncStore - 云端同步
useSearchIndexStore - 搜索索引优化
useTagCountStore - 标签计数

核心状态

interface EmojiStoreState {
  groups: EmojiGroup[]; // 表情分组
  archivedGroups: EmojiGroup[]; // 已归档分组
  settings: AppSettings; // 应用设置
  favorites: Set<string>; // 收藏表情 ID
  activeGroupId: string; // 当前活动分组
  searchQuery: string; // 搜索查询
  selectedTags: string[]; // 选中的标签
  isLoading: boolean; // 加载状态
  isSaving: boolean; // 保存状态
  isReadOnlyMode: boolean; // 只读模式
}

3. 用户界面组件

Popup.vue - 主弹出窗口
GroupTabs.vue - 分组标签切换
LazyEmojiGrid.vue - 虚拟化表情网格
usePopup.ts - Popup 逻辑管理

Options 界面 (src/options/)

Options.vue - 设置管理界面
分组管理 - 表情分组创建、编辑、排序
表情导入 - 支持多种导入方式
同步设置 - 云端同步配置
AI 功能 - 批量重命名、智能标签

Content Scripts (src/content/)

content.ts - 内容脚本入口
平台适配 - 支持 Discourse、Bilibili、X、Reddit 等
表情注入 - 在网页中插入表情选择器
CSRF 处理 - 安全令牌管理

4. AI 智能功能

Gemini API 集成 (src/utils/geminiService.ts)

图片分析 - 自动识别表情内容
智能命名 - 生成描述性表情名称
批量重命名 - AI 批量处理表情命名
标签生成 - 自动提取相关标签

感知哈希服务 (src/utils/optimizedHashService.ts)

重复检测 - 基于感知哈希的相似表情检测
图片缓存 - 优化哈希计算性能
批量处理 - 支持大规模表情集合处理
WebAssembly - 使用 WASM 提升计算速度

5. 云端同步系统

同步目标 (src/utils/syncTargets.ts)

Cloudflare - 主要同步服务
WebDAV - 支持 Nextcloud、ownCloud
S3 兼容 - AWS S3、MinIO、Backblaze B2

同步服务 (src/utils/cloudflareSync.ts)

双向同步 - 推送/拉取/双向同步
增量同步 - 只同步变更数据
冲突解决 - 基于时间戳的自动冲突处理
进度跟踪 - 详细的同步进度反馈

6. 平台集成

支持平台

Discourse 论坛 - linux.do 等社区
Bilibili - 视频评论表情
X (Twitter) - 推文表情
Reddit - 帖子评论表情
Pixiv - 插画评论表情

平台特性

自动检测 - 智能识别网站类型
编辑器集成 - 无缝插入表情
快捷键支持 - 键盘快捷操作
响应式设计 - 移动端适配

7. 性能优化

虚拟化渲染

懒加载 - 按需加载表情图片
虚拟滚动 - 大量表情的高效渲染
图片优化 - AVIF 格式支持
缓存策略 - 多层缓存机制

构建优化

代码分割 - 按需加载模块
Tree Shaking - 移除未使用代码
压缩优化 - 多种构建配置
Bundle 分析 - 包大小优化

8. 数据管理

导入导出

配置导出 - 完整配置备份
批量导入 - 支持多种格式
增量同步 - 选择性数据同步
版本兼容 - 向后兼容支持

数据格式

interface Emoji {
  id: string; // 唯一标识
  name: string; // 表情名称
  url: string; // 图片 URL
  displayUrl?: string; // 显示 URL
  tags?: string[]; // 标签数组
  perceptualHash?: string; // 感知哈希
  groupId: string; // 所属分组
  packet: number; // 时间戳
}

interface EmojiGroup {
  id: string; // 分组 ID
  name: string; // 分组名称
  icon?: string; // 分组图标
  detail?: string; // 分组描述
  emojis: Emoji[]; // 表情列表
  order: number; // 排序序号
}

9. 安全特性

数据保护

输入验证 - 严格的数据验证
XSS 防护 - DOMPurify 清理
CSRF 保护 - 令牌验证
安全存储 - 加密敏感数据

权限管理

最小权限 - 只请求必要权限
权限说明 - 详细的权限文档
用户控制 - 细粒度权限设置

10. 开发工具

构建系统

Vite - 快速构建工具
TypeScript - 类型安全
ESLint - 代码质量检查
Prettier - 代码格式化

测试框架

Playwright - 端到端测试
扩展测试 - 专门的扩展测试配置
调试工具 - 开发者工具集成

技术栈

前端框架

Vue 3 - 组合式 API
TypeScript - 类型安全
Vite - 构建工具
Pinia - 状态管理

UI 组件

Ant Design Vue - UI 组件库
Tailwind CSS - 样式框架
Vue Router - 路由管理

工具库

Dexie - IndexedDB 封装
DOMPurify - XSS 防护
nanoid - ID 生成
marked - Markdown 解析

扩展 API

Chrome Extensions API - 扩展核心
Storage API - 数据存储
Runtime API - 消息通信
Tabs API - 标签页管理

配置选项

应用设置

interface AppSettings {
  defaultGroup: string; // 默认分组
  gridColumns: number; // 网格列数
  showSearchBar: boolean; // 显示搜索栏
  useIndexedDBForImages: boolean; // 使用 IndexedDB
  customPrimaryColor: string; // 自定义主题色
  syncConfig: SyncTargetConfig; // 同步配置
  geminiConfig: GeminiConfig; // AI 配置
}

同步配置

interface SyncTargetConfig {
  type: "cloudflare" | "webdav" | "s3";
  enabled: boolean;
  url: string;
  authToken: string;
  authTokenReadonly?: string;
}

AI 配置

interface GeminiConfig {
  apiKey: string;
  model?: string;
  language?: string;
  useCustomOpenAI?: boolean;
  customOpenAIEndpoint?: string;
  customOpenAIKey?: string;
  customOpenAIModel?: string;
}

stevessr / Bug-v3 表情包插件开发浅记 (Vue3/Vite/AI)

前言

Bug-v3 表情扩展功能文档

项目概述

核心功能架构

1. 存储系统

多层渐进式存储架构

存储特性

2. 状态管理

Pinia Store 架构

核心状态

3. 用户界面组件

Popup 界面 (src/popup/)

Options 界面 (src/options/)

Content Scripts (src/content/)

4. AI 智能功能

Gemini API 集成 (src/utils/geminiService.ts)

感知哈希服务 (src/utils/optimizedHashService.ts)

5. 云端同步系统

同步目标 (src/utils/syncTargets.ts)

同步服务 (src/utils/cloudflareSync.ts)

6. 平台集成

支持平台

平台特性

7. 性能优化

虚拟化渲染

构建优化

8. 数据管理

导入导出

数据格式

9. 安全特性

数据保护

权限管理

10. 开发工具

构建系统

测试框架

技术栈

前端框架

UI 组件

工具库

扩展 API

配置选项

应用设置

同步配置

AI 配置

部署和发布

构建配置

发布流程

扩展性设计

插件架构

API 设计

Contact & Info