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

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

适用于 Chrome / Edge(开发者模式加载)。

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

新增 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),避免全量渲染卡顿

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

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

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

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

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

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

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

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

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

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

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