JSON Interface Formatter

一个面向前后端联调的浏览器扩展，解决「JSON 返回一行难阅读、带鉴权接口不方便查看」的问题。
安装后你可以在两种场景下快速查看结构化 JSON：

• 直接打开 JSON URL：自动替换为格式化树视图
• 在 DevTools 面板查看请求：支持带 Token/Cookie 的业务接口响应

适用于 Chrome / Edge（开发者模式加载）。

---

功能亮点

1) 页面直开 JSON（自动格式化）

• 自动识别 JSON 响应（application/json、+json、纯文本 JSON）
• 树形展示、语法高亮、层级折叠/展开
• 一键 全部展开 / 全部折叠
• 一键 复制 JSON
• 节点级 复制值
• 可选 JSON 容错修复（BOM、注释、尾逗号、单引号）

2) DevTools 面板（推荐：鉴权接口调试）

新增 JSON Formatter 面板，自动接收 Network 中的 JSON 响应：

• 左侧请求列表，右侧 JSON 树形视图
• 搜索与筛选：
  • URL 关键字搜索
  • Method 过滤
  • Status 过滤（2xx / 4xx / 5xx）
• JSON Path：
  • 显示节点路径（如 $.data.list[0].id）
  • Copy Path / Copy Value
• Diff 对比：
  • Set baseline 设基线请求
  • Diff 比较当前请求与基线
  • 输出新增/删除/修改计数摘要
• 导出能力：
  • Export JSON 导出当前请求为 .json 文件
• 大 JSON 优化：
  • 子节点分段加载（Load more），避免全量渲染卡顿

3) 设置与国际化

• Popup 设置页（点击扩展图标）
• 设置项：
  • Theme（auto / light / dark）
  • Language（zh-CN / en-US）
  • 默认展开层级
  • 是否启用 JSON 修复
  • 是否显示复制按钮
• 支持 Reset 恢复默认设置
• 设置通过 chrome.storage 持久化，并同步到页面与 DevTools

---

适用场景

• 前后端联调时快速阅读接口返回结构
• 线上问题排查时分析复杂嵌套 JSON
• 带鉴权请求（Token/Cookie）在 DevTools 中统一查看与对比

---

快速开始

安装（Chrome / Edge，本地开发版）

1. 打开扩展管理页
   • Chrome: chrome://extensions
   • Edge: edge://extensions
2. 开启 开发者模式
3. 点击 加载已解压的扩展程序
4. 选择本项目目录 JSONFormatter
5. 代码改动后，在扩展页点击“重新加载”生效

使用方式 A：直接打开 JSON URL（无额外鉴权）

适合无需额外鉴权头的接口：

• 在地址栏直接打开 JSON 地址
• 扩展会自动替换为格式化视图

使用方式 B：DevTools 查看鉴权接口（推荐）

适合业务页面中通过 fetch/xhr 发出的带 Token/Cookie 请求：

1. 打开业务页面并保持登录
2. 打开 DevTools
3. 进入 JSON Formatter 标签（看不到可在 >> 里找）
4. 触发接口请求（刷新或点击页面操作）
5. 在左侧列表选择请求查看结构化 JSON

常见问题

为什么不能和 Network 当前选中请求完全联动？

Chrome DevTools 扩展 API 目前不提供“Network 面板当前选中请求”的直接事件。
因此扩展采用可用替代方案：

• 自动捕获请求
• 快速筛选定位
• 点击左侧请求进行查看

项目结构

• src/：页面直开模式脚本与样式
• devtools/：DevTools 面板实现
• popup/：扩展弹窗设置页
• icons/：扩展图标
• store/：商店上架素材模板（文案、隐私政策）

分发建议

• 小范围测试：把整个目录打包给同事，使用“加载已解压”安装
• 正式分发：发布到 Chrome Web Store / Edge Add-ons
• 上架文档模板参考：
  • store/STORE_LISTING.md
  • store/PRIVACY.md