作为一名后端 / 全栈开发者，你的浏览器是不是常年开着十几个在线工具页？JSON 格式化器、AES 加解密、时间戳转换、Cron 表达式校验、UUID 生成、二维码解析……每找一个工具，就是一次跳转、一次广告加载、一次「这个网站能跑吗」的赌注。

今天推荐一款开源的 Chrome 扩展 —— DevTools Box（JSON 格式化与加解密工具），它把 12 个高频开发工具整合到一个 800×950 的独立窗口里，原生 ES Modules 实现，无需打包，离线可用。

---

github地址: https://github.com/Johny-Lee/crx-dev-tools.git

🎯 为什么你需要它

先看一张「工具集」全景图，左边一栏就是这个扩展的全部能力：

模块	解决了什么痛点
JSON 格式化	粘贴带注释、尾逗号、转义符的脏 JSON 也能解析；树形视图支持点击复制
加密 / 解密	AES / RSA / PBE / MD5 / SHA256 / Base64 一应俱全，长文本 RSA 自动分段
二维码解析	图片上传 / 拖拽 / Ctrl+V 粘贴，三种方式都能识别
URL 编解码	encodeURIComponent 一键搞定
时间戳转换	毫秒 ↔ 格式化时间，5 种格式 + 多时区 + 时间计算器
Cron 表达式	Quartz 7 字段可视化编辑 + 最近 N 次执行预览
单位转换	存储空间 B~PB、时间 ms~年 互转
小工具	UUID、字符串长度统计、正则测试、2~58 进制互转
MCP 调试	JSON-RPC 2.0 协议调试，HTTP/SSE + Native Messaging 双传输

听起来像是「又一个 JSON 工具」？往下看，它的细节会改变你的看法。

---

✨ 值得推荐的几个亮点设计

1. 容错的 JSON 解析器 —— 真实场景友好

日常我们从日志、从别人粘贴的代码里复制 JSON，经常会遇到：

• 尾部多了个逗号 {"a":1,} → 标准 JSON.parse 直接报错
• 字符串里嵌着转义符 {\"a\":1} → 报错
• 带注释 // 这是个字段 → 报错

DevTools Box 的 json-formatter.js 用了一个两阶段容错策略：

// 第一阶段：去注释 + 修复尾逗号
let content = stripJsonComments(rawInput);
content = fixTrailingCommas(content);

// 第二阶段：解析失败时，自动尝试去一层转义再解析
try {
  finalData = JSON.parse(content);
} catch (e1) {
  const unescaped = simpleUnescape(content);
  finalData = JSON.parse(fixTrailingCommas(unescaped));
}

其中 fixTrailingCommas 用一个带字符串保护的正则，只替换结构上的 ,}/,]，绝不动字符串内部的逗号：

const regex = /("(\\[\s\S]|[^"\\])*"|'(\\[\s\S]|[^'\\])*')|,\s*([\]}])/g;

💡 这种「先尝试完美解析，失败再降级容错」的设计，比一上来就降级更稳，避免了误伤合法 JSON。

2. 树形视图的交互细节

• 点击 Object / Array 徽章 → 查看完整节点内容
• 点击任意值 → 一键复制到剪贴板
• 嵌套 JSON 字符串（值是 JSON 的字符串）→ 可点击自动展开
• 时间戳数字、图片 base64 也能被智能识别

3. 加解密：覆盖 Java 生态常见算法

除了常规的 AES / RSA / MD5 / SHA256，它还支持 PBEWithMD5AndDES —— 这是 Java javax.crypto 生态里的经典算法，做后端联调时经常需要复现。

更贴心的是 RSA 长文本自动分段加密：

// 根据 RSA 密钥位数动态计算最大加密字节数
// 1024 bit -> 117 bytes；2048 bit -> 245 bytes
const maxByteLength = (keyBitLength / 8) - 11;

// 用 Blob 计算真实 UTF-8 字节数，避免中文超出限制
while (new Blob([tempStr]).size > maxByteLength) {
  splitIndex--;
  tempStr = buffer.substring(0, splitIndex);
}

