JSON-handle 插件增加“去除转义”功能

快来打我* 2022-10-17 14:00 129阅读 0赞

开发调试中，经常需要将一段字符串的json结构数据进行格式化。我们可以通过一些文本编辑器的工具，或者在线json格式化来解决。

本着极简主义，本人习惯使用chrome的JSON-handle插件：

*  商店地址：[https://chrome.google.com/webstore/detail/json-handle/iahnhfdhidomcpggpaimmmahffihkfnj][https_chrome.google.com_webstore_detail_json-handle_iahnhfdhidomcpggpaimmmahffihkfnj]
 *  github：[https://github.com/wilon/JSON-handle][https_github.com_wilon_JSON-handle]

在使用过程中，我们经常会从代码、日志中拷贝出来一个带有转义的json字符串，这个时候就需要先去除转义，然后在通过该插件格式化。非常的麻烦！例如：

{\"tabinfo\":[{\"abTest\":\"116_C,116_B,default\"},{\"abTest\":\"116_C,116_A,default\"}],\"version\":\"78\"}

这里的在线json格式化（[https://www.bejson.com/][https_www.bejson.com]），可以一键转义，然后在一键格式化，例如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70][]

既然，追求极简主义，肯定无法容忍json-handle插件没有这个功能。于是DIY开发了一下。现在把这个过程记录一下：

1、下载：github地址[https://github.com/wilon/JSON-handle][https_github.com_wilon_JSON-handle]，使用vscode打开。

2、修改页面：

找到JSON-handle.html，增加如下按钮：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1][]

3、增加js处理逻辑：

在jsonH.js中增加如下方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2][]

在上面还需要注册一下这两个方法：

$(_pri.node['delTransfer']).on('click', _pri.uiEvtCallback.delTransferClick);
    $(_pri.node['enterCompress']).on('click', _pri.uiEvtCallback.enterCompressClick);

4、调试：

由于chrome插件的代码中使用了chrome的一些api，所以我们不能通过直接访问JSON-handle.html这个页面来调试。

这里提供一种调试方法：先卸载插件；打开chrome菜单》更多工具》扩展程序；然后点击右上角“开发者模式“，如下图：

![20210603220839952.png][]

点击“加载已解压的扩展程序”，选择我们的工程代码，即可安装好插件。

然后打开插件，同时F12调试模式，在netWork中找到url地址，通过该地址即可访问插件界面，进而使用F12进行调试。

JSON-handle插件的调试url如下：chrome-extension://iahnhfdhidomcpggpaimmmahffihkfnj/JSON-handle/JSON-handle.html

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 3][]

参考：[https://www.crazyming.com/note/1329/][https_www.crazyming.com_note_1329]

[https_chrome.google.com_webstore_detail_json-handle_iahnhfdhidomcpggpaimmmahffihkfnj]: https://chrome.google.com/webstore/detail/json-handle/iahnhfdhidomcpggpaimmmahffihkfnj
[https_github.com_wilon_JSON-handle]: https://github.com/wilon/JSON-handle
[https_www.bejson.com]: https://www.bejson.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70]: /images/20221014/f2ce7373fd0347099098ada83bc843cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1]: /images/20221014/514cad20ef6a492783eb749158831613.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2]: /images/20221014/8fd7947f5efd4bd09d5e111240d0cfa9.png
[20210603220839952.png]: /images/20221014/c85d10655f154a259496830f65249972.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 3]: /images/20221014/228da6dfd5744c489cab2f4a162eed8f.png
[https_www.crazyming.com_note_1329]: https://www.crazyming.com/note/1329/