likes
comments
collection
share

Chrome 扩展 Easy Json Editor 生成记

作者站长头像
站长
· 阅读数 48

背景

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仓库地址， 如果此插件对您有帮助，您可以给我一个小小的星星，鼓励我一下。

参考资料

转载自:https://juejin.cn/post/7075215831163994125
评论
请登录