開發谷歌瀏覽器插件會上癮，搞了一個JSONViewer，一個頁面格式化多條JSON，提升工作效率
最近寫了一個谷歌瀏覽器插件（Chrome extension），拿出來分享下，希望能提升大家的工作效率。
一、背景
先說痛點：日常開發中，經常需要不停的把接口輸出的JSON拷貝到在線JSON格式化頁面進行校驗、查看和對比等操作，但是現在主流的在線JSON格式化網站都只支持單個操作，如果想同時查看多條JSON，那麽就得開多個瀏覽器標簽頁，效率非常底下。比如這樣
想看另一條JSON必須切換標簽頁，重復的操作一兩次還可以，久而久之就無法忍受了。如果能把這些JSON都在一個頁面上格式化就好了。
二、嘗試解決
一個頁面格式化多條JSON，那就是從本來的一個操作區域變成多個操作區域。首先想到的是拷貝下別人的代碼，初始化對象的時候多初始化幾個，這樣就一個變多個了。於是找到國內某搜索排名靠前的JSON格式化網站來研究。看看他們的js
看了後非常疑惑，js為什麽要寫成這樣？這個_0x6eb0對象裏的元素為什麽都轉成了16進制的，剛開始還想著挨個轉回來看看到底是什麽，突然想到Chrome已經拿到了這個對象，打印一下就可以了
到這裏才明白了，就是不讓你舒服的看源碼。不過這個js還好，想拿來用的話恢復和修改的難度不大，看看另一個js
1萬多行混淆的代碼，變量名都替換成了短的，想看某個變量怎麽定義的、方法在哪裏調用過，搜索都沒辦法搜索，基本放棄了。
三、撥雲見日
既然國內的JSON格式化網站沒法抄了，就到國外找找，Google上搜索JSON Formatter，前幾個網站界面都不一樣，但是用的都是JSONEditor這個編輯器。JSONEditor的簡介是："A web-based tool to view, edit, format, and validate JSON"，看來能滿足需求了，看下這個編輯器的效果圖
看下對應的代碼
<!DOCTYPE html> <html lang="en"> <head> <title>test page</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="dist/jsoneditor.min.css"> <script type="text/javascript"src="dist/jsoneditor.min.js"></script> <style type="text/css"> #container { width: 500px; height: 600px; } </style> </head> <body> <div id="container"></div> <script type="text/javascript"> var container = document.getElementById(‘container‘); var options = { mode: ‘code‘, onError: function (err) { alert(err.toString()); } }; var editor = new JSONEditor(container, options); </script> </body> </html>
非常簡潔，這個editor還自帶json格式化、壓縮和去除轉義的功能，無需自己實現。為了方便布局，用下Bootstrap的柵欄模式，看看多個editor在一起的效果
對應的代碼是
<!DOCTYPE html> <html lang="en"> <head> <title>test page</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="dist/jsoneditor.min.css"> <link rel="stylesheet" type="text/css" href="dist/bootstrap.min.css"> <script type="text/javascript" src="dist/jquery.min.js"></script> <script type="text/javascript" src="dist/jsoneditor.min.js"></script> <script type="text/javascript" src="dist/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div id="container1"></div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div id="container2"></div> </div> </div> </div> <script type="text/javascript"> var container1 = document.getElementById(‘container1‘); var container2 = document.getElementById(‘container2‘); var options = { mode: ‘code‘, onError: function (err) { alert(err.toString()); } }; var editor1 = new JSONEditor(container1, options); var editor2 = new JSONEditor(container2, options); var wHeight = $(window).height(); $("#container1,#container2").height(wHeight); </script> </body> </html>View Code
到這裏又該疑惑了：一個頁面到底放幾個editor合適。最終決定根據瀏覽器窗口寬度動態控制個數
function getMaxBoxCount() { var screenWidth = $(window).width(); var maxBoxCount = 0; if (screenWidth < 1024) { maxBoxCount = 1; } else if (screenWidth >= 1024 && screenWidth < 1920) {//1080p maxBoxCount = 2; } else if (screenWidth >= 1920 && screenWidth < 2560) {//2k maxBoxCount = 3; } else if (screenWidth >= 2560 && screenWidth < 3840) {//4k maxBoxCount = 4; } else if (screenWidth >= 3840 && screenWidth < 5120) {//5k maxBoxCount = 5; } else if (screenWidth >= 5120) {//5k+ maxBoxCount = 6; } return maxBoxCount; }
如果用戶的顯示器是5k的，那麽放6個editor，一個頁面同時顯示6段JSON，基本夠用了。如果不夠再開一個標簽頁，就是12個了。
當然也不強制必須開幾個，允許關掉editor為剩下的editor獲取更大的顯示寬度。這裏需要註意的就是：單頁應用不停的關閉和增加editor對象必須要考慮銷毀，否則越來越卡。JSONEditor提供了JSONEditor.destroy()方法，文檔裏是這樣描述destroy方法的："Destroy the editor. Clean up DOM, event listeners, and web workers."。
調用destroy方法之前必須得有editor對象，所以初始化的時候就給存起來
var jsonEditorArr = []; var cnr = $("[data-tgt=‘container‘]"); $.each(cnr, function (i, v) { editor = new JSONEditor(v, jsonEditorOptions); jsonEditorArr.push(editor); });
之後每次刪除和增加editor都必須維護這個jsonEditorArr數組
var idx = $(this).parents(".mainBox").next().index(); jsonEditorArr.splice(idx, 0, editor);//增加 jsonEditorArr[idx].destroy(); jsonEditorArr.splice(idx, 1);//移除
至此功能就差不多了，繼續為這個插件加一些常用功能
1.復制
復制editor裏的JSON到剪切板，再去別的地方粘貼出來結構不亂。使用的是clipboard-polyfill這個庫，不需要初始化和銷毀對象等操作，直接調用api無腦copy即可，省事省心。示例代碼
clipboard.writeText(jsonCopy).then(function () { console.log(‘ok‘); }, function (err) { console.log(err); });
2.粘貼
別的地方復制的JSON，到這裏不需要右鍵然後粘貼了，直接點粘貼按鈕即可，每次操作省一次鼠標右擊。同樣借助了clipboard-polyfill這個庫。示例代碼
clipboard.readText().then(function (result) { console.log(‘剪切板裏的內容是：‘+result); }, function (err) { console.log(err); });
3.下載
保存JSON到本地，省的復制全部，然後到本地新建txt粘貼保存了。使用了FileSaver.js，示例代碼
var blob = new Blob([jsonData], { type: "text/plain;charset=utf-8" }); saveAs(blob, "jsonviewer.txt");
至此，功能就都完成了，來看看最終的效果圖
四、感謝
Bootstrap
ace
jsoneditor
clipboard-polyfill
FileSaver.js
toastr
用到了如上庫，感謝無私分享
五、下載與安裝
GitHub：https://github.com/oppoic/JSONViewer/
Chrome web store：https://chrome.google.com/webstore/detail/jsonviewer/khbdpaabobknhhlpglenglkkhdmkfnca
crx文件：https://github.com/oppoic/JSONViewer/raw/master/crx/JSONViewer.crx
註：
1）crx文件安裝方式：打開Chrome瀏覽器 - 更多工具 - 擴展程序，把crx文件拖進來
2）GitHub源碼安裝方式：下載源碼，打開Chrome瀏覽器 - 更多工具 - 擴展程序，打開“開發者模式” - 加載已解壓的擴展程序 - 選擇源碼的src目錄 - 確定
六、總結
本插件完全是前端實現，可以雙擊html頁面運行，也可以發布到服務器上。做成谷歌瀏覽器插件完全是為了方便：每次需要格式化JSON就點谷歌瀏覽器右上角的插件圖標即可。
想要運行HTML頁面的到源碼包裏找這個文件：JSONViewer\test\jsonviewer-test2.html
本文地址：https://www.cnblogs.com/oppoic/p/10444012.html，如果覺得不錯，請不吝點個贊並到Github上Star本項目，謝謝！
開發谷歌瀏覽器插件會上癮，搞了一個JSONViewer，一個頁面格式化多條JSON，提升工作效率