布景

Chrome 有很多优异的页面转JSON检查器 （通常是把API页面结果转成JSON） 很少有比较好的JSON修改器，能够很好的格式化并且修改JSON. 因此咱们每次编写json，修改json都需求翻开一个网址， 如json.cn, bejson.com 这些网址好用是好用的，但是你得首要翻开它，且不能直达， 别的你得接受烦人的广告。

Chrome 扩展 Easy Json Editor 生成记
这也是本插件开发的一个初衷，为大家提供一个相对简略实用的JSON修改器，便利直达运用， 又能够避免无聊的广告的骚扰。

软件功用

清爽简洁的界面

Chrome 扩展 Easy Json Editor 生成记

便利易用的功用

  • JSON 修改与检查
  • JSON 格式化与 JSON压缩
  • JSON 语法高亮 & JSON 过错检查
  • 插件栏点击直达，便利运用

Chrome 扩展 Easy Json Editor 生成记

开发进程

自己并非专职前端开发，对前端开发所知甚少， 因此开发此插件对我来讲也是有一定挑战的。

根底库寻觅

首要，开发这种东西， 我第一个想到的是，有没有三方的库能够直接运用， 毕竟开宣布一个功用齐全完善的库是很消耗精力和时间的， 咱们第一反响还是应该站在巨人的膀子上持续往前走。 网上一搜，果然有一些， 并且有一些是十分老练的，我从中选择了jsoneditor库， 因为时间问题，我并没有把这个库下载下来仔细研读，仅仅从cdn上迅速下载下来了这个库终究生成的 js 和css文件。

html 文件编写测验

第二步， 我做的是写一个十分简略的html文件， 并且把这个库引入进去, 这儿我仅仅设置了左右两栏， 左栏用于修改， 右侧栏用于检查。 一个典型的二分布局（是参阅火狐一个插件的布局做的， 底层库运用的也是同一个库）。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <!-- when using the mode "code", it's important to specify charset utf-8 -->
    <meta charset="utf-8">
    <link href="./jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script src="./jsoneditor.min.js"></script>
    <style type="text/css">
        html, body {
            font: 10.5pt arial;
            color: #4d4d4d;
            line-height: 150%;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            min-width: 800x;
            min-height: 800px;
        }
        .jsoneditor-poweredBy {
            display: none !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="editor" style="width:50%"></div>
        <div id="viewer" style="width:50%"></div>
    </div>
    <script src="popup.js"></script>
</body>
</html>

然后咱们需求把文件中引入的 json修改器库文件下载下来，放置到同级目录，把它依赖的图标文件，放置到img 目录， 如下

├── jsoneditor.min.css
├── jsoneditor.min.js
├── main.html
├── img
│   └── jsoneditor-icons.svg

最终，咱们依照官方文档简略的写几行js代码, 如下：

const leftEditor = document.getElementById('editor')
const rightViewer = document.getElementById('viewer')
const STORE_KEY = 'easy-json-editor';
function loadEditor() {
    var json = {}
    try {
        const jsonStr = localStorage.getItem(STORE_KEY) || '{}'
        json = JSON.parse(jsonStr)
    } catch (error) {
        json = {}
    }
    const viewerOptions = {
        mode: 'view',
    }
    const editorOptions = {
        mode: 'code',
        modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
        onModeChange: function (newMode, oldMode) {
            console.log('Mode switched from', oldMode, 'to', newMode)
        },
        onChangeText: function (jsonString) {
            localStorage.setItem(STORE_KEY, jsonString);
            jsonViewer.updateText(jsonString)
        }
    }
    const jsonEditor = new JSONEditor(leftEditor, editorOptions, json)
    const jsonViewer = new JSONEditor(rightViewer, viewerOptions, json)
}
document.addEventListener('DOMContentLoaded', loadEditor, false);

最终双击main.html 就能够看到预览到的效果了，这是一个完全能够正常作业的json修改器，功用也算比较完善了。

第三步，把它变成chrome插件

因为chrome开发涉及的篇幅比较多， 本文很难进行比较具体的讲解， 有爱好的能够检查下面的参阅资料。

  • 关键的 manifest.json, 这个是指定插件的一些具体信息的清单文件， 是十分必须的。 包含名称，描述，图标， 权限，及后台js逻辑等等， 是必须要存在的。
{
    "name": "Easy JSON Editor",
    "version": "1.0",
    "description": "Easy Json Editor",
    "manifest_version": 3,
    "author": "test",
    "permissions": [
        "tabs"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_icon": "img/16.png"
    },
    "icons": {
        "16": "img/16.png",
        "32": "img/32.png",
        "48": "img/48.png",
        "128": "img/128.png"
    }
}
  • background.js 文件 这个主要是告诉chrome点击图标翻开一个新标签页，并加载main.html 的
chrome.action.onClicked.addListener(function (tab) {
    chrome.tabs.create({
        url: 'main.html'
    });
});

最终一步， 把它安装到chrome中

上述操作进行完毕后， 现在的目录应该是如下的结构

├── background.js
├── img
│   ├── 128.png
│   ├── 16.png
│   ├── 32.png
│   ├── 48.png
│   └── jsoneditor-icons.svg
├── jsoneditor.min.css
├── jsoneditor.min.js
├── main.html
├── manifest.json
└── popup.js

在chrome地址栏输入 chrome://extensions 翻开chrome扩展列表， 依照下图所示过程进行操作

Chrome 扩展 Easy Json Editor 生成记

最终， 你能够在chrome右上角的插件中把这个插件固定在插件区域， 这样你就能够一步直接翻开json 修改器了。

文档编写比较仓促， 如您发现文档中遗漏失误， 万望留言指正， 谢谢！

github仓库地址， 假如此插件对您有协助，您能够给我一个小小的星星，鼓励我一下。

参阅资料

  • Google 官方文档
  • 【干货】Chrome插件(扩展)开发全攻略