最近寫了一個谷歌瀏覽器插件（Chrome extension），拿出來分享下，希望能提升大家的工作效率。一、背景先說痛點：日常開發中，經常需要不停的把介面輸出的JSON拷貝到線上JSON格式化頁面進行校驗、查看和對比等操作，但是現在主流的線上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");

至此，功能就都完成了，來看看最終的效果圖

四、感謝

用到瞭如上庫，感謝無私分享

五、下載與安裝

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，提升工作效率