# Orange_JSON **Repository Path**: clm101110/orange_json ## Basic Information - **Project Name**: Orange_JSON - **Description**: Orange JSON 是一款集实时编辑、多格式转换与极致排版于一体的JSON格式化Chrome扩展程序。 - **Primary Language**: JavaScript - **License**: GPL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-20 - **Last Updated**: 2026-05-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README
Orange JSON Logo

🍊 Orange JSON Pro

一款拥有极致性能、强大且优雅的浏览器 JSON 格式化与全屏编辑扩展。

它不仅能瞬间无缝接管并美化浏览器中的原生 JSON 数据，还提供了一个独立的极客级全屏编辑器。专为开发者、测试工程师和数据分析师打造，**完美支持数十万节点的巨型 JSON 秒开**，自带图片预览、时间戳翻译、颜色色块提取、路径状态栏等多种“Pro 级”提效功能。 --- ## ✨ 核心特性 (Features) ### 🚀 "Pro 级" 开发者提效工具 * **🧭 沉浸式路径状态栏**：鼠标在嵌套极深的 JSON 森林中游走时，底部状态栏会实时、丝滑地显示当前节点的**绝对 JSONPath**，永不迷路。 * **🎨 颜色直观预览**：智能识别 JSON 中的色值字符串（如 `#FFB366`, `rgba(0,0,0,0.5)`），并在代码旁自动生成精致的预览小色块。 * **🖼️ 图像悬浮预览**：鼠标悬停在 `.png/.jpg/.webp/.svg` 等图片 URL 上，立刻弹出带有毛玻璃质感的高清缩略图。 * **🕒 时间戳智能翻译**：鼠标悬停在 `10位/13位` 时间戳数字上，自动转换为直观的本地时间。 * **🔗 极速路径跳转**：按住 `Alt / Option` 点击任意属性，直接复制路径；`中键` 点击 URL 直接在新标签页打开。 ![Orange JSON - 智能交互](assets/feature-interactive.png) *▲ 智能交互：支持时间戳瞬间翻译、颜色块提取、多条复制记录平滑堆叠提示。* ### ⚡️ 极致的性能与安全架构 (Performance & Security) 市面上大多数 JSON 插件在处理超过 5MB 的数据时会卡死浏览器，Orange JSON 重写了底层渲染引擎，实现了真正的降维打击： * **🏎️ 十万级节点秒开 (Lazy Rendering)**：引入按需渲染的虚拟 DOM 技术。深度超过 3 层或包含上百个子元素的巨型对象将被默认折叠且**不生成 DOM 节点**，即使是 10MB 的 JSON 也能瞬间秒开，内存占用暴降 90%。 * **🔥 纯 CSS 高性能行号**：彻底废弃传统插件耗时的 JavaScript `offsetHeight` 计算，采用 `CSS Counters` 计数器在 C++ 渲染层直接生成行号。**告别布局抖动 (Layout Thrashing)**，即使开启长文本自动换行，行号也能 100% 完美对齐。 * **🛡️ Shadow DOM 绝对隔离**：采用 Web Components 的 `Shadow Root` 终极隔离机制。你的 JSON 面板处于绝对封闭的“影子空间”中，宿主网页哪怕写了 `* { display: none !important }` 也**绝对无法污染或破坏**插件的 UI。 * **🔒 原生级防 XSS 注入**：全面弃用 `innerHTML` 拼接，底层采用 `document.createElement` 与 `textContent` 安全挂载数据，彻底杜绝恶意 JSON 载荷执行跨站脚本攻击。 ### 🍎 Apple 级原生质感交互 * **毛玻璃物理动效**：所有的 Toast 提示、悬浮预览面板均采用了 macOS 级别的 `backdrop-filter: blur` 毛玻璃质感与精细的半透明边框。 * **弹簧阻尼排版**：连续点击复制时，提示气泡采用 `cubic-bezier` 弹簧曲线弹出，并且旧气泡会如丝般顺滑地“融化”并为新气泡让位（完美复刻 Apple 通知中心堆叠逻辑）。 ### 🌲 极客排版与双端适配 * **精准折叠与等比缩放**：采用高对比度胶囊 UI (`Object{5}`, `Array[10]`)。全 UI 采用相对单位 `em` 构建，支持在设置中自定义 10px~30px 字号，所有图标与边距完美等比缩放。 * **数据转换**：支持 JSON 与 XML 格式一键互转，支持一键压缩（Minify）与转义（Escape）。 * **全系统暗黑模式**：原生支持深色/浅色（Dark/Light）模式，自动跟随系统配置，参数持久化保存。 --- ## 💻 快捷操作指南 (Shortcuts & Tips) | 操作 / 动作 | 触发效果 | | :--- | :--- | | **单击 属性名/值** | 瞬间复制该字段的文本内容（带果味 Toast 提示） | | **按住 `Alt/Option` + 单击** | 复制该属性在整个 JSON 中的 **绝对路径** | | **鼠标悬停 属性名/值** | 底部状态栏实时显示当前层级的 **JSONPath** | | **`鼠标中键` 点击 URL** | 在新标签页中快速打开该链接 | | **鼠标悬停 URL (图片)** | 弹出图片悬浮缩略图 | | **鼠标悬停 Number (时间戳)** | 弹出该时间戳对应的标准日期时间 | --- ## 🛠️ 安装指南 (Installation) 由于本项目目前为离线开发者版本，请通过浏览器“开发者模式”加载： 1. 下载本项目的完整代码，并将其解压到一个文件夹中。 2. 打开 Chrome 或 Edge 浏览器，在地址栏输入 `chrome://extensions/`（Edge 为 `edge://extensions/`）并回车。 3. 在页面右上角（或左下角）打开 **开发者模式 (Developer mode)** 开关。 4. 点击左上角的 **加载已解压的扩展程序 (Load unpacked)** 按钮。 5. 选择你刚刚解压的 `Orange JSON` 文件夹。 6. 🎉 安装成功！建议将扩展图标固定在浏览器右上角的工具栏，点击即可随时打开全屏独立编辑器。 --- ![Orange JSON - 偏好设置](assets/setting.png) ## ⚙️ 偏好设置 (Settings) 右键点击扩展图标 -> **选项 (Options)**，即可进入精美的设置面板： * 🌗 调整主题风格（浅色/深色/自动跟随系统） * 🔠 修改编辑器基础字号（支持 10px ~ 30px 等比缩放） * ⚙️ 自定义默认行为（默认 XML/JSON 视图、显示行号、自动换行等） * 🚀 开启/关闭特定的“Pro”功能（底部状态栏、颜色块提取、时间戳翻译等） * 💾 设置文件导出的前缀名（默认 `OrangeJSON_`） --- ## 🌍 多语言支持 (i18n) 原生支持多国语言，按浏览器语言环境自动无缝切换。目前支持： * 🇨🇳 简体中文 (zh_CN) * 🇺🇸 英语 (en) * 🇯🇵 日语 (ja) * 🇰🇷 韩语 (ko) * 🇪🇸 西班牙语 (es) * 🇷🇺 俄语 (ru) --- ## 📄 开源协议 (License) 本项目基于 [GPLv3 (GNU General Public License v3.0)](https://www.gnu.org/licenses/gpl-3.0.html) 协议开源。 这意味着： * ✅ 你可以自由地个人使用、商业使用、修改和分发本项目的代码。 * ⚠️ **传染性开源**：任何基于本项目修改或衍生出的新项目，**必须同样以 GPLv3 协议开源**，并公开其源代码。 * ❌ 严禁直接闭源：不得将本项目的代码直接用于闭源的商业软件中。 * ℹ️ 免责声明：本软件按“原样”提供，不提供任何形式的明示或暗示的担保。 获取完整的协议文本，请参阅项目根目录下的 `LICENSE` 文件。 --- *(Enjoy your flawless & lightning-fast JSON formatting experience!)*