開發谷歌瀏覽器插件會上癮，搞了一個JSONViewer，一個頁面格式化多條JSON，提高工做效率

時間 2019-11-07

標籤開發谷歌瀏覽器插件搞了一個 jsonviewer 頁面格式化多條 json 高工效率欄目 Chrome 简体版

原文原文鏈接

最近寫了一個谷歌瀏覽器插件（Chrome extension），拿出來分享下，但願能提高你們的工做效率。javascript

1、背景

先說痛點：平常開發中，常常須要不停的把接口輸出的JSON拷貝到在線JSON格式化頁面進行校驗、查看和對比等操做，可是如今主流的在線JSON格式化網站都只支持單個操做，若是想同時查看多條JSON，那麼就得開多個瀏覽器標籤頁，效率很是低下。好比這樣css

想看另外一條JSON必須切換標籤頁，重複的操做一兩次還能夠，長此以往就沒法忍受了。若是能把這些JSON都在一個頁面上格式化就行了。html

2、嘗試解決

一個頁面格式化多條JSON，那就是從原本的一個操做區域變成多個操做區域。首先想到的是拷貝下別人的代碼，初始化對象的時候多初始化幾個，這樣就一個變多個了。因而找到國內某搜索排名靠前的JSON格式化網站來研究。看看他們的js前端

看了後很是疑惑，js爲何要寫成這樣？這個_0x6eb0對象裏的元素爲何都轉成了16進制的，剛開始還想着挨個轉回來看看究竟是什麼，忽然想到Chrome已經拿到了這個對象，打印一下就能夠了java

到這裏才明白了，就是不讓你舒服的看源碼。不過這個js還好，想拿來用的話恢復和修改的難度不大，看看另外一個jsjquery

1萬多行混淆的代碼，變量名都替換成了短的，想看某個變量怎麼定義的、方法在哪裏調用過，搜索都沒辦法搜索，基本放棄了。git

3、撥雲見日

既然國內的JSON格式化網站無法抄了，就到國外找找，Google上搜索JSON Formatter，前幾個網站界面都不同，可是用的都是JSONEditor這個編輯器。JSONEditor的簡介是："A web-based tool to view, edit, format, and validate JSON"，看來能知足需求了，看下這個編輯器的效果圖github

看下對應的代碼web

<!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放在一塊兒的效果ajax

對應的代碼是

<!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");

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

4、感謝

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

5、下載與安裝

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）GitHub源碼安裝方式：下載源碼，打開Chrome瀏覽器 - 更多工具 - 擴展程序，打開「開發者模式」 - 加載已解壓的擴展程序 - 選擇源碼的src目錄 - 肯定

2）...

3）crx文件安裝方式：打開Chrome瀏覽器 - 更多工具 - 擴展程序，把crx文件拖進來

6、總結

本插件徹底是前端實現，能夠雙擊html頁面運行，也能夠發佈到服務器上。作成谷歌瀏覽器插件徹底是爲了方便：每次須要格式化JSON就點谷歌瀏覽器右上角的插件圖標便可。

想要運行HTML頁面的到源碼包裏找這個文件：JSONViewer\test\jsonviewer-test2.html

本文地址：https://www.cnblogs.com/oppoic/p/10444012.html，若是以爲不錯，請不吝點個贊併到Github上Star本項目，謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。