开发谷歌浏览器插件会上瘾，搞了一个JSONViewer，一个页面格式化多条JSON，提高工做效率

时间 2020-05-30

标签开发谷歌浏览器插件搞了一个 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本项目，谢谢！

原文出处：https://www.cnblogs.com/oppoic/p/10444012.html