JSON 美化工具
chrome-extensionlaunched

JSON 美化工具

一个智能的 JSON 格式化工具,能够自动检测并美化网页中的 JSON 内容,让开发者更轻松地阅读和调试 JSON 数据。

作者
小路
15 浏览2025年10月上线
变现方式完全免费

技术栈

TypeScript

🔍 智能检测与自动格式化

  • 自动识别: 智能检测页面中的JSON和XML内容
  • 即时美化: 自动格式化检测到的JSON,提升可读性
  • 语法高亮: 彩色显示JSON结构,清晰展示数据层次
  • 错误容错: 智能处理不规范的JSON格式,尽可能完成解析

📝 手动输入与编辑

  • 独立工具页面: 点击扩展图标打开专用格式化页面
  • 实时预览: 输入JSON内容即时查看格式化结果
  • 格式切换: 在原始和格式化视图间自由切换
  • 多格式支持: 同时支持JSON和XML格式处理

基本使用

方式一:自动检测模式

  1. 访问包含JSON内容的网页(如API响应页面)
  2. 扩展会自动检测并格式化JSON内容
  3. 页面将显示美化后的JSON,支持语法高亮

方式二:手动输入模式

  1. 点击浏览器工具栏中的 🎨 扩展图标
  2. 在打开的独立页面中输入或粘贴JSON内容
  3. 实时查看格式化结果,支持复制和下载

核心技术

  • Manifest V3: 采用最新的扩展架构标准
  • JSON.parse/stringify: 原生JSON处理
  • 正则表达式: 内容类型检测和解析
  • CSS语法高亮: 自定义样式实现代码高亮
  • Blob API: 文件下载功能
  • Clipboard API: 复制到剪贴板功能
📸

项目截图

Screenshot 1
Screenshot 2