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

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

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

• 商店地址：https://chrome.google.com/webstore/detail/json-handle/iahnhfdhidomcpggpaimmmahffihkfnj
• github：GitHub - wilon/JSON-handle: This repo no longer updated, just see 👉👉👉

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

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

这里的在线json格式化（在线JSON校验格式化工具（Be JSON）），可以一键转义，然后在一键格式化，例如：

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

1、下载：github地址GitHub - wilon/JSON-handle: This repo no longer updated, just see 👉👉👉，使用vscode打开。

2、修改页面：

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

3、增加js处理逻辑：

在jsonH.js中增加如下方法

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

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

4、调试：

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

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

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

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

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

补充：也可以直接在chrome浏览器地址栏中输入chrome-extension://{插件ID}/{插件中的html页面}来访问插件，从而进行调试。其中插件ID可以在插件中点“详情”看到。

参考：https://www.crazyming.com/note/1329/