这个细节很关键 —— 简单地按 string.length 截断会在中文场景下踩坑（一个中文字符 UTF-8 占 3 字节）。用 Blob.size 计算真实字节数，是工程上稳妥的做法。

4. Cron 表达式：Quartz 7 字段 + 互斥校验

写定时任务最痛的不是写表达式，而是「写了不知道对不对」。DevTools Box 做了三件事：

1. 可视化字段编辑：秒/分/时/日/月/星期/年，逐字段校验输入字符
2. 日/星期互斥提示：Quartz 规范里这两个字段至少一个为 ?，违反会标红
3. 最近 N 次执行预览：填几就显示几次，所见即所得

5. MCP 调试器 —— 隐藏的宝藏模块

随着 MCP（Model Context Protocol）协议火热，调试 MCP Server 成了新需求。这个扩展内置了一个相当完整的 MCP 调试器：

• 双传输：HTTP/SSE（无状态短连接）+ Native Messaging（Chrome 原生消息）
• 协议预设：initialize / tools/list / tools/call / resources/read / ping 等方法一键填充参数
• 自动识别工具参数：粘贴 tools/list 返回的定义，自动构造调用模板
• SSE 流式解析 + 会话 ID 自动管理
• 请求历史回填 + 响应树形/原始双视图

如果你正在做 LLM Agent 或 MCP Server 开发，这个模块单独拎出来都能做一个产品。

---

🏗️ 技术栈与工程亮点

维度	选择	评价
扩展规范	Manifest V3	拥抱最新规范，Service Worker 架构
模块系统	原生 ES Modules	无需 Webpack/Vite，源码即产物，可读性极高
加密	CryptoJS + JSEncrypt	成熟稳定，覆盖对称/非对称/摘要
二维码	BarcodeDetector API + jsQR	渐进增强 —— 优先用浏览器原生能力，降级到 JS 库
部署	完全离线	所有依赖本地化，断网也能用

代码组织也很清爽，popup.js 作为主入口，每个功能一个独立模块文件，单一职责：

// popup.js — 干净的模块装配
import { initJsonFormatter } from './modules/json-formatter.js';
import { initEncryption } from './modules/encryption.js';
import { initMcpDebugger } from './modules/mcp-debugger.js';
// ... 12 个模块各司其职

这种「无打包 + ES Modules」的架构，特别适合工具类扩展 —— 调试时改完即生效，没有构建等待。

---

📦 三分钟上手

1. 克隆仓库到本地
2. 打开 Chrome，访问 chrome://extensions/
3. 右上角开启 开发者模式
4. 点击 「加载已解压的扩展程序」，选择项目根目录
5. 点击工具栏图标，独立窗口弹出，开始使用

全程无需 npm install，无需构建，因为依赖都已本地化。

---

🧭 适用人群

• 后端开发者：联调加密接口、看时间戳、写 Cron —— 高频刚需
• 前端开发者：解析嵌套 JSON、生成 UUID、测正则、URL 编解码
• 数据/算法工程师：Cron 调度配置、单位换算
• LLM 应用开发者：MCP 协议调试（这个是惊喜功能）
• 运维/SRE：Cron 表达式校验、时间戳转换

---

💬 写在最后

市面上工具类网站很多，但 「快、全、稳、离线、无广告」 的几乎没有。DevTools Box 把这五个诉求压缩进了一个 800×950 的窗口里，源码开放、架构清晰、可二次定制。

如果你也想把它打造成自己的「开发者瑞士军刀」，fork 一份，把团队常用的小工具挂进去（比如内部签名算法、灰度环境配置生成器），它的模块化设计完全支持你这么做。

🔗 项目采用 MIT License，欢迎 Star、PR、二次开发。
推荐有 JSON/加解密/Cron/MCP 调试需求的同学立刻装上，明天上班就能少开 10 个浏览器标签页。

---