一个安全、私密、极速的本地开发者工具箱。无需上传数据，100% 浏览器端本地计算。
简体中文 | English
- 🔒 100% 隐私安全 (Privacy First)：所有文本比对、JSON 格式化、密码生成和数据编解码均在 浏览器本地 (Client-Side) 完成，绝不向任何外部服务器上传敏感数据（如 API 密钥、JWT 凭证、数据库密码等）。
- 🧩 高隐私浏览器扩展 (Privacy-First Browser Extension)：
- 不申请高危权限：扩展不申请任何主机访问（Host Permissions）权限，绝不读取、不嗅探、不修改您所浏览的任何网页内容，彻底杜绝插件劫持或敏感凭证泄露风险。
- 完全离线运行：将完整的计算逻辑与静态资源打包在扩展内，零网络请求、零数据上传。
- 多浏览器兼容：一套代码原生适配 Chrome、Edge 和 Firefox。
- 🎨 极致交互体验 (Modern UI/UX)：
- 基于 React 19 + TailwindCSS 4.0 打造的现代流线型界面。
- 支持 明暗主题 (Dark/Light Mode) 切换。
- 集成专业级 CodeMirror 编辑器，支持语法高亮和实时错误校验。
- 🔎 快速发现工具：支持按名称或关键词搜索、分类筛选、收藏和最近使用；偏好仅保存在浏览器本地。
- 🚀 零配置部署 (Serverless Friendly)：原生适配 Cloudflare Workers/Pages 边缘运行环境，预置 GitHub Actions 持续集成工作流。
您可以通过以下两种方式使用本工具箱：
-
🌐 在线网页版：
- 直接访问官方托管地址：https://tools.xcloudapi.com/
- 同样享有 100% 本地计算与隐私保护，页面一旦加载完成，即使断网也能继续使用。
-
🧩 浏览器扩展插件：
- 离线包形式运行，更安全、更快速。
- 拥有独立的 Popup 快捷面板入口，支持点击浏览器图标一键唤起。
- 支持 Chrome、Edge、Firefox 等主流浏览器（本地安装与打包方法请参见下文 🧩 浏览器扩展）。
- 双栏实时对比两段文本的差异。
- 高亮标识“新增（Green）”、“删除（Red）”和“修改（Yellow）”。
- 支持一键左右双向合并，轻松打补丁或复制结果。
- 基于 CodeMirror 提供行号、高亮和括号匹配。
- 支持一键美化（Format）与一键压缩（Minify）。
- 实时校验 JSON 语法，精准定位错误行数与原因。
- 针对 JSON 结构的深度对比。
- 对象路径对齐：自动忽略 JSON 键（Keys）的顺序差异，只比对具体值的变更。
- 强随机性字符生成。
- 可控参数：密码长度（1-256 位）、生成数量（1-1000 个）和字符集选择。
- 支持一键批量生成与安全复制。
| 类别 (Category) | 支持的方法 (Methods) | 说明 (Description) |
|---|---|---|
| 编码与加密 | Unicode / URL / UTF-16 编码 | 快速转义特殊字符与控制字符 |
| Base64 / Hex 编码 | 将文本转换成常用的二进制字符串表示 | |
| MD5 / SHA-1 / Gzip 压缩 | 计算本地文件或文本的哈希摘要，或压缩输出 Base64 | |
| HTML 实体 / 字符串转义 | 逃逸特殊字符，防止前端 XSS 攻击或生成代码字符串 | |
| 解码与解析 | Unicode / URL / UTF-16 解码 | 还原转义字符 |
| Base64 / Hex 解码 | 还原字节流为可读 UTF-8 文本 | |
| JWT 免签解析 | 快速解析 JSON Web Token (JWT) 的 Header 与 Payload | |
| URL 参数解析 / Cookie 格式化 | 将复杂的 URL Query 或 Cookie 字符串提取为排版后的键值对 | |
| Gzip 解压 | 还原压缩后的 Base64 文本数据 | |
| Proto Hex 解析 | 亮点功能！ 直接将 Protobuf 的 Hex 十六进制原始数据解析为结构化 JSON 树 |
- 批量生成 UUID v4、UUID v7、ULID 和 URL 安全随机 Token。
- 使用浏览器安全随机数，支持一键复制单项或全部结果。
- 计算文本或本地文件的 SHA-256、SHA-512 摘要。
- 支持使用用户输入密钥计算 HMAC，内容不会离开浏览器。
- 自动识别秒/毫秒 Unix 时间戳，并按常用时区显示。
- 解析标准 5 字段 Cron 表达式，列出后续执行时间。
- 实时展示匹配位置、捕获组、命名组和替换预览。
- 支持
g、i、m、s、uFlags。
- JSON 与 YAML 双向转换。
- 对 JSON 输入执行 JSONPath 查询并输出结构化结果。
- 应用框架: React 19 + TypeScript
- 构建工具: Vite 8 + Vinext (用于高性能多页边缘渲染)
- 样式引擎: TailwindCSS 4.0
- 核心组件:
- @uiw/react-codemirror - 集成专业代码编辑。
- @noble/hashes - 纯 JS 实现的加密哈希库.
- yaml / JSONPath Plus - 本地数据转换与查询。
- lucide-react - 现代化图标包。
- Node.js
>=22.15.0 - npm
>=10.0.0
- 克隆并进入项目目录：
git clone https://github.com/guanyang/dev-tools-box.git cd dev-tools-box - 安装依赖：
npm install
- 启动开发服务器：
启动后打开浏览器访问
npm run dev
http://localhost:3000。
- 运行完整测试套件（单元测试与 E2E 渲染测试）：
npm test - 构建 Web 生产包:
npm run build
本项目支持在 Chrome、Edge 和 Firefox 浏览器中作为离线扩展运行。
无需安装 Node.js 或执行任何编译命令，即可直接加载使用：
- 打开 GitHub Releases 页面，下载对应浏览器的最新版压缩包（例如：
dev-tools-box-chrome-v1.0.0.zip）。 - 将下载的 ZIP 压缩包解压到一个固定的本地文件夹中。
- 根据下文的 ⚙️ 浏览器加载指南 在浏览器中载入该解压后的文件夹即可。
如果您需要修改或二次开发扩展代码：
# 本地开发与实时调试 (以 Chrome 为例)
npm run extension:dev
# 编译生成生产包 (输出至 dist-extension/<browser>/ 目录)
npm run extension:build
# 编译并打包为版本化 ZIP (输出至 artifacts/ 目录)
npm run extension:package- Chrome / Edge:
- 打开地址栏输入
chrome://extensions/(或edge://extensions/)。 - 在右上角开启 开发者模式 (Developer Mode)。
- 点击 加载已解压的扩展程序 (Load unpacked)。
- 选择您解压出来的文件夹（如果是开发者，则选择项目目录下的
dist-extension/chrome或dist-extension/edge）。
- 打开地址栏输入
- Firefox:
- 临时安装（重启浏览器后失效）:
- 打开地址栏输入
about:debugging#/runtime/this-firefox。 - 点击 临时载入附加组件 (Load Temporary Add-on)。
- 选择解压文件夹下的
manifest.json文件（如果是开发者，则选择项目目录下的dist-extension/firefox/manifest.json）。
- 打开地址栏输入
- 永久安装（重启不失效，推荐普通用户）:
由于 Firefox 的安全策略，普通正式版 Firefox 不允许直接永久载入本地未签名的扩展。若需永久安装，可采用以下方法之一：
- 方法 1：自签名扩展包 (适用于所有 Firefox 版本)
- 将打包好的
.zip文件上传至 Firefox 附加组件开发者中心 (AMO)。 - 在发布选项中选择 “不在此网站上发布”（On your own / Unlisted）（仅用于自用签名，无需公开审核）。
- 提交后系统会在几分钟内完成自动安全扫描并完成签名。
- 下载签名后的
.xpi安装包文件，将其拖入 Firefox 的about:addons(扩展管理) 页面即可永久安装。
- 将打包好的
- 方法 2：使用 Firefox 开发者版 / Nightly / ESR 版本
- 打开地址栏输入
about:config并回车。 - 搜索
xpinstall.signatures.required并将其值双击修改为false。 - 打开
about:addons页面，点击右上角齿轮图标选择“从文件安装附加组件”，导入生成的扩展.zip或.xpi文件即可永久运行。
- 打开地址栏输入
- 方法 1：自签名扩展包 (适用于所有 Firefox 版本)
- 临时安装（重启浏览器后失效）:
项目已集成对 Cloudflare Workers (Wrangler) 的原生支持，并配置了自动化 CI/CD：
- 每次将代码推送到
main分支时，.github/workflows/deploy-cloudflare.yml都会自动编译并运行测试。 - 智能增量部署：工作流会在构建后计算
dist/目录的 Hash 值。只有在构建产物发生变化时，才会执行实际的部署操作，节省构建资源。 - 发布 Release 时强制部署：当发布新 Release 时，工作流会绕过 Hash 校验，强制把当前 Release 版本的构建产物发布到 Cloudflare。
请在您的 GitHub 仓库 Settings -> Secrets and variables -> Actions 下配置以下 Secrets：
CLOUDFLARE_API_TOKEN：具有 Workers 管理权限 of Cloudflare API 令牌。CLOUDFLARE_ACCOUNT_ID：您的 Cloudflare 账户 ID。
项目提供了便捷的一键式 Tag 与 Release 管理流程：
- 确保在
CHANGELOG.md中记录了待发布的版本信息（例如## [v1.0.0] - 2026-07-11）。 - 在终端运行本地发布脚本：
./scripts/release.sh 1.0.0
- 脚本会自动进行 Git 工作区安全检查，确认版本号，打上版本 Tag，并将其推送到 GitHub。
- GitHub 上的
.github/workflows/release.yml收到 Tag 推送后，会自动执行：- 提取
CHANGELOG.md中对应版本的日志内容。 - 自动编译 Chrome、Edge、Firefox 扩展，并将其打包成
.zip包。 - 自动创建一个对应的 GitHub Release，并将扩展包
.zip作为 Assets 附件上传。
- 提取
本项目采用 MIT License 协议开源。