background

Chrome has many excellent page-to-JSON viewers (usually converting API page results to JSON) and few good JSON editors that can format and edit JSON well. So every time we write json, every time we modify json, we have to open a url, like json.cn, bejson.com, which is nice to use, but you have to open it first, and it’s not direct, and you have to suffer from annoying ads.This is one of the original intention of this plug-in development, to provide you with a relatively simple and practical JSON editor, convenient direct use, and can avoid boring advertising harassment.

Software functions

Clean and simple interface

Easy to use features

  • JSON editing and viewing
  • JSON formatting and JSON compression
  • JSON syntax highlighting & JSON error checking
  • Plug-in bar click direct, easy to use

The development process

I’m not a front-end developer and don’t know much about front-end development, so developing this plug-in was a bit of a challenge for me.

Base library search

First of all, when developing such a tool, my first thought is whether there are three libraries that can be used directly. After all, it takes a lot of energy and time to develop a fully functional library. Our first reaction is to stand on the shoulders of giants and continue to move forward. I searched on the Internet and found that there were some of them, and some of them were very mature. I selected the JsonEditor library. Due to the time problem, I did not download this library and read it carefully, but quickly downloaded the JS and CSS files generated by this library from THE CDN.

HTML file writing tests

Second, what I did was write a very simple HTML file and bring the library in. Here I just set up the left and right columns, the left column for editing and the right column for viewing. A typical binary layout (a reference to the layout of a Plugin for Firefox, the underlying library is the same library).

<! DOCTYPEHTML>
<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.5 pt 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>

Copy the code

Then we need to download the json editor library file introduced in the file, place it in the same directory, and place its dependent icon file in the IMG directory, as shown below

├ ─ ─ jsoneditor. Min. CSS ├ ─ ─ jsoneditor. Min. Js ├ ─ ─ main. HTML ├ ─ ─ img │ └ ─ ─ jsoneditor - the ICONS. SVGCopy the code

Finally, we write a few lines of JS code according to the official document, as follows:

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);
Copy the code

Finally, double-click main.html to see the preview effect, which is a fully working JSON editor and quite complete.

Step three, turn it into a Chrome plugin

Due to the length of Chrome development, this article is difficult to cover in detail, but if you are interested, check out the resources below.

  • The key ofmanifest.jsonThis is a list file that specifies the details of the plug-in and is a must.

Names, descriptions, ICONS, permissions, and background JS logic must exist.

{
    "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"}}Copy the code
  • Background. Js file

This basically tells Chrome to click on the icon to open a new TAB and load main.html

chrome.action.onClicked.addListener(function (tab) {
    chrome.tabs.create({
        url: 'main.html'
    });
});

Copy the code

Finally, install it into Chrome

With that done, the directory should now have the following structure

├ ─ ─ background. Js ├ ─ ─ img │ ├ ─ ─ 128 PNG │ ├ ─ ─ 16. PNG │ ├ ─ ─ 32. PNG │ ├ ─ ─ 48. PNG │ └ ─ ─ jsoneditor - the ICONS. SVG ├ ─ ─ ├─ ├─ manifest.json ├─ ├.js ├.css ├─ ├.js ├─ manifest.json ├─ ├.jsCopy the code

Enter it in the Chrome address barchrome://extensionsOpen the Chrome extension list and follow the steps shown below

Finally, you can anchor this plugin in the plugins area in the top right corner of Chrome so that you can open the JSON editor directly in one step.

The document is prepared in haste. If you find any omissions or mistakes in the document, please kindly comment and correct them. Thank you!

Github repository address, if this plug-in is helpful to you, you can give me a little star, encourage me.

The resources

  • Official Google Docs
  • [dry goods] Chrome plug-in (extension) development overview