1. 项目概述为什么需要JSON格式化扩展作为前端开发者我每天都要和JSON数据打交道。无论是调试API接口、查看本地存储数据还是分析网络请求原始JSON字符串的可读性总是让人头疼。手动添加缩进和换行不仅效率低下遇到压缩过的单行JSON时更是灾难。这就是为什么我们需要一个能一键格式化JSON的Chrome扩展——它应该像瑞士军刀一样随时待命在浏览器任何角落遇到JSON时都能快速美化输出。这个扩展的核心价值在于即时转换无论JSON出现在网页元素、控制台输出还是API响应中点击图标即可获得带语法高亮和缩进的格式化视图零环境依赖不依赖特定网站或开发者工具在任何网页上下文都能工作双向处理既能格式化压缩的JSON字符串也能将格式化后的JSON重新压缩为单行安全处理自动验证JSON有效性避免解析错误导致的数据丢失2. 扩展程序基础架构设计2.1 清单文件(manifest.json)配置每个Chrome扩展的基石都是manifest.json文件。对于我们的JSON格式化工具采用Manifest V3版本当前最新标准的配置如下{ manifest_version: 3, name: JSON Formatter Pro, version: 1.0.0, description: One-click JSON formatting with syntax highlighting, icons: { 16: icons/icon16.png, 48: icons/icon48.png, 128: icons/icon128.png }, action: { default_icon: icons/icon32.png, default_popup: popup.html, default_title: Format JSON }, permissions: [clipboardWrite, clipboardRead], content_scripts: [{ matches: [all_urls], js: [content.js], css: [content.css] }], web_accessible_resources: [{ resources: [inject.js], matches: [all_urls] }] }关键配置解析content_scripts允许我们在所有网页注入脚本检测页面中的JSON数据web_accessible_resources暴露注入脚本给网页上下文使用permissions剪贴板权限用于实现复制功能action定义工具栏图标和点击行为注意Manifest V3不再支持background pages改用Service Workers。如果需要在后台运行持久化任务需要改用background: {service_worker: background.js}2.2 核心模块划分扩展程序采用分层架构设计src/ ├── content/ # 内容脚本 │ ├── content.js # 主内容脚本 │ └── inject.js # 注入到网页的脚本 ├── popup/ # 弹出窗口UI │ ├── popup.html │ ├── popup.js │ └── popup.css └── lib/ # 共享库 ├── parser.js # JSON解析器 └── formatter.js # 格式化引擎3. JSON格式化核心实现3.1 安全解析与验证在实现格式化功能前必须确保JSON解析的安全性。我们采用防御性编程策略// lib/parser.js function safeParse(jsonStr) { try { // 预处理移除BOM头和前后空白 const sanitized jsonStr.trim().replace(/^\uFEFF/, ); // 空字符串检查 if (!sanitized) throw new Error(Empty JSON string); // 实际解析 const result JSON.parse(sanitized); // 非对象/数组检查 if (typeof result ! object || result null) { throw new Error(JSON root must be object or array); } return result; } catch (err) { console.error(JSON parse error: ${err.message}); return null; } }3.2 智能格式化算法格式化不仅仅是添加缩进还需要考虑数组元素超过3个时换行显示对象属性超过80字符时换行保留原始数字精度// lib/formatter.js function formatJSON(obj, options {}) { const { indent 2, maxLineLength 80, arrayThreshold 3 } options; function shouldBreak(key, value) { const entry ${JSON.stringify(key)}: ${JSON.stringify(value)}; return entry.length maxLineLength; } function processValue(value, level) { if (Array.isArray(value)) { if (value.length arrayThreshold) { return [\n${value.map(v .repeat((level 1) * indent) processValue(v, level 1) ).join(,\n)}\n${ .repeat(level * indent)}]; } return [${value.map(v processValue(v, level)).join(, )}]; } if (typeof value object value ! null) { return {\n${Object.entries(value).map(([k, v]) .repeat((level 1) * indent) ${JSON.stringify(k)}: ${processValue(v, level 1)} ).join(,\n)}\n${ .repeat(level * indent)}}; } return JSON.stringify(value); } return processValue(obj, 0); }4. 内容脚本与页面交互4.1 JSON自动检测通过MutationObserver监听DOM变化自动检测可能包含JSON的元素// content/content.js const observer new MutationObserver((mutations) { mutations.forEach((mutation) { mutation.addedNodes.forEach((node) { if (node.nodeType Node.ELEMENT_NODE) { scanForJSON(node); } }); }); }); function scanForJSON(element) { // 检测pre/code标签 if (element.tagName.match(/^(PRE|CODE)$/i)) { tryParseJSON(element.textContent, element); } // 检测带有特定类的元素 if (element.classList.contains(json-data)) { tryParseJSON(element.textContent, element); } // 递归检查子元素 element.querySelectorAll(pre, code, .json-data).forEach(el { tryParseJSON(el.textContent, el); }); } function tryParseJSON(text, element) { const parsed safeParse(text); if (parsed) { element.dataset.originalJson text; element.dataset.jsonFormatted false; element.classList.add(json-candidate); } }4.2 右键上下文菜单集成在manifest.json中添加{ permissions: [contextMenus], background: { service_worker: background.js } }然后在background.js中注册右键菜单// background.js chrome.contextMenus.create({ id: formatJson, title: Format JSON, contexts: [selection] }); chrome.contextMenus.onClicked.addListener((info, tab) { if (info.menuItemId formatJson) { chrome.tabs.sendMessage(tab.id, { action: formatSelection, text: info.selectionText }); } });5. 弹出窗口UI实现5.1 基本HTML结构!-- popup/popup.html -- !DOCTYPE html html head meta charsetUTF-8 titleJSON Formatter/title link relstylesheet hrefpopup.css /head body div classcontainer div classtoolbar button idformatBtnFormat/button button idminifyBtnMinify/button button idcopyBtnCopy/button /div div classeditor-container textarea idinput placeholderPaste JSON here.../textarea pre idoutput/pre /div div classstatus-bar idstatus/div /div script srcpopup.js/script /body /html5.2 实时格式化交互// popup/popup.js document.getElementById(input).addEventListener(input, debounce(() { const input document.getElementById(input).value; const output document.getElementById(output); try { const parsed JSON.parse(input); const formatted formatJSON(parsed, { indent: 2, maxLineLength: 80 }); output.textContent formatted; output.classList.remove(error); updateStatus(Formatted successfully, success); } catch (err) { output.textContent Invalid JSON: ${err.message}; output.classList.add(error); updateStatus(Invalid JSON, error); } }, 500)); function debounce(fn, delay) { let timer; return function() { clearTimeout(timer); timer setTimeout(() fn.apply(this, arguments), delay); }; }6. 样式与语法高亮使用CSS实现基础语法高亮/* popup/popup.css */ #output { padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-family: monospace; white-space: pre-wrap; background: #f8f8f8; color: #333; } #output.error { color: #d00; } .string { color: #0b7500; } .number { color: #1a1aa6; } .boolean { color: #1a1aa6; } .null { color: #1a1aa6; } .key { color: #7928a1; }在格式化时添加高亮类function highlightJSON(json) { return json .replace(/((\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\])*)(\s*:)/g, span classkey$1/span$3) .replace(/((\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\])*)/g, span classstring$1/span) .replace(/\b(true|false|null)\b/g, span classboolean$1/span) .replace(/\b-?\d(\.\d)?([eE][-]?\d)?\b/g, span classnumber$/span); }7. 测试与调试技巧7.1 测试策略单元测试对parser.js和formatter.js编写jest测试集成测试测试内容脚本与页面的交互手动测试场景空JSON字符串无效JSON格式超大JSON文件(1MB)包含特殊字符的键名深层嵌套对象(10层)7.2 Chrome扩展调试技巧查看后台日志访问chrome://extensions/开启开发者模式点击扩展的背景页链接内容脚本调试在内容脚本中添加debugger语句打开Chrome DevTools在Sources标签页找到你的扩展脚本弹出窗口检查右键点击扩展图标选择检查弹出窗口常见问题如果修改了manifest.json后扩展没有更新尝试在chrome://extensions/页面点击重新加载按钮8. 打包与发布8.1 本地打包创建生产构建mkdir dist zip -r dist/json-formatter.zip * -x .* node_modules/* *.md在chrome://extensions/开启开发者模式点击加载已解压的扩展程序选择dist目录8.2 发布到Chrome应用商店准备材料512x512的推广图标至少一张1280x800的截图详细描述(至少500字)隐私政策链接(如果处理用户数据)登录 Chrome开发者控制台上传zip包并填写元数据支付5美元注册费等待审核(通常1-3个工作日)9. 性能优化建议延迟加载只在需要时注入内容脚本缓存机制对已格式化的JSON进行缓存虚拟滚动处理大型JSON时只渲染可见部分Web Worker将JSON解析放到后台线程// 使用Web Worker的示例 const worker new Worker(json-worker.js); worker.onmessage (e) { if (e.data.error) { showError(e.data.error); } else { displayFormatted(e.data.result); } }; document.getElementById(formatBtn).addEventListener(click, () { worker.postMessage({ action: format, json: document.getElementById(input).value }); });10. 扩展功能思路JSON Schema验证根据Schema验证JSON结构JSONPath查询实现类似XPath的查询功能差异对比比较两个JSON的差异类型推断自动生成TypeScript接口定义Mock数据生成根据JSON结构生成模拟数据实现JSONPath查询的示例function queryJSON(json, path) { const segments path.split(.); let result json; for (const seg of segments) { if (result undefined) break; if (seg.endsWith([])) { const key seg.slice(0, -2); result result[key]; if (Array.isArray(result)) { result result.flatMap(item item); } else { result undefined; } } else { result result[seg]; } } return result; }这个Chrome扩展从构思到实现涉及了扩展开发的完整生命周期。关键在于处理好内容脚本与页面的安全交互以及提供直观的格式化展示。在实际使用中建议添加更多错误恢复机制和用户自定义选项比如允许调整缩进大小、切换主题等。
1. 项目概述为什么需要JSON格式化扩展作为前端开发者我每天都要和JSON数据打交道。无论是调试API接口、查看本地存储数据还是分析网络请求原始JSON字符串的可读性总是让人头疼。手动添加缩进和换行不仅效率低下遇到压缩过的单行JSON时更是灾难。这就是为什么我们需要一个能一键格式化JSON的Chrome扩展——它应该像瑞士军刀一样随时待命在浏览器任何角落遇到JSON时都能快速美化输出。这个扩展的核心价值在于即时转换无论JSON出现在网页元素、控制台输出还是API响应中点击图标即可获得带语法高亮和缩进的格式化视图零环境依赖不依赖特定网站或开发者工具在任何网页上下文都能工作双向处理既能格式化压缩的JSON字符串也能将格式化后的JSON重新压缩为单行安全处理自动验证JSON有效性避免解析错误导致的数据丢失2. 扩展程序基础架构设计2.1 清单文件(manifest.json)配置每个Chrome扩展的基石都是manifest.json文件。对于我们的JSON格式化工具采用Manifest V3版本当前最新标准的配置如下{ manifest_version: 3, name: JSON Formatter Pro, version: 1.0.0, description: One-click JSON formatting with syntax highlighting, icons: { 16: icons/icon16.png, 48: icons/icon48.png, 128: icons/icon128.png }, action: { default_icon: icons/icon32.png, default_popup: popup.html, default_title: Format JSON }, permissions: [clipboardWrite, clipboardRead], content_scripts: [{ matches: [all_urls], js: [content.js], css: [content.css] }], web_accessible_resources: [{ resources: [inject.js], matches: [all_urls] }] }关键配置解析content_scripts允许我们在所有网页注入脚本检测页面中的JSON数据web_accessible_resources暴露注入脚本给网页上下文使用permissions剪贴板权限用于实现复制功能action定义工具栏图标和点击行为注意Manifest V3不再支持background pages改用Service Workers。如果需要在后台运行持久化任务需要改用background: {service_worker: background.js}2.2 核心模块划分扩展程序采用分层架构设计src/ ├── content/ # 内容脚本 │ ├── content.js # 主内容脚本 │ └── inject.js # 注入到网页的脚本 ├── popup/ # 弹出窗口UI │ ├── popup.html │ ├── popup.js │ └── popup.css └── lib/ # 共享库 ├── parser.js # JSON解析器 └── formatter.js # 格式化引擎3. JSON格式化核心实现3.1 安全解析与验证在实现格式化功能前必须确保JSON解析的安全性。我们采用防御性编程策略// lib/parser.js function safeParse(jsonStr) { try { // 预处理移除BOM头和前后空白 const sanitized jsonStr.trim().replace(/^\uFEFF/, ); // 空字符串检查 if (!sanitized) throw new Error(Empty JSON string); // 实际解析 const result JSON.parse(sanitized); // 非对象/数组检查 if (typeof result ! object || result null) { throw new Error(JSON root must be object or array); } return result; } catch (err) { console.error(JSON parse error: ${err.message}); return null; } }3.2 智能格式化算法格式化不仅仅是添加缩进还需要考虑数组元素超过3个时换行显示对象属性超过80字符时换行保留原始数字精度// lib/formatter.js function formatJSON(obj, options {}) { const { indent 2, maxLineLength 80, arrayThreshold 3 } options; function shouldBreak(key, value) { const entry ${JSON.stringify(key)}: ${JSON.stringify(value)}; return entry.length maxLineLength; } function processValue(value, level) { if (Array.isArray(value)) { if (value.length arrayThreshold) { return [\n${value.map(v .repeat((level 1) * indent) processValue(v, level 1) ).join(,\n)}\n${ .repeat(level * indent)}]; } return [${value.map(v processValue(v, level)).join(, )}]; } if (typeof value object value ! null) { return {\n${Object.entries(value).map(([k, v]) .repeat((level 1) * indent) ${JSON.stringify(k)}: ${processValue(v, level 1)} ).join(,\n)}\n${ .repeat(level * indent)}}; } return JSON.stringify(value); } return processValue(obj, 0); }4. 内容脚本与页面交互4.1 JSON自动检测通过MutationObserver监听DOM变化自动检测可能包含JSON的元素// content/content.js const observer new MutationObserver((mutations) { mutations.forEach((mutation) { mutation.addedNodes.forEach((node) { if (node.nodeType Node.ELEMENT_NODE) { scanForJSON(node); } }); }); }); function scanForJSON(element) { // 检测pre/code标签 if (element.tagName.match(/^(PRE|CODE)$/i)) { tryParseJSON(element.textContent, element); } // 检测带有特定类的元素 if (element.classList.contains(json-data)) { tryParseJSON(element.textContent, element); } // 递归检查子元素 element.querySelectorAll(pre, code, .json-data).forEach(el { tryParseJSON(el.textContent, el); }); } function tryParseJSON(text, element) { const parsed safeParse(text); if (parsed) { element.dataset.originalJson text; element.dataset.jsonFormatted false; element.classList.add(json-candidate); } }4.2 右键上下文菜单集成在manifest.json中添加{ permissions: [contextMenus], background: { service_worker: background.js } }然后在background.js中注册右键菜单// background.js chrome.contextMenus.create({ id: formatJson, title: Format JSON, contexts: [selection] }); chrome.contextMenus.onClicked.addListener((info, tab) { if (info.menuItemId formatJson) { chrome.tabs.sendMessage(tab.id, { action: formatSelection, text: info.selectionText }); } });5. 弹出窗口UI实现5.1 基本HTML结构!-- popup/popup.html -- !DOCTYPE html html head meta charsetUTF-8 titleJSON Formatter/title link relstylesheet hrefpopup.css /head body div classcontainer div classtoolbar button idformatBtnFormat/button button idminifyBtnMinify/button button idcopyBtnCopy/button /div div classeditor-container textarea idinput placeholderPaste JSON here.../textarea pre idoutput/pre /div div classstatus-bar idstatus/div /div script srcpopup.js/script /body /html5.2 实时格式化交互// popup/popup.js document.getElementById(input).addEventListener(input, debounce(() { const input document.getElementById(input).value; const output document.getElementById(output); try { const parsed JSON.parse(input); const formatted formatJSON(parsed, { indent: 2, maxLineLength: 80 }); output.textContent formatted; output.classList.remove(error); updateStatus(Formatted successfully, success); } catch (err) { output.textContent Invalid JSON: ${err.message}; output.classList.add(error); updateStatus(Invalid JSON, error); } }, 500)); function debounce(fn, delay) { let timer; return function() { clearTimeout(timer); timer setTimeout(() fn.apply(this, arguments), delay); }; }6. 样式与语法高亮使用CSS实现基础语法高亮/* popup/popup.css */ #output { padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-family: monospace; white-space: pre-wrap; background: #f8f8f8; color: #333; } #output.error { color: #d00; } .string { color: #0b7500; } .number { color: #1a1aa6; } .boolean { color: #1a1aa6; } .null { color: #1a1aa6; } .key { color: #7928a1; }在格式化时添加高亮类function highlightJSON(json) { return json .replace(/((\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\])*)(\s*:)/g, span classkey$1/span$3) .replace(/((\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\])*)/g, span classstring$1/span) .replace(/\b(true|false|null)\b/g, span classboolean$1/span) .replace(/\b-?\d(\.\d)?([eE][-]?\d)?\b/g, span classnumber$/span); }7. 测试与调试技巧7.1 测试策略单元测试对parser.js和formatter.js编写jest测试集成测试测试内容脚本与页面的交互手动测试场景空JSON字符串无效JSON格式超大JSON文件(1MB)包含特殊字符的键名深层嵌套对象(10层)7.2 Chrome扩展调试技巧查看后台日志访问chrome://extensions/开启开发者模式点击扩展的背景页链接内容脚本调试在内容脚本中添加debugger语句打开Chrome DevTools在Sources标签页找到你的扩展脚本弹出窗口检查右键点击扩展图标选择检查弹出窗口常见问题如果修改了manifest.json后扩展没有更新尝试在chrome://extensions/页面点击重新加载按钮8. 打包与发布8.1 本地打包创建生产构建mkdir dist zip -r dist/json-formatter.zip * -x .* node_modules/* *.md在chrome://extensions/开启开发者模式点击加载已解压的扩展程序选择dist目录8.2 发布到Chrome应用商店准备材料512x512的推广图标至少一张1280x800的截图详细描述(至少500字)隐私政策链接(如果处理用户数据)登录 Chrome开发者控制台上传zip包并填写元数据支付5美元注册费等待审核(通常1-3个工作日)9. 性能优化建议延迟加载只在需要时注入内容脚本缓存机制对已格式化的JSON进行缓存虚拟滚动处理大型JSON时只渲染可见部分Web Worker将JSON解析放到后台线程// 使用Web Worker的示例 const worker new Worker(json-worker.js); worker.onmessage (e) { if (e.data.error) { showError(e.data.error); } else { displayFormatted(e.data.result); } }; document.getElementById(formatBtn).addEventListener(click, () { worker.postMessage({ action: format, json: document.getElementById(input).value }); });10. 扩展功能思路JSON Schema验证根据Schema验证JSON结构JSONPath查询实现类似XPath的查询功能差异对比比较两个JSON的差异类型推断自动生成TypeScript接口定义Mock数据生成根据JSON结构生成模拟数据实现JSONPath查询的示例function queryJSON(json, path) { const segments path.split(.); let result json; for (const seg of segments) { if (result undefined) break; if (seg.endsWith([])) { const key seg.slice(0, -2); result result[key]; if (Array.isArray(result)) { result result.flatMap(item item); } else { result undefined; } } else { result result[seg]; } } return result; }这个Chrome扩展从构思到实现涉及了扩展开发的完整生命周期。关键在于处理好内容脚本与页面的安全交互以及提供直观的格式化展示。在实际使用中建议添加更多错误恢复机制和用户自定义选项比如允许调整缩进大小、切换主题等。
