Nexus

一款面向前端开发者的浏览器扩展工具集，基于 WXT + React 19 + shadcn/ui 构建。

---

关于本项目

本项目的所有代码（包括 UI、业务逻辑、测试用例、文档）均由 AI 自动生成，未经过人手逐行编写。

• AI 工具：Claude Code（Anthropic 官方 CLI）
• 所用模型：deepseek-v4-pro
• 参考项目：fehelper

由于是 AI 全自动产出，代码可能存在细节问题，欢迎提 Issue 或 PR 一起完善。

---

功能一览

Nexus 把日常高频的编码、格式化、调试操作集中到一个工具市场中，现已内置 10 个工具：

工具	说明
JSON 格式化	格式化 / 压缩 / 键排序 / JSONPath 查询 / 表格视图
信息编解码	Unicode / URL / Base64 / MD5 / SHA1 / JWT / Gzip 等 20+ 种
颜色转换	HEX / RGB / HSL / HSV 四种格式实时互转
对比工具	JSON Diff / 文本 Diff / 代码 Diff（8 种语法高亮）
开发者工具	内置 IDE，可编写自己的工具并自动接入 popup / 右键菜单
扫码解码	二维码生成（多行 / Logo）/ 解码 / 6 种条形码生成
TS 类型生成	粘贴 JSON 一键生成 TypeScript 接口定义
时间戳转换	当前时间戳 / 任意时间 ↔ 时间戳双向转换
网页油猴	兼容 Tampermonkey 的 .user.js 编写与运行环境
Mock 数据生成	17 种字段类型，批量生成中文语境的模拟数据

其中「扫码解码 / TS 类型生成 / 时间戳转换 / 网页油猴 / Mock 数据生成」默认未启用，需到「工具市场」安装后才会出现在 popup 中。

---

技术栈

• WXT：下一代 Web 扩展开发框架
• React 19 + TypeScript（严格模式）
• shadcn/ui + Tailwind CSS：UI 组件与样式
• CodeMirror 6：JSON / 文本 / 代码编辑器
• Vitest：单元测试

---

快速开始

# 安装依赖
pnpm install

# Chrome 开发模式（自动 watch）
pnpm dev:chrome

# Firefox 开发模式
pnpm dev:firefox

# 构建发布包
pnpm build:chrome
pnpm build:firefox

# 打包成 zip（同时输出 Chrome / Firefox 两个 zip）
pnpm zip:all

---

测试

# 监听模式
pnpm test

# 单次跑
pnpm test:run

# 覆盖率报告
pnpm test:coverage

测试文件放在 __tests__/ 目录下，结构与 src/ 一一对应。

---

项目结构

Nexus/
├── src/
│   ├── entrypoints/      # WXT 自动识别的入口（background / popup / options / 各工具页）
│   ├── components/       # 共享 UI 组件（shadcn/ui + 业务组件）
│   ├── hooks/            # React Hooks
│   ├── lib/              # 纯函数 / 核心算法（颜色、编解码、JSON 等）
│   └── styles/           # 全局样式
├── public/               # 静态资源
├── __tests__/            # 单元测试
├── docs/                 # 详细文档
└── wxt.config.ts         # WXT 配置

---

新增内置工具

1. 在 src/entrypoints/<tool-id>/ 下创建 App.tsx 等入口文件
2. 在 src/lib/tools.ts 的 TOOLS 数组里追加元数据
3. 同步更新本 README.md

---

权限说明

仅申请最小必要权限：

• tabs / storage / contextMenus / scripting
• webNavigation（网页油猴使用）
• host_permissions（http://*/* / https://*/* / file://*/*）

所有功能均在本地完成，不会上传任何数据到外部服务。

---

License

MIT