开发与构建
🚀 开发与构建
开发模式
bash
# 仅运行 Vite 开发服务器
pnpm dev # 支持实时重载与 HMR 热更新
# WXT 开发模式（推荐）
pnpm wxt:dev # 支持实时重载与 HMR 热更新
# Plasmo 开发模式（可选）
pnpm plasmo:dev构建生产版本
WXT 方式（推荐）
bash
# 构建生产版本的扩展包
pnpm wxt:build
# 生成发布包（ZIP 格式）
pnpm wxt:zip构建完成后，扩展包将生成在 .output/ 目录中。
Plasmo 方式（可选）
bash
# 构建生产版本的扩展包
pnpm plasmo:build
# 生成发布包（ZIP 格式）
pnpm plasmo:build -- --zip构建完成后，扩展包将生成在 build/ 目录中。
代码质量
bash
# 使用 Prettier 格式化代码
pnpm format
# 检查代码格式
pnpm format:check项目结构
├── assets/ # 静态资源文件
├── scripts/ # 辅助脚本
├── src/ # 源代码目录
│ ├── api/ # API 相关代码
│ ├── assets/ # 源代码静态资源
│ ├── background/ # 后台脚本
│ │ └── modules/ # 后台脚本模块
│ ├── components/ # 通用组件
│ ├── config/ # 配置文件
│ ├── content/ # 内容脚本
│ ├── entrypoints/ # WXT 入口点（推荐）
│ ├── locales/ # 国际化资源
│ │ ├── en/ # 英文
│ │ ├── zh/ # 中文简体
│ │ └── zh-TW/ # 中文繁体
│ ├── options/ # 选项页面
│ ├── router/ # 路由配置
│ ├── sidepanel/ # 侧边栏组件
│ ├── stores/ # 状态管理
│ ├── styles/ # 全局样式
│ ├── views/ # Vue 页面视图
│ │ ├── components/ # 页面组件
│ │ ├── data/ # 数据文件
│ │ └── modules/ # 页面模块
│ ├── App.vue # Vue 主应用
│ └── main.tsx # 应用入口
├── index.html # 主 HTML 模板
├── package.json # 项目配置
├── plasmo.json # Plasmo 配置文件（可选）
├── tsconfig.json # TypeScript 配置
├── tsconfig.node.json # Node.js TypeScript 配置
├── vite.config.ts # Vite 配置
└── wxt.config.ts # WXT 配置文件（推荐）