☰

JSON Viewer

格式化显示JSON使数据看起来更加漂亮，支持折叠/展开格式化后的数据，支持JSON脑图让调用层级看着更清晰，支持复制JSON脑图节点路径

当前为 2024-10-11 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @license      MIT
  3. // @name         JSON Viewer
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.6.2
  6. // @note         v0.6.2 脑图增加JSON Crack
  7. // @note         v0.6.1 增加多一种浅色主题
  8. // @note         v0.6.0 增加简单HTTP 请求功能，可请求GET/POST/PUT/DELETE的API接口，而不单单只能GET请求使用
  9. // @note         v0.5.9 jsonp格式小优化
  10. // @note         v0.5.8 增加JSON手动输入
  11. // @note         v0.5.7 一些小细节优化
  12. // @note         v0.5.6 修复BUG
  13. // @note         v0.5.5 解决@require jquery-simple-tree-table.min.js依赖加载失败问题
  14. // @note         v0.5.4 单击复制修改为CTRL+单击复制JSONPath功能，JSON格式化风格增加table格式
  15. // @note         v0.5.3 增加暗黑主题色
  16. // @note         v0.5.2 单击JSON格式化的key可复制JSONPath
  17. // @note         v0.5.1 修复JSONPath提示有误
  18. // @note         v0.5.0 解决chrome 120+以上内核JSON格式化不执行和引入layer报错问题
  19. // @note         v0.4.9 布局修改，增加保存JSON/脑图为文件，增加JSON过滤，鼠标移入key提示JSONPath
  20. // @note         v0.4.8 代码优化
  21. // @note         v0.4.7 增加对JSONP的判断，代码优化
  22. // @note         v0.4.6 增加复制按钮，JSON脑图CSS样式细节优化，JSON脑图增加收起/展开子节点按钮
  23. // @note         v0.4.5 在json-viewer-updated原基础上进行了一些修改，主要有CSS样式修改，新增折叠/展开全部功能，新增JSON脑图功能，脑图节点点击显示调用路径
  24. // @description   格式化显示JSON使数据看起来更加漂亮，支持折叠/展开格式化后的数据，支持JSON脑图让调用层级看着更清晰，支持复制JSON脑图节点路径
  25. // @author       Feny
  26. // @match        *://*/*
  27. // @grant        GM_addStyle
  28. // @grant        GM_getValue
  29. // @grant        GM_setValue
  30. // @grant        unsafeWindow
  31. // @grant        GM_openInTab
  32. // @grant        GM_setClipboard 
  33. // @grant        GM_getResourceText
  34. // @grant        GM_registerMenuCommand
  35. // @icon          data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAgACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9wvjF8bLX4ZrHZx+XNqlwnmKjH5YUyRvb6kEAd8H058d1b47XV5Ir3eoN++bagaXYrN6KOBn2FfPPx5/aEutX8a+KNWhIubhruZLSNj8u1WMcIOP4QoXOOwNS/wDBM79lDTfjh8YNe+IXj63TxRdeHfKjsE1KMTxtdSbmMmxvlAiVV2IBsUybgAyKR9ZTy6lhsM69Xovm2+iPmKmOqYjEKjT6v5WXU9e8beKrjxZpp/s/xFrfhjWIwWs9X0q42z2kmPlZo2zDcxjqYZ0eNv7obDDf/YL/AG8L745eJNc+G3xCttP0n4qeEWZZ2sVZNP8AENsu0rd2ysS0ZKPG7RMSQsisCcukWd+3x4RtfhpqGk+JNPjS0g1mV7a8iT5UM4XesgHYsofdjglQepJPxwPE1x4V/au8LePtNkeK40ma0lmdDgyorvHMhPo9uxjP+y1bUcHRxmGbS1adn1TXT0/4fcipiqmExCi3pfVdGn19f+GLni/w7ceGf2wPFXga+Vo5rW/vDbI3WWI/v4HA/wBqBg3tk+lfWX7AXia1+F/iDV9B1CRbWHXjFLayyHannpuUxk+rqy4zxlMdWAPQft7fsL33x91nQfiD4DutP0r4oeDXVrT7cWWx1y3UsTZ3LKCyAh5FEigkLLIpHzBk5vwj4JuvE2kLJfeHdY8N6lGAl5pepwBZrOT+JRIuYp0ByBNCzxPg4bIICqYyljMKot62Sa6prr6P/gBDC1MLiHJLS90+jT6ev/Dnmn/BVP8Aaw0nxv4/8P8Aw18KXK69qmk3MlxqEdiRMwuivlpbrtPLopkMnZNy5IIYLyPwa/Z8vvEmv+HtHu4/Ovr+5iS6KDcqAtukwe6om7nuEJxX0XoH7PK/bJG0vRoY5rr/AFslvbLGZf8AfcAf+PGvafgv8CbX4byNqFyI5tWmXYCoytsh6qvqx7t+A4yWiWYUsLhlRpbr72318kVHA1MTiHVqbP7kl0P/2Q==
  36. // @require      https://code.jquery.com/jquery.min.js
  37. // @require      https://unpkg.com/jsmind@0.8.5/es6/jsmind.js
  38. // @require      https://unpkg.com/dom-to-image@2.6.0/dist/dom-to-image.min.js
  39. // @require      https://unpkg.com/jsmind@0.8.5/es6/jsmind.screenshot.js
  40. // @resource     swalStyle https://unpkg.com/jsmind@0.8.5/style/jsmind.css
  41. // ==/UserScript==
  42.  
  43.  
  44. /**
  45.  * jquery-simple-tree-table.min.js
  46.  * https://cdn.jsdelivr.net/npm/@kanety/jquery-simple-tree-table@0.5.1/dist/jquery-simple-tree-table.min.js
  47.  */
  48. !function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist",n(n.s=5)}([function(e,t){e.exports=jQuery},function(e,t,n){var o=n(2),i=n(3);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[e.i,i,""]]);var a={insert:"head",singleton:!1};o(i,a);e.exports=i.locals||{}},function(e,t,n){"use strict";var o,i=function(){return void 0===o&&(o=Boolean(window&&document&&document.all&&!window.atob)),o},a=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),r=[];function s(e){for(var t=-1,n=0;n<r.length;n++)if(r[n].identifier===e){t=n;break}return t}function c(e,t){for(var n={},o=[],i=0;i<e.length;i++){var a=e[i],c=t.base?a[0]+t.base:a[0],l=n[c]||0,u="".concat(c," ").concat(l);n[c]=l+1;var d=s(u),f={css:a[1],media:a[2],sourceMap:a[3]};-1!==d?(r[d].references++,r[d].updater(f)):r.push({identifier:u,updater:y(f,t),references:1}),o.push(u)}return o}function l(e){var t=document.createElement("style"),o=e.attributes||{};if(void 0===o.nonce){var i=n.nc;i&&(o.nonce=i)}if(Object.keys(o).forEach((function(e){t.setAttribute(e,o[e])})),"function"==typeof e.insert)e.insert(t);else{var r=a(e.insert||"head");if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}return t}var u,d=(u=[],function(e,t){return u[e]=t,u.filter(Boolean).join("\n")});function f(e,t,n,o){var i=n?"":o.media?"@media ".concat(o.media," {").concat(o.css,"}"):o.css;if(e.styleSheet)e.styleSheet.cssText=d(t,i);else{var a=document.createTextNode(i),r=e.childNodes;r[t]&&e.removeChild(r[t]),r.length?e.insertBefore(a,r[t]):e.appendChild(a)}}function h(e,t,n){var o=n.css,i=n.media,a=n.sourceMap;if(i?e.setAttribute("media",i):e.removeAttribute("media"),a&&btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleSheet)e.styleSheet.cssText=o;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(o))}}var p=null,v=0;function y(e,t){var n,o,i;if(t.singleton){var a=v++;n=p||(p=l(t)),o=f.bind(null,n,a,!1),i=f.bind(null,n,a,!0)}else n=l(t),o=h.bind(null,n,t),i=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return o(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;o(e=t)}else i()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=i());var n=c(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var o=0;o<n.length;o++){var i=s(n[o]);r[i].references--}for(var a=c(e,t),l=0;l<n.length;l++){var u=s(n[l]);0===r[u].references&&(r[u].updater(),r.splice(u,1))}n=a}}}},function(e,t,n){(t=n(4)(!1)).push([e.i,".simple-tree-table-icon{display:inline-block;width:1.5em;line-height:1.5em;margin:0.1em;background-color:#eee;text-align:center;cursor:pointer}.simple-tree-table-opened .simple-tree-table-icon:after{content:'-'}.simple-tree-table-closed .simple-tree-table-icon:after{content:'+'}\n",""]),e.exports=t},function(e,t,n){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=function(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var i=(r=o,s=btoa(unescape(encodeURIComponent(JSON.stringify(r)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(c," */")),a=o.sources.map((function(e){return"/*# sourceURL=".concat(o.sourceRoot||"").concat(e," */")}));return[n].concat(a).concat([i]).join("\n")}var r,s,c;return[n].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,o){"string"==typeof e&&(e=[[null,e,""]]);var i={};if(o)for(var a=0;a<this.length;a++){var r=this[a][0];null!=r&&(i[r]=!0)}for(var s=0;s<e.length;s++){var c=[].concat(e[s]);o&&i[c[0]]||(n&&(c[2]?c[2]="".concat(n," and ").concat(c[2]):c[2]=n),t.push(c))}},t}},function(e,t,n){"use strict";n.r(t);var o=n(0),i=n.n(o);function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function s(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}var c=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a(this,e),this.opts={type:t.type||"session",key:t.key},this.inst=new l(this.opts)}return s(e,[{key:"get",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return this.inst.get(this.opts.key)||e}},{key:"set",value:function(e){this.inst.set(this.opts.key,e)}},{key:"remove",value:function(){this.inst.remove(this.opts.key)}}]),e}(),l=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a(this,e),this.storage={local:window.localStorage,session:window.sessionStorage}[t.type]}return s(e,[{key:"get",value:function(e){try{var t=this.storage.getItem(e);return t?JSON.parse(t):null}catch(e){return console.log(e),null}}},{key:"set",value:function(e,t){try{this.storage.setItem(e,JSON.stringify(t))}catch(e){console.log(e)}}},{key:"remove",value:function(e){this.storage.removeItem(e)}}]),e}(),u=(n(1),"simple-tree-table");function d(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function f(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var h={expander:null,collapser:null,opened:"all",margin:20,iconPosition:"> :first-child",iconTemplate:"<span />",store:null,storeKey:null},p=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};d(this,e),this.options=i.a.extend({},h,n),this.$table=i()(t),this.$expander=i()(this.options.expander),this.$collapser=i()(this.options.collapser),this.options.store&&this.options.storeKey&&(this.store=new c({type:this.options.store,key:this.options.storeKey})),this.init(),this.load()}var t,n,o;return t=e,o=[{key:"getDefaults",value:function(){return h}},{key:"setDefaults",value:function(e){return i.a.extend(h,e)}}],(n=[{key:"init",value:function(){this.$table.addClass(u),this.build(),this.unbind(),this.bind()}},{key:"destroy",value:function(){var e=function(e,t){var n=new RegExp("".concat(u,"(-\\S+)?"),"g");return(t.match(n)||[]).join(" ")};this.$table.removeClass(e),this.nodes().removeClass(e),this.$table.find(".".concat(u,"-icon")).remove(),this.unbind()}},{key:"build",value:function(){var e=this;this.nodes().not("[data-node-depth]").each((function(t,n){var o=i()(n),a=e.depth(o);o.data("node-depth",a),1==a&&o.addClass("".concat(u,"-root"))})),this.nodes().filter((function(t,n){return 0==i()(n).find(e.options.iconPosition).find(".".concat(u,"-handler")).length})).each((function(t,n){var o=i()(n),a=e.depth(o),r=e.options.margin*(a-1),s=i()(e.options.iconTemplate).addClass("".concat(u,"-handler ").concat(u,"-icon")).css("margin-left","".concat(r,"px"));o.find(e.options.iconPosition).prepend(s)})),this.nodes().not(".".concat(u,"-empty, .").concat(u,"-opened, .").concat(u,"-closed")).each((function(t,n){var o=i()(n);e.hasChildren(o)?e.opensDefault(o)?o.addClass("".concat(u,"-opened")):o.addClass("".concat(u,"-closed")):o.addClass("".concat(u,"-empty"))})),this.nodes().filter(".".concat(u,"-opened")).each((function(t,n){e.show(i()(n))})),this.nodes().filter(".".concat(u,"-closed")).each((function(t,n){e.hide(i()(n))}))}},{key:"opensDefault",value:function(e){var t=this.options.opened;return t&&("all"==t||-1!=t.indexOf(e.data("node-id")))}},{key:"bind",value:function(){var e=this;this.$expander.on("click.".concat(u),(function(t){e.expand()})),this.$collapser.on("click.".concat(u),(function(t){e.collapse()})),this.$table.on("click.".concat(u),"tr .".concat(u,"-handler"),(function(t){var n=i()(t.currentTarget).closest("tr");n.hasClass("".concat(u,"-opened"))?e.close(n):e.open(n)}))}},{key:"unbind",value:function(){this.$expander.off(".".concat(u)),this.$collapser.off(".".concat(u)),this.$table.off(".".concat(u," node:open node:close"))}},{key:"expand",value:function(){var e=this;this.nodes().each((function(t,n){e.show(i()(n))})),this.save()}},{key:"collapse",value:function(){var e=this;this.nodes().each((function(t,n){e.hide(i()(n))})),this.save()}},{key:"nodes",value:function(){return this.$table.find("tr[data-node-id]")}},{key:"depth",value:function(e){var t=e.data("node-depth");if(t)return t;var n=this.findByID(e.data("node-pid"));return 0!=n.length?this.depth(n)+1:1}},{key:"open",value:function(e){this.show(e),this.save(),e.trigger("node:open",[e])}},{key:"show",value:function(e){e.hasClass("".concat(u,"-empty"))||(e.removeClass("".concat(u,"-closed")).addClass("".concat(u,"-opened")),this.showDescs(e))}},{key:"showDescs",value:function(e){var t=this;this.findChildren(e).each((function(e,n){var o=i()(n);o.show(),o.hasClass("".concat(u,"-opened"))&&t.showDescs(o)}))}},{key:"close",value:function(e){this.hide(e),this.save(),e.trigger("node:close",[e])}},{key:"hide",value:function(e){e.hasClass("".concat(u,"-empty"))||(e.removeClass("".concat(u,"-opened")).addClass("".concat(u,"-closed")),this.hideDescs(e))}},{key:"hideDescs",value:function(e){var t=this;this.findChildren(e).each((function(e,n){var o=i()(n);o.hide(),t.hideDescs(o)}))}},{key:"hasChildren",value:function(e){return 0!=this.findChildren(e).length}},{key:"findChildren",value:function(e){var t=e.data("node-id");return this.$table.find('tr[data-node-pid="'.concat(t,'"]'))}},{key:"findDescendants",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],o=this.findChildren(e);return n.push(o),o.each((function(e,o){t.findDescendants(i()(o),n)})),n}},{key:"findByID",value:function(e){return this.$table.find('tr[data-node-id="'.concat(e,'"]'))}},{key:"openByID",value:function(e){this.open(this.findByID(e))}},{key:"closeByID",value:function(e){this.close(this.findByID(e))}},{key:"load",value:function(){var e=this;if(this.store){var t=this.store.get();t&&(this.nodes().each((function(t,n){e.show(i()(n))})),this.nodes().filter((function(e,n){return-1!=t.indexOf(i()(n).data("node-id"))})).each((function(t,n){e.hide(i()(n))})))}}},{key:"save",value:function(){if(this.store){var e=this.nodes().filter(".".concat(u,"-closed")).map((function(e,t){return i()(t).data("node-id")})).get();this.store.set(e)}}}])&&f(t.prototype,n),o&&f(t,o),e}();i.a.fn.simpleTreeTable=function(e){return this.each((function(t,n){var o=i()(n);o.data(u)&&o.data(u).destroy(),o.data(u,new p(o,e))}))},i.a.SimpleTreeTable=p}]);
  49.  
  50.  
  51. (function () {
  52.     'use strict';
  53.  
  54.     const Utils = {
  55.         // 检查字符串是否为URL
  56.         isUrl: function (string) {
  57.             var regexp = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
  58.             return regexp.test(string);
  59.         },
  60.  
  61.         // 检查是否是图片链接
  62.         isImg: function (pathImg) {
  63.             // var regexp = /^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?\/([\w#!:.?+=&%@!\-\/])*\.(gif|jpg|jpeg|png|GIF|JPG|PNG)([\w#!:.?+=&%@!\-\/])?/;
  64.             let regexp = /\.(ico|bmp|gif|jpg|jpeg|png|svg|webp|GIF|JPG|PNG|WEBP|SVG)([\w#!:.?+=&%@!\-\/])?/i
  65.             return regexp.test(pathImg);
  66.         },
  67.         // 检验内容是否是json格式的内容
  68.         isJSON: function (str) {
  69.             try {
  70.                 JSON.parse(str)
  71.                 return true
  72.             } catch (e) {
  73.                 console.log("is not json", e)
  74.                 return false
  75.             }
  76.         },
  77.         // 获取数据类型
  78.         getType: function (value) {
  79.             return Object.prototype.toString.call(value).match(/\s(.+)]/)[1].toLowerCase();
  80.         },
  81.         // 获取数组中对象key最多的对象
  82.         findMaxKeysObject: function (arr) {
  83.             let maxKeysCount = 0, maxKeysObject
  84.             for (let obj of arr) {
  85.                 let keysCount = Object.keys(obj).length
  86.                 if (keysCount > maxKeysCount) {
  87.                     maxKeysCount = keysCount
  88.                     maxKeysObject = obj
  89.                 }
  90.             }
  91.             return maxKeysObject
  92.         },
  93.         // 随机rgb颜色
  94.         rgbaColor: (opacity) => `rgba(${Math.random() * 256}, ${Math.random() * 256}, ${Math.random() * 256}, ${opacity})`
  95.     }
  96.  
  97.     // jquery.json-viewer 插件 开始
  98.     // 解决和原网页jquery版本冲突
  99.     var _jQuery = jQuery.noConflict(true);
  100.     (function ($) {
  101.         /**
  102.          * 检查 arg 是否为至少包含 1 个元素的数组或至少包含 1 个键的字典
  103.          */
  104.         function isCollapsable(arg) {
  105.             return arg instanceof Object && Object.keys(arg).length > 0;
  106.         }
  107.  
  108.         /**
  109.          * 将 JSON 对象转换为 HTML 表示形式
  110.          * @return string
  111.          */
  112.         function json2html(json, parentPath = '') {
  113.             let html = '', type = Utils.getType(json)
  114.             switch (type) {
  115.                 case 'array':
  116.                 case 'object':
  117.                     let len = json.length || Object.keys(json).length;
  118.                     if (len > 0) {
  119.                         html += `<span class="json-brackets ${type == 'array' ? 'json-square-brackets' : 'json-curly-brackets'}">`;
  120.                         html += type === 'array' ? '[</span><ol class="json-array">' : '{</span><ul class="json-object">';
  121.                         for (var key in json) {
  122.                             if (json.hasOwnProperty(key)) {
  123.                                 let comma = --len > 0 ? ',' : '',
  124.                                     jsonPath = parentPath + '.' + key,
  125.                                     collapse = isCollapsable(json[key]) ? '<a href class="json-toggle"></a>' : '',
  126.                                     res = json2html(json[key], jsonPath)
  127.                                 let toHtml = type === 'array' ? res : `<span class="json-key">"${key}"</span>: ${res}`
  128.                                 html += [`<li json-path="${jsonPath}">`, collapse, toHtml, comma, '</li>'].join('')
  129.                             }
  130.                         }
  131.  
  132.                         if (type === 'array') {
  133.                             html += `</ol><span class="json-brackets json-square-brackets">]</span>`
  134.                         } else {
  135.                             html += `</ul><span class="json-brackets json-curly-brackets">}</span>`
  136.                         }
  137.                     } else {
  138.                         html += `<span class="json-brackets ${type == 'array' ? 'json-square-brackets' : 'json-curly-brackets'}">`
  139.                         html += (type === 'array') ? '[]' : '{}'
  140.                         html += '</span>'
  141.                     }
  142.                     break
  143.                 default:
  144.                     /* Escape tags */
  145.                     json = type === 'string' ? json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') : json
  146.                     if (Utils.isUrl(json)) {
  147.                         html += `<a target="_blank" href="${json}" class="json-string">"${json}"</a>`;
  148.                     } else {
  149.                         json = type === 'string' ? `"${json}"` : json
  150.                         html += `<span class="json-${type}">${json}</span>`;
  151.                     }
  152.                     break
  153.             }
  154.             return html;
  155.         }
  156.  
  157.         $.fn.jsonViewer = function (json, jsonpFn) {
  158.             return this.each(function () {
  159.                 /* Transform to HTML */
  160.                 var html = json2html(json);
  161.                 /** is JSONP */
  162.                 if (jsonpFn !== undefined && jsonpFn !== null) {
  163.                     html = `<div class="jsonp">${jsonpFn}(</div>${html}<div class="jsonp">)</div>`
  164.                 }
  165.                 /* Insert HTML in target DOM element */
  166.                 $(this).html(html);
  167.  
  168.                 /* Bind click on toggle buttons */
  169.                 $(this).off('click');
  170.                 $(this).on('click', 'a.json-toggle', function () {
  171.                     var target = $(this).toggleClass('collapsed').siblings('ul.json-object, ol.json-array');
  172.                     target.toggle();
  173.                     if (target.is(':visible')) {
  174.                         target.siblings('.json-placeholder').remove();
  175.                     } else {
  176.                         var count = target.children('li:not([class*="hidden"])').length;
  177.                         var placeholder = count + (count > 1 ? ' items' : ' item');
  178.                         target.after('<a href class="json-placeholder">' + placeholder + '</a>');
  179.                     }
  180.                     return false;
  181.                 });
  182.  
  183.                 /* Simulate click on toggle button when placeholder is clicked */
  184.                 $(this).on('click', 'a.json-placeholder', function () {
  185.                     $(this).siblings('a.json-toggle').click();
  186.                     $(this).siblings('a.json-placeholder').remove();
  187.                     return false;
  188.                 });
  189.             });
  190.         };
  191.     })(_jQuery);
  192.     // jquery.json-viewer 插件 结束
  193.  
  194.     (function ($) {
  195.         let docType = [
  196.             "application/vnd.api+json",
  197.             "application/javascript",
  198.             "application/json",
  199.             "text/javascript",
  200.             "text/plain",
  201.             "text/json",
  202.         ], contentType = document.contentType
  203.         if (!docType.includes(contentType)) {
  204.             return
  205.         }
  206.  
  207.         var source = $('pre').first();
  208.         if (source.length === 0) {
  209.             let text = document.body.innerText
  210.             if (!Utils.isJSON(text)) {
  211.                 return
  212.             }
  213.  
  214.             let pre = document.createElement('pre')
  215.             pre.innerText = text
  216.             document.body.insertAdjacentHTML('afterbegin', pre);
  217.             source = $(pre)
  218.         }
  219.  
  220.         let rawText = source.text()
  221.         if (!rawText) {
  222.             return
  223.         }
  224.  
  225.         // 判断是否为jsonp格式
  226.         window.globalJSONPFun = null
  227.         let tokens = rawText.match(/^([^\s(]*)\s*\(([\s\S]*)\)\s*;?$/)
  228.         if (tokens && tokens[1] && tokens[2]) {
  229.             globalJSONPFun = tokens[1]
  230.             rawText = tokens[2]
  231.         }
  232.  
  233.         if (!Utils.isJSON(rawText)) {
  234.             return
  235.         }
  236.  
  237.         // 添加样式
  238.         GM_addStyle(GM_getResourceText('swalStyle'))
  239.         $("head").append('<link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">')
  240.             .append('<script src="//unpkg.com/layui@2.7.6/dist/layui.js">')
  241.  
  242.         GM_addStyle(`
  243.             :root{
  244.             --ft12: 12px;
  245.             --ft13: 13px;
  246.             --ft14: 14px;
  247.             --color-e9: #e9e9e9;
  248.             --color-gray: #CCC;
  249.             --tab-color: #ECECEC;
  250.             }
  251.             body, html{
  252.                 margin: 0;
  253.                 padding: 0;
  254.                 font-size: var(--ft14);
  255.             }
  256.             td{
  257.                 font-size: var(--ft14);
  258.             }
  259.             li::marker {
  260.                 content: '';
  261.             }
  262.             input:focus, select:focus {
  263. 				outline: 0;
  264. 			}
  265.             .hidden{
  266.                 display: none !important;
  267.             }
  268.             .jsonp{
  269.                 color: #93983A;
  270.             }
  271.             .dark .jsonp{
  272.                 color: #F1D700;
  273.             }
  274.             .scroll-top{
  275.                 width: 48px;
  276.                 height: 48px;
  277.                 z-index: 999;
  278.                 position: fixed;
  279.                 right: 30px;
  280.                 bottom: 30px;
  281.                 display: none;
  282.                 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA39JREFUaEPtmV2ITVEUx39rJjT5KPKC5DPKK6UGZZ7Eq0whNUiKFPfcKW9mnmjm7ssLaSLygEx5xItMESnKC4V8FV4IJUkyS+fMHZ07zjl3733PvT6a+3S6Z629/r+99sfa+wgpPw1YDtxLe9/k/1eI4X5STMkSokXWNlloYjgpMZSmIxPgbxBfS8M4QK0eavT78Qw0uodrtd+wDGjAMqBcEVAQw6NaYnzeNwRAi2xBOQlMrYj6jLJTygz6iMzyyR1Ai+xCGUgMqnTmDZErgBYoIJjMXhY2S4mLeWUiNwAt0INwyEqY0iNleq1saxjlAqAB64BrToKEHVLijJNPgnHdALqPaUziOsoKRzGfaKFD+nng6FdlXj+Ay9AZq1Q5L2W2/jEA3c8sWqOSe3aCiK/A3cr/K4G2FKEbxXDZF6KuDKROXKWXFvqlxJdQmBaZzDDdKZP8thhW/RmAgKfA4qrgSq+U6UkSlAostEuJOz4Q3hnQgPXAld+CCh1pB5DogKTcSBAalhpHmw1wGtgxJuhbMczJEqIBbxLmzFUxbGg2gCYE9AVADF6jwctJDzKd73xI7DG/IQQTmCFH+OiaBT+AAyykhWcpBZv7JA4bGmaRHOV5cwBqX7mc5Qe9coyX0TK6n/m0RnVSV4bA1KuTLCi/DBTYhHCpRm+Fe8Bo/b8JmJxp71lqOwNowB7guGuqLe33iuGEpW1k5gTgVDK7qIjbZmyESU1aA1TOuA99dTn5CQulxAsbH3uAeqpOGyXVNrvEcMrGzR4gIGnjsonhYzMkhg4bx3EAm17ysGlIBh4DSzzE+LgMiGG3jaPLEApv2Q7YNFq3jcOmZg9gt/u6aH8PzEx0aGWu9PHapjFrgKimCaIDTHiQqf4pNxHW2AT8ZaMEiZdgSreUKdm25QRQgRi7nIZzI7xZcPmeNkAL5xjmVpVQx1049HUGiCAKFBH6K8GjFUP3MIW2CGJpjd4bFEPnmM54grA761tYWpteAJXgy1A6w6p09Opcu1nED7ZlAcQP/BqwGZjORAblMO9sh03czhsgLZgW6EL4JoYL0b0RTArPBfFnH6G5ZyAVYKTkGBlWQVR2bxDDgvjzvwQQXqGsDQ/sGkTXKdHzOECsB3LtjdjKMjqE/qMMjJwn5olh+98+hM6gvAqXy0aN+4Yuo/HG/weAPmC1GNrzHDbxtn4Coc0pQNdM3UAAAAAASUVORK5CYII=)
  283.             }
  284.             /** 工具栏样式 START **/
  285.             .flex-container{
  286.                 z-index: 10;
  287.                 position: fixed;
  288.                 width: 100vw;
  289.                 height: 100vh;
  290.                 display: flex;
  291.                 flex-direction: column;
  292.             }
  293.             .tabs, .toolbar{
  294.                 display: flex;
  295.                 line-height: 28px;
  296.                 background-color: var(--tab-color);
  297.                 border-bottom: 1px solid var(--color-gray);
  298.             }
  299.             .toolbar{
  300.                 line-height: 23px;
  301.             }
  302.             .searchbox{
  303.                 display: flex;
  304.                 flex-grow: 1;
  305.             }
  306.             .toolbar input{
  307.                 flex-grow: 1;
  308.                 border: none;
  309.                 outline: none;
  310.                 font-size: var(--ft12);
  311.                 padding-left: 23px;
  312.                 background-size: 12px;
  313.                 background-repeat: no-repeat;
  314.                 background-position: 7px center;
  315.                 background-image: url(data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljCiAgIC0gTGljZW5zZSwgdi4gMi4wLiBJZiBhIGNvcHkgb2YgdGhlIE1QTCB3YXMgbm90IGRpc3RyaWJ1dGVkIHdpdGggdGhpcwogICAtIGZpbGUsIFlvdSBjYW4gb2J0YWluIG9uZSBhdCBodHRwOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPgo8c3ZnIGZpbGw9InJnYmEoMTM1LCAxMzUsIDEzNywgMC45KSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTIgMTIiPgogIDxwYXRoIGZpbGw9ImNvbnRleHQtZmlsbCIgb3BhY2l0eT0iLjQiIGQ9Ik01IDkuMmwyIDEuNlY2LjFMOC41NSA0aC01LjFMNSA2LjF2My4xeiIvPgogIDxwYXRoIGZpbGw9ImNvbnRleHQtZmlsbCIgZD0iTTEuMTggMi42QTEgMSAwIDAgMSAyIDFIMTBhMSAxIDAgMCAxIC44IDEuNkw4IDYuNHY0LjgyYzAgLjYzLS43Mi45OC0xLjIyLjZsLTIuNS0xLjk5QS43NS43NSAwIDAgMSA0IDkuMjVWNi40MUwxLjE4IDIuNnpNMiAyTDUgNi4wOXYzLjA0bDIgMS41OVY2LjA5TDEwLjAxIDJIMnoiLz4KPC9zdmc+Cg==);
  316.             }
  317.             .clear {
  318.                 flex: 0 0 auto;
  319.                 align-self: center;
  320.                 margin: 0 4px;
  321.                 padding: 0;
  322.                 border: 0;
  323.                 width: 16px;
  324.                 height: 16px;
  325.                 background-color: transparent;
  326.                 background-image: url(data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljCiAgIC0gTGljZW5zZSwgdi4gMi4wLiBJZiBhIGNvcHkgb2YgdGhlIE1QTCB3YXMgbm90IGRpc3RyaWJ1dGVkIHdpdGggdGhpcwogICAtIGZpbGUsIFlvdSBjYW4gb2J0YWluIG9uZSBhdCBodHRwOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9ImNvbnRleHQtZmlsbCIgZmlsbC1vcGFjaXR5PSJjb250ZXh0LWZpbGwtb3BhY2l0eSI+CiAgPHBhdGggZD0iTTYuNTg2IDhsLTIuMjkzIDIuMjkzYTEgMSAwIDAgMCAxLjQxNCAxLjQxNEw4IDkuNDE0bDIuMjkzIDIuMjkzYTEgMSAwIDAgMCAxLjQxNC0xLjQxNEw5LjQxNCA4bDIuMjkzLTIuMjkzYTEgMSAwIDEgMC0xLjQxNC0xLjQxNEw4IDYuNTg2IDUuNzA3IDQuMjkzYTEgMSAwIDAgMC0xLjQxNCAxLjQxNEw2LjU4NiA4ek04IDBhOCA4IDAgMSAxIDAgMTZBOCA4IDAgMCAxIDggMHoiLz4KPC9zdmc+Cg==);
  327.             }
  328.             .tabs-item{
  329.                 border-width: 3px;
  330.                 border-top: 3px solid var(--tab-color);
  331.             }
  332.             .tabs-item:hover{
  333.                 border-top-color: #c3c3c6;
  334.             }
  335.             .tabs-item, .toolbar-item{
  336.                 cursor: pointer;
  337.                 padding: 0 10px;
  338.                 font-size: var(--ft12);
  339.             }
  340.             .tabs-item.active{
  341.                 color: #0060df;
  342.                 border-top-color: #0060df;
  343.                 background-color: var(--color-e9);
  344.             }
  345.             .tabs-item:hover, .toolbar-item:hover{
  346.                 // background-color: var(--color-e9);
  347.                 background-color: #D4D4D4
  348.             }
  349.             /** 工具栏样式 END **/
  350.             /** JSON 格式化样式 START **/
  351.             ul.json-object,
  352.             ul.json-array {
  353.                 margin: 0 0 0 2px;
  354.                 list-style-type: none;
  355.                 border-left: 1px dotted #5D6D7E;
  356.                 padding-left: 24px;
  357.             }
  358.             .json-brackets {
  359.                 font-weight: 700;
  360.             }
  361.             .json-key {
  362.                 color: #910F93;
  363.                 cursor: pointer;
  364.             }
  365.             .json-string, .json-string a{
  366.                 color: #4B8A4C;
  367.             }
  368.             .json-number{
  369.                 color: #1a01cc;
  370.             }
  371.             .json-boolean{
  372.                 color: #905;
  373.             }
  374.             .json-null {
  375.                 color: #0031BC;
  376.             }
  377.             a.json-toggle {
  378.                 position: rElative;
  379.                 color: inherit;
  380.                 opacity: 0.2;
  381.                 text-decoration: none;
  382.             }
  383.             a.json-toggle:hover {
  384.                 opacity: 0.35;
  385.             }
  386.             a.json-toggle:active {
  387.                 opacity: 0.5;
  388.             }
  389.             a.json-toggle:focus {
  390.                 outline: none;
  391.             }
  392.             a.json-toggle:before {
  393.                 top: 2.5px;
  394.                 left: -15px;
  395.                 position: absolute;
  396.                 content: "";
  397.                 display: block;
  398.                 width: 0;
  399.                 height: 0;
  400.                 border-style: solid;
  401.                 border-width: 5px 0 5px 8px;
  402.                 border-color: transparent transparent transparent currentColor;
  403.                 transform: rotate(90deg);
  404.             }
  405.             a.json-toggle.collapsed:before {
  406.                 transform: rotate(0deg);
  407.             }
  408.             a.json-placeholder {
  409.                 color: var(--color-gray);
  410.                 font-size: var(--ft12);
  411.                 padding: 0 1em;
  412.                 text-decoration: none;
  413.             }
  414.             a.json-placeholder:hover {
  415.                 text-decoration: underline;
  416.             }
  417.             .json-curly-brackets {
  418.                 color: #6D9331;
  419.             }
  420.             .json-square-brackets{
  421.                 color: #8E9331;
  422.             }
  423.             /**浅色主题 START **/
  424.             .light .json-key {
  425.                 color: #0451A5;
  426.             }
  427.             .light .json-string, .light .json-string a{
  428.                 color: #A31515;
  429.             }
  430.             .light .json-number{
  431.                 color: #0B7500;
  432.             }
  433.             .light .json-boolean{
  434.                 color: #0000FF;
  435.             }
  436.             .light .json-null {
  437.                 color: #0055FF;
  438.             }
  439.             /**浅色主题 END **/
  440.             /** 暗黑主题 START **/
  441.             body.dark{
  442.                 background-color: #333333;
  443.             }
  444.             .dark li, .dark pre{
  445.                 color: var(--color-gray);
  446.             }
  447.             .dark .json-toggle {
  448.                 opacity: 0.35;
  449.             }
  450.             .dark .json-toggle:hover {
  451.                 opacity: 0.5;
  452.             }
  453.             .dark .json-curly-brackets {
  454.                 color: #CE70D6;
  455.             }
  456.             .dark .json-square-brackets{
  457.                 color: #F1D700;
  458.             }
  459.             .dark .json-key {
  460.                 color: #9CDCFE;
  461.             }
  462.             .dark .json-string, .dark .json-string a{
  463.                 color: #CE9178;
  464.             }
  465.             .dark .json-number{
  466.                 color: #B5CEA8;
  467.             }
  468.             .dark .json-boolean{
  469.                 color: #358CD6;
  470.             }
  471.             .dark .json-null {
  472.                 color: #569CD6;
  473.             }
  474.             .dark jmnode {
  475.                 color: #7CDCFE !important;
  476.             }
  477.             /** 暗黑主题 END **/
  478.             /** JSON 格式化样式 END **/
  479.             /** 脑图样式 START **/
  480.             #jmContainer{
  481.                 width: 100vw; 
  482.                 height: calc(100vh - 57px);
  483.             }
  484.             jmnode{
  485.                 display: flex;
  486.                 align-items: center;
  487.                 padding: 0 7px 0 22px;
  488.             }
  489.             jmnode{
  490.                 color: #475872 !important;
  491.                 box-shadow: none !important;
  492.                 background-color: transparent !important;
  493.             }
  494.             jmnode:hover{
  495.                 text-shadow: 0px 0px 1px currentColor;
  496.             }
  497.             jmnode.root {
  498.                 padding: 0;
  499.                 color: transparent !important;
  500.             }
  501.             jmnode:not(.root)::before, jmnode.root::before{
  502.                 content: " ";
  503.                 top: 50%;
  504.                 position: absolute;
  505.                 border-radius: 50%;
  506.                 transform: translateY(-50%);
  507.             }
  508.             jmnode:not(.root)::before{
  509.                 left: 0;
  510.                 width: 15px;
  511.                 height: 15px;
  512.                 background-color: ${Utils.rgbaColor(0.5)};
  513.             }
  514.             jmnode.root::before{
  515.                 left: 50%;
  516.                 width: 18px;
  517.                 height: 18px;
  518.                 transform: translate(-18px, -50%);
  519.                 background-color: ${Utils.rgbaColor(0.5)};
  520.             }
  521.             jmexpander{
  522.                 margin-top: 1px;
  523.                 line-height: 9px;
  524.                 background-color: #dfdfdf;
  525.             }
  526.             .mind-array{
  527.                 opacity: 0.6;
  528.                 font-size: var(--ft12);
  529.                 padding-left: 5px;
  530.             }
  531.             /** 脑图样式 END **/
  532.             /** 容器样式 START **/
  533.             .tabs-container{
  534.                 overflow: auto;
  535.                 line-height: 1.4;
  536.                 font-family: monospace;
  537.             }
  538.             .tabs-container > div{
  539.                 display: none;
  540.             }
  541.             .tabs-container > div.active{
  542.                 display: block;
  543.             }
  544.             .tabs-container #formatContainer{
  545.                 padding: 10px;
  546.             }
  547.             .tabs-container #rawTextContainer{
  548.                 padding: 0 10px;
  549.             }
  550.             .tabs-container #rawTextContainer pre{
  551.                 display: block !important;
  552.                 overflow-wrap: break-word;
  553.                 white-space: pre-wrap;
  554.             }
  555.             /** 容器样式 END **/
  556.             
  557.             .layui-layer-tips{
  558.                 width: auto !important;
  559.             }
  560.             .tabs .selectbox{
  561.                 position: absolute;
  562.                 right: 200px;
  563.                 display: flex;
  564.                 font-size: var(--ft13);
  565.             }
  566.             /** 表格 START **/
  567.             table {
  568.                 width: -webkit-fill-available;
  569. 				margin-left: 20px;
  570.                 border-collapse: collapse;
  571. 			}
  572.             table tr:hover{
  573.                 background-color: #f0f9fe;
  574.             }
  575.             .dark table tr:hover{
  576.                 background-color: #353B48
  577.             }
  578.             table tr.selected td, table tr.selected td a{
  579.                 color: #fff !important;
  580.                 background-color: #3875d7;
  581.             }
  582.             table tbody tr td:first-child{
  583.                 width: 120px;
  584.             }
  585.             
  586. 			.simple-tree-table-icon{
  587.                 color: #000;
  588.                 opacity: 0.2;
  589.                 width: 0 !important;
  590. 				margin: 0 !important;
  591.                 line-height: 0 !important;
  592. 			}
  593.             .simple-tree-table-icon:hover {
  594.                 opacity: 0.35;
  595.             }
  596.             .simple-tree-table-icon:active {
  597.                 opacity: 0.5;
  598.             }
  599.             .simple-tree-table-icon:after{
  600.                 content: "" !important;
  601.             }
  602.             .simple-tree-table-icon:before {
  603.                 top: 0.5px;
  604.                 left: -15px;
  605.                 position: relative;
  606.                 content: "";
  607.                 width: 0;
  608.                 height: 0;
  609.                 display: none;
  610.                 border-style: solid;
  611.                 border-width: 5px 0 5px 8px;
  612.                 border-color: transparent transparent transparent currentColor;
  613.                 transform: rotate(90deg);
  614.             }
  615.             .simple-tree-table-opened .simple-tree-table-icon:before {
  616.                 display: block;
  617.             }
  618.             .simple-tree-table-closed .simple-tree-table-icon:before {
  619.                 display: block;
  620.                 transform: rotate(0deg);
  621.             }
  622.             .dark .simple-tree-table-icon{
  623.                 color: #FFF;
  624.                 opacity: 0.5;
  625.             }
  626.             .tree-len{
  627.                 color: var(--color-gray);
  628.                 font-size: var(--ft13);
  629.             }
  630.             textarea:focus {
  631. 				outline: 0;
  632. 			}
  633.             .inputJson, .fetchApi{
  634.                 cursor: pointer;
  635.                 color: #0060df;
  636.                 margin-left: 15px;
  637.             }
  638.             /** 表格 END **/
  639.             .httpRequest{
  640.                 padding: 20px;
  641.             }
  642.             .httpRequest input,
  643. 			.httpRequest select {
  644. 				border-radius: 0;
  645. 				padding-left: 10px;
  646. 				border: 1px solid var(--color-gray);
  647. 			}
  648. 			.requestbox,
  649. 			.textarea {
  650. 				width: 700px;
  651. 				display: flex;
  652. 			}
  653. 			.requestbox {
  654. 				height: 35px;
  655. 				margin-bottom: 15px;
  656. 			}
  657. 			.textarea input {
  658. 				flex-grow: 1;
  659. 				height: 30px;
  660. 			}
  661. 			.requestbox input {
  662. 				flex-grow: 1;
  663.  
  664. 			}
  665. 			.requestbox button {
  666. 				cursor: pointer;
  667. 				padding: 0 15px;
  668. 				border: 1px solid var(--color-gray);
  669. 			}
  670. 			.requestbox button:active {
  671. 				background-color: #cfcfcf;
  672. 			}
  673.         `)
  674.  
  675.         source.hide()
  676.         // 将内容用eval函数处理下
  677.         try {
  678.             window.globalJSON = eval(`(${rawText})`);
  679.         } catch (e) {
  680.             window.globalJSON = JSON.parse(rawText);
  681.         }
  682.  
  683.         $("body").addClass('dark').append(`
  684.         <div class="scroll-top"></div>
  685.         <div class="flex-container">
  686.             <div class="panel">
  687.                 <div class="tabs">
  688.                     <div class="tabs-item btn active" id="format">JSON格式化</div>
  689.                     <div class="tabs-item btn" id="viewJsonMind">JSON脑图</div>
  690.                     <div class="tabs-item btn" id="viewRawText">原始数据</div>
  691.                     <div class="selectbox">
  692.                         <div class="formatStyle">
  693.                             <label>风格:</label>
  694.                             <select>
  695.                                 <option value="default">默认</option>
  696.                                 <option value="treaTable">表格</option>
  697.                             </select>
  698.                         </div>
  699.                         <div class="theme" style="margin: 0 15px">
  700.                             <label>主题: </label>
  701.                             <select>
  702.                                 <option value="default">默认</option>
  703.                                 <option value="light">浅色</option>
  704.                                 <option value="dark">暗黑</option>
  705.                             </select>
  706.                         </div>
  707.                         <span class="inputJson">JSON 输入</span>
  708.                         <span class="fetchApi">HTTP 请求</span>
  709.                     </div>
  710.                 </div>
  711.                 <div class="toolbar">
  712.                     <div class="toolbar-item btn" id="saveJson">保存</div>
  713.                     <div class="toolbar-item btn" id="copyJson">复制</div>
  714.                     <div class="toolbar-item btn" id="collapseAll">全部折叠</div>
  715.                     <div class="toolbar-item btn" id="expandAll">全部展开</div>
  716.                     <div class="toolbar-item btn" id="jsoncrack" style="display: none;">JSON Crack</div>
  717.                     <div class="toolbar-item btn" id="beautify" style="display: none;">美化输出</div>
  718.                     <div class="searchbox">
  719.                         <input type="text" placeholder="过滤 JSON "/>
  720.                         <button class="clear" hidden></button>
  721.                     </div>
  722.                 </div>
  723.             </div>
  724.             <div class="tabs-container">
  725.                 <div class="active" id="formatContainer"></div>
  726.                 <div id="jmContainer"></div>
  727.                 <div id="rawTextContainer"><pre></pre></div>
  728.             </div>
  729.         </div>`)
  730.  
  731.         let btnEvent = {
  732.             firstFormat: true,
  733.             isBeautify: false,
  734.             $rawText: $('#rawTextContainer'),
  735.             /**
  736.              * 保存为文件
  737.              */
  738.             download: {
  739.                 download: function (content, filename) {
  740.                     const link = document.createElement("a")
  741.                     link.href = content
  742.                     link.download = filename
  743.                     link.click()
  744.                 },
  745.                 saveJSON: function (text) {
  746.                     // 创建一个 Blob 对象，包含要下载的文本内容
  747.                     const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
  748.                     const url = URL.createObjectURL(blob)
  749.                     let filename = new Date().getTime() + '.json';
  750.                     this.download(url, filename)
  751.                     URL.revokeObjectURL(url);
  752.                 },
  753.                 savePNG: () => jm.shoot(),
  754.             },
  755.             saveJson: function () {
  756.                 if ($('#jmContainer').is(':visible')) {
  757.                     this.download.savePNG()
  758.                 } else {
  759.                     this.download.saveJSON(this.$rawText.text())
  760.                 }
  761.             },
  762.             // 复制JSON文本内容
  763.             copyJson: function () {
  764.                 GM_setClipboard(this.$rawText.text())
  765.                 layer.msg('复制成功', { time: 1500 })
  766.             },
  767.             // 全部折叠
  768.             collapseAll: function () {
  769.                 if ($('#formatContainer').is(':visible')) {
  770.                     try {
  771.                         $('a.json-toggle').not('.collapsed').click()
  772.                     } catch (e) { }
  773.                 } else {
  774.                     jm.collapse_all()
  775.                 }
  776.             },
  777.             // 全部展开
  778.             expandAll: function () {
  779.                 if ($('#formatContainer').is(':visible')) {
  780.                     try {
  781.                         $('a.json-placeholder').click().remove()
  782.                     } catch (e) { }
  783.                 } else {
  784.                     jm.expand_all()
  785.                     jm.scroll_node_to_center(jm.get_root())
  786.                 }
  787.             },
  788.             format: function () { },
  789.             // 显示JSON脑图
  790.             viewJsonMind: function () {
  791.                 jsonMind.init(globalJSON)
  792.                 jm.scroll_node_to_center(jm.get_root())
  793.             },
  794.             // 查看原始JSON内容
  795.             viewRawText: function () {
  796.                 if (this.firstFormat) {
  797.                     this.$rawText.html(source.clone())
  798.                     this.firstFormat = false
  799.                 }
  800.             },
  801.             // 美化
  802.             beautify: function () {
  803.                 this.isBeautify = !this.isBeautify
  804.                 if (this.isBeautify) {
  805.                     let str = JSON.stringify(globalJSON, null, 2)
  806.                     if (globalJSONPFun !== undefined && globalJSONPFun !== null) {
  807.                         str = `${globalJSONPFun}(${str})`
  808.                     }
  809.                     this.$rawText.find('pre').text(str)
  810.                 } else {
  811.                     this.$rawText.html(source.clone())
  812.                 }
  813.             },
  814.             jsoncrack: function () {
  815.                 layer.closeAll()
  816.                 const index = layer.open({
  817.                     type: 1,
  818.                     title: false,
  819.                     maxmin: true,
  820.                     shadeClose: true,
  821.                     area: ['900px', '600px'],
  822.                     content: '<iframe style="width: 100%;height: 100%;border: 0;" id="jsoncrackEmbed" src="https://jsoncrack.feny.ink/widget"></iframe>',
  823.                     success: function (layero) {
  824.                         const jsonCrackEmbed = layero.find('#jsoncrackEmbed')[0]
  825.                         window?.addEventListener("message", () => {
  826.                             console.log(globalJSON)
  827.                             jsonCrackEmbed.contentWindow.postMessage({
  828.                                 json: JSON.stringify(globalJSON)
  829.                             }, "*");
  830.                         });
  831.                     }
  832.                 });
  833.                 layer.full(index);
  834.             },
  835.             init: function () {
  836.                 this.viewRawText()
  837.                 // 按钮点击事件
  838.                 $('.btn').click(e => {
  839.                     const target = e.target, id = target.id
  840.                     if (target.classList.contains('tabs-item')) {
  841.                         let index = $(target).index()
  842.                         $(target).addClass('active').siblings().removeClass("active")
  843.                         $('.tabs-container > div').removeClass("active").eq(index).addClass('active')
  844.  
  845.                         let beautifyEl = $('#beautify'),
  846.                             searchEl = $('.searchbox'),
  847.                             copyJsonEl = $('#copyJson'),
  848.                             jsoncrackEl = $('#jsoncrack'),
  849.                             aEl = $('#collapseAll, #expandAll')
  850.                         id === 'format' ? searchEl.show() : searchEl.hide()
  851.                         id === 'viewJsonMind' ? copyJsonEl.hide() && jsoncrackEl.show() : copyJsonEl.show() && jsoncrackEl.hide()
  852.                         id === 'viewRawText' ? (beautifyEl.show() && aEl.hide()) : (beautifyEl.hide() && aEl.show())
  853.                     }
  854.                     this[id](target)
  855.                 })
  856.  
  857.                 return this
  858.             }
  859.         },
  860.             jsonMind = {
  861.                 isFirst: true,
  862.                 // JSON数据转换为jsMind所需要的数据结构
  863.                 convert: function (json) {
  864.                     let children = []
  865.                     if (typeof json === 'object') {
  866.                         for (let key in json) {
  867.                             let val = json[key],
  868.                                 isArray = Array.isArray(val)
  869.  
  870.                             if (isArray && val.length > 0) {
  871.                                 val = Utils.findMaxKeysObject(val)
  872.                             }
  873.  
  874.                             children.push({
  875.                                 isArray,
  876.                                 chain: key,
  877.                                 id: key + '_' + Math.random(),
  878.                                 topic: `${key}<span class="mind-array">${Utils.getType(json[key])}</span>`,
  879.                                 children: this.convert(val)
  880.                             })
  881.                         }
  882.                     }
  883.                     return children;
  884.                 },
  885.                 // 脑图节点调用链
  886.                 mindChain: function (node) {
  887.                     let chain = node.data.chain
  888.                     if (!node.parent) {
  889.                         return chain
  890.                     }
  891.  
  892.                     let parent = node.parent, parentChain = this.mindChain(parent)
  893.                     chain = parent.data.isArray ? `${parentChain}[0].${chain}` : `${parentChain}.${chain}`
  894.                     return chain
  895.                 },
  896.                 //  显示脑图
  897.                 show: function (json) {
  898.                     let isArr = Array.isArray(json);
  899.                     if (isArr) {
  900.                         if (typeof json[0] !== 'object') {
  901.                             layer.msg('数据结构无法生成脑图', { time: 1000 })
  902.                             return this
  903.                         }
  904.                         json = json[0]
  905.                     }
  906.  
  907.                     if (!this.isFirst) {
  908.                         return this
  909.                     }
  910.  
  911.                     jm.show({
  912.                         "meta": {
  913.                             "name": "JSON脑图",
  914.                             "author": "1220301855@qq.com",
  915.                             "version": "1.0"
  916.                         },
  917.                         "format": "node_tree",
  918.                         /* 数据内容 */
  919.                         "data": {
  920.                             "id": "root",
  921.                             "topic": 'Response',
  922.                             "direction": "left",
  923.                             "children": this.convert(json),
  924.                             "chain": isArr ? 'Response[0]' : 'Response'
  925.                         }
  926.                     })
  927.                     this.isFirst = false
  928.                     return this
  929.                 },
  930.                 // 脑图节点事件
  931.                 event: function () {
  932.                     $("jmnode").on('dblclick mouseover mouseout', function (event) {
  933.                         let that = $(this), node = jm.get_node(that.attr('nodeid'))
  934.                         if (!node.parent) {
  935.                             return
  936.                         }
  937.  
  938.                         switch (event.type) {
  939.                             case 'dblclick':
  940.                                 GM_setClipboard(jsonMind.mindChain(node))
  941.                                 layer.msg('节点路径复制成功', { time: 1500 })
  942.                                 break;
  943.                             case 'mouseover':
  944.                                 let s = `<b>节点路径（双击复制）</b><br/>${jsonMind.mindChain(node)}`
  945.                                 layer.tips(s, that, {
  946.                                     time: 0,
  947.                                     tips: [2, '#2e59a7']
  948.                                 });
  949.                                 break;
  950.                             default:
  951.                                 layer.closeAll()
  952.                                 break;
  953.                         }
  954.                     })
  955.                     return this
  956.                 },
  957.                 collapseOrExpand: function () {
  958.                     $("jmnode").on('click', function () {
  959.                         let node = jm.get_node($(this).attr('nodeid'))
  960.                         jm.toggle_node(node)
  961.                     })
  962.                     return this
  963.                 },
  964.                 init: function (json) {
  965.                     if (!window.jm) {
  966.                         window.jm = new jsMind({
  967.                             mode: 'side',
  968.                             editable: false,
  969.                             container: 'jmContainer',
  970.                             view: {
  971.                                 hmargin: 50, // 思维导图距容器外框的最小水平距离
  972.                                 vmargin: 50,  // 思维导图距容器外框的最小垂直距离
  973.                                 engine: 'svg', // 思维导图各节点之间线条的绘制引擎
  974.                                 draggable: true, // 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
  975.                                 support_html: false,
  976.                                 line_color: '#C4C9D0',
  977.                             },
  978.                             zoom: {             // 配置缩放
  979.                                 min: 0.1,       // 最小的缩放比例
  980.                                 max: 2.1,       // 最大的缩放比例
  981.                                 step: 0.1,      // 缩放比例间隔
  982.                             },
  983.                             layout: {
  984.                                 vspace: 7, // 节点之间的垂直间距
  985.                                 hspace: 150, // 节点之间的水平空间
  986.                             },
  987.                         });
  988.                     }
  989.  
  990.                     this.show(json).event().collapseOrExpand()
  991.                 }
  992.             },
  993.             otherEvent = {
  994.                 // 过滤 JSON
  995.                 filterJSON: function (filter) {
  996.                     let style = GM_getValue('formatStyle') || 'default'
  997.                     if (!filter) {
  998.                         style == 'default' ? $('#formatContainer li').removeClass('hidden') : $('.json-key').parent().removeClass('hidden')
  999.                         return
  1000.                     }
  1001.  
  1002.                     let chainSet = new Set()
  1003.                     /**
  1004.                      * 模糊匹配 JSON key
  1005.                      * 假如`filter`值为`id`, querySelectorAll得到DOM节点
  1006.                      * 得到：['.feedList.0.images.0.user_id', '.feedList.0.images.0', '.feedList.0.images', '.feedList.0', '.feedList']
  1007.                      */
  1008.                     document.querySelectorAll('#formatContainer *[json-path]').forEach(el => {
  1009.                         let chain = $(el).attr('json-path')
  1010.                         if (!chain) {
  1011.                             return
  1012.                         }
  1013.                         let newChain = chain.substr(chain.lastIndexOf('.'))
  1014.                         if (!newChain.toLowerCase().includes(filter.toLowerCase())) {
  1015.                             return
  1016.                         }
  1017.                         chainSet.add(chain)
  1018.                         while (chain = chain.substr(0, chain.lastIndexOf('.'))) {
  1019.                             chainSet.add(chain)
  1020.                         }
  1021.                     })
  1022.  
  1023.                     /**
  1024.                      * 模糊匹配 JSON value
  1025.                      */
  1026.                     document.querySelectorAll("#formatContainer *[class*='json-']:not([class*='json-key']):not([class*='json-brackets'])")
  1027.                         .forEach(el => {
  1028.                             let target = $(el),
  1029.                                 chain = style == 'default' ? target.parent().attr('json-path') : target.siblings('.json-key').attr('json-path')
  1030.                             if (!chain) {
  1031.                                 return
  1032.                             }
  1033.                             let text = target.text()
  1034.                             if (!text.toLowerCase().includes(filter.toLowerCase())) {
  1035.                                 return
  1036.                             }
  1037.                             chainSet.add(chain)
  1038.                             while (chain = chain.substr(0, chain.lastIndexOf('.'))) {
  1039.                                 chainSet.add(chain)
  1040.                             }
  1041.                         })
  1042.                     // console.log(chainSet)
  1043.                     style == 'default' ? $('#formatContainer li').addClass('hidden') : $('.json-key').parent().addClass('hidden')
  1044.                     chainSet.forEach(chain => {
  1045.                         style == 'default' ? $(`#formatContainer *[json-path="${chain}"]`).removeClass('hidden')
  1046.                             : $(`#formatContainer *[json-path="${chain}"]`).parent().removeClass('hidden')
  1047.                     })
  1048.                 },
  1049.                 // JSON 过滤
  1050.                 input: function () {
  1051.                     let that = this
  1052.                     $('input').on('input', function () {
  1053.                         let val = $(this).val()
  1054.                         val === '' ? $('.clear').attr('hidden', true) : $('.clear').attr('hidden', false)
  1055.                         that.filterJSON(val)
  1056.                     })
  1057.                     return that
  1058.                 },
  1059.                 // 清空输入框内容
  1060.                 clear: function () {
  1061.                     let that = this
  1062.                     $('.clear').click(function () {
  1063.                         that.filterJSON()
  1064.                         $('input').val('')
  1065.                         $(this).attr('hidden', true)
  1066.                     })
  1067.                     return this
  1068.                 },
  1069.                 // 返回顶部
  1070.                 scrollTop: function () {
  1071.                     $('.scroll-top').click(function () {
  1072.                         $('.tabs-container').animate({
  1073.                             scrollTop: '0'
  1074.                         }, 1000);
  1075.                     })
  1076.                     $('.tabs-container').scroll(function (e) {
  1077.                         let scrollTop = $(this).scrollTop()
  1078.                         scrollTop > 500 ? $('.scroll-top').fadeIn() : $('.scroll-top').fadeOut()
  1079.                     });
  1080.                     return this
  1081.                 },
  1082.                 // 所有a标签，看是否是图片，是图片生成预览图  
  1083.                 urlHover: function () {
  1084.                     $("#formatContainer").on({
  1085.                         mouseenter: function () {
  1086.                             var that = $(this),
  1087.                                 href = that.attr('href')
  1088.                             if (Utils.isImg(href)) {
  1089.                                 layer.tips(`<img src="${href}" />`, that, {
  1090.                                     time: 0,
  1091.                                     anim: 5,
  1092.                                     maxWidth: 500,
  1093.                                     tips: [3, '#d9d9d9']
  1094.                                 });
  1095.                             }
  1096.                         },
  1097.                         mouseleave: () => layer.closeAll()
  1098.                     }, 'a[href]')
  1099.                     return this
  1100.                 },
  1101.                 // 提示key的JSONPath
  1102.                 tipsJsonPath: function () {
  1103.                     var that = this
  1104.                     $("#formatContainer").on({
  1105.                         mouseenter: function () {
  1106.                             let jsonPath = that.getJsonPath(this)
  1107.                             let tips = `<b>ctrl + 点击复制</b><br/>${jsonPath}`
  1108.                             layer.tips(tips, this, {
  1109.                                 time: 0,
  1110.                                 anim: 5,
  1111.                                 maxWidth: 500,
  1112.                                 tips: [1, '#2e59a7']
  1113.                             })
  1114.                         },
  1115.                         mouseleave: () => layer.closeAll()
  1116.                     }, '.json-key')
  1117.                     return this
  1118.                 },
  1119.                 // 单击key复制JSONPath
  1120.                 copyJsonPath: function () {
  1121.                     var that = this
  1122.                     $("#formatContainer").on('click', '.json-key', function (event) {
  1123.                         if (event.ctrlKey) {
  1124.                             let jsonPath = that.getJsonPath(this)
  1125.                             GM_setClipboard(jsonPath)
  1126.                             layer.msg('复制成功', { time: 1500 })
  1127.                         }
  1128.                     })
  1129.                     return this
  1130.                 },
  1131.                 getJsonPath: function (element) {
  1132.                     let style = GM_getValue('formatStyle') || 'default'
  1133.                     let jsonPath = style == 'default' ? $(element).parent().attr('json-path') : $(element).attr('json-path')
  1134.                     return jsonPath.split('.').reduce((prev, next) => /^\d+$/.test(next) ? prev + `[${next}]` : prev + '.' + next)
  1135.                 },
  1136.                 inputJson: function () {
  1137.                     let that = this
  1138.                     $('.inputJson').off('click').click(function () {
  1139.                         layer.prompt({
  1140.                             title: "JSON 输入",
  1141.                             formType: 2,
  1142.                             shadeClose: true,
  1143.                             maxlength: 1000000,
  1144.                         }, function (text) {
  1145.                             if (!text) {
  1146.                                 layer.msg("内容不能为空", { time: 1500 })
  1147.                                 return
  1148.                             }
  1149.  
  1150.                             let rawText = text, oldGlobalJSONPFun = globalJSONPFun
  1151.  
  1152.                             // 判断是否为jsonp格式
  1153.                             let match = text.match(/^([^\s(]*)\s*\(([\s\S]*)\)\s*;?$/)
  1154.                             if (match && match[1] && match[2]) {
  1155.                                 globalJSONPFun = match[1]
  1156.                                 text = match[2]
  1157.                             }
  1158.  
  1159.                             try {
  1160.                                 let json = JSON.parse(JSON.stringify(eval(`(${text})`)))
  1161.                                 that.reload(json, rawText)
  1162.                             } catch (e) {
  1163.                                 console.log(e)
  1164.                                 globalJSONPFun = oldGlobalJSONPFun
  1165.                                 layer.msg("JSON不合法", { time: 1500 })
  1166.                             }
  1167.                         })
  1168.                     })
  1169.                     return this
  1170.                 },
  1171.                 fetchApi: function () {
  1172.                     let that = this
  1173.                     $('.fetchApi').off('click').click(function () {
  1174.                         layer.open({
  1175.                             type: 1,
  1176.                             closeBtn: 0, //不显示关闭按钮
  1177.                             shadeClose: true, //开启遮罩关闭
  1178.                             title: 'HTTP 请求',
  1179.                             content: `<form class="httpRequest">
  1180.                                     <div class="requestbox">
  1181.                                         <select name="method">
  1182.                                             <option value="POST">POST</option>
  1183.                                             <option value="GET">GET</option>
  1184.                                             <option value="PUT">PUT</option>
  1185.                                             <option value="DELETE">DELETE</option>
  1186.                                         </select>
  1187.                                         <input name="url" placeholder="请求地址" />
  1188.                                         <select name="contentType">
  1189.                                             <option value="application/x-www-form-urlencoded;charset=UTF-8">urlencoded</option>
  1190.                                             <option value="application/json;charset=UTF-8">application/json</option>
  1191.                                         </select>
  1192.                                         <button type="submit">发送</button>
  1193.                                     </div>
  1194.                                     <div class="textarea">
  1195.                                         <input name="headers" placeholder='请求头 {"token": "test"}' />
  1196.                                         <input name="params" placeholder='请求参数 {"id": "test", ""name": "test"}' />
  1197.                                     </div>
  1198.                                 </form>`
  1199.                         })
  1200.  
  1201.  
  1202.                         $('form').submit(function (event) {
  1203.                             event.preventDefault();
  1204.  
  1205.                             let serialize = $(this).serializeArray()
  1206.                             let form = {}
  1207.                             for (let key in serialize) {
  1208.                                 let it = serialize[key]
  1209.                                 form[it.name] = it.value
  1210.                             }
  1211.  
  1212.                             if (form.url === '') {
  1213.                                 layer.msg('请求URL不能为空')
  1214.                                 return
  1215.                             }
  1216.  
  1217.                             let headers = form.headers
  1218.                             let params = form.params
  1219.                             try {
  1220.                                 if (headers) {
  1221.                                     headers = JSON.parse(headers)
  1222.                                 }
  1223.                             } catch (e) {
  1224.                                 layer.msg('请求头格式不合法')
  1225.                                 return
  1226.                             }
  1227.                             try {
  1228.                                 if (params) {
  1229.                                     params = JSON.parse(params)
  1230.                                 }
  1231.                             } catch (e) {
  1232.                                 layer.msg('请求参数格式不合法')
  1233.                                 return
  1234.                             }
  1235.  
  1236.                             layer.load(0, { shade: false });
  1237.                             $.ajax({
  1238.                                 url: 'https://fetch-api.feny.ink/httpRequest',
  1239.                                 type: 'POST',
  1240.                                 data: JSON.stringify(form),
  1241.                                 contentType: 'application/json'
  1242.                             }).then(response => {
  1243.                                 globalJSONPFun = null
  1244.                                 that.reload(response, JSON.stringify(response))
  1245.                             }, error => {
  1246.                                 layer.closeAll()
  1247.                                 console.log(error);
  1248.                             })
  1249.                         })
  1250.                     })
  1251.                     return this
  1252.                 },
  1253.                 reload: function (json, rawText) {
  1254.                     globalJSON = json
  1255.                     source.text(rawText)
  1256.                     btnEvent.isBeautify = false
  1257.                     btnEvent.$rawText.html(source.clone())
  1258.                     formatStyle.setStyle()
  1259.                     jsonMind.isFirst = true
  1260.                     jsonMind.init(globalJSON)
  1261.                     layer.closeAll()
  1262.                 },
  1263.                 init: function () {
  1264.                     this.input().clear().scrollTop().urlHover().tipsJsonPath().copyJsonPath()
  1265.                         .inputJson().fetchApi()
  1266.                 }
  1267.             },
  1268.             theme = {
  1269.                 // 切换主题
  1270.                 changeTheme: function () {
  1271.                     let that = this
  1272.                     $('.theme select').change(function (e) {
  1273.                         let val = $(e.target).val()
  1274.                         GM_setValue('theme', val)
  1275.                         that.setTheme()
  1276.                     })
  1277.                     return this
  1278.                 },
  1279.                 // 设置主题
  1280.                 setTheme: function () {
  1281.                     let theme = GM_getValue('theme') || 'default'
  1282.                     $('body').removeClass().addClass(theme)
  1283.                     $('.theme select').val(theme)
  1284.                     return this
  1285.                 },
  1286.                 init: function () {
  1287.                     this.setTheme().changeTheme()
  1288.                 }
  1289.             },
  1290.             formatStyle = {
  1291.                 // 切换风格
  1292.                 changeStyle: function () {
  1293.                     let that = this
  1294.                     $('.formatStyle select').change(function (e) {
  1295.                         let val = $(e.target).val()
  1296.                         GM_setValue('formatStyle', val)
  1297.                         that.setStyle()
  1298.                     })
  1299.                     return this
  1300.                 },
  1301.                 // 设置风格
  1302.                 setStyle: function () {
  1303.                     let style = GM_getValue('formatStyle') || 'default'
  1304.                     $('.formatStyle select').val(style)
  1305.  
  1306.                     $('input').val('')
  1307.                     $('#formatContainer').html('')
  1308.                     if (style === 'default') {
  1309.                         $('#formatContainer').jsonViewer(globalJSON, globalJSONPFun)
  1310.                     } else {
  1311.                         let appendHtml = `<table id="treeTable">${treeTableHtml(globalJSON)}</table>`
  1312.                         if (globalJSONPFun !== undefined && globalJSONPFun !== null) {
  1313.                             appendHtml = `<div class="jsonp">${globalJSONPFun}(</div>${appendHtml}<div class="jsonp">)</div>`
  1314.                         }
  1315.                         $('#formatContainer').append(appendHtml)
  1316.                         $('#treeTable').simpleTreeTable({
  1317.                             expander: '#expandAll',
  1318.                             collapser: '#collapseAll',
  1319.                         })
  1320.  
  1321.                         // Highlight selected row
  1322.                         $('#treeTable').on("mousedown", "tr", function () {
  1323.                             $(".selected").not(this).removeClass("selected");
  1324.                             $(this).toggleClass("selected")
  1325.                         })
  1326.                     }
  1327.                     return this
  1328.                 },
  1329.                 init: function () {
  1330.                     this.setStyle().changeStyle()
  1331.                     theme.init()
  1332.                     btnEvent.init()
  1333.                     setTimeout(() => otherEvent.init(), 1000)
  1334.                 }
  1335.             }
  1336.  
  1337.         formatStyle.init()
  1338.  
  1339.         /**
  1340.          * 表格
  1341.          */
  1342.         function treeTableHtml(json, level = 0, pId = '', pChain = '') {
  1343.             let tr = ''
  1344.             for (let key in json) {
  1345.                 let val = json[key],
  1346.                     type = Utils.getType(val),
  1347.                     tId = key + '_' + Math.random(),
  1348.                     chain = pChain + "." + key
  1349.                 if (['array', 'object'].includes(type)) {
  1350.                     let brackets = '',
  1351.                         len = Object.keys(val).length,
  1352.                         res = treeTableHtml(val, level + 1, tId, chain)
  1353.  
  1354.                     if (!res) {
  1355.                         if (type === 'array') {
  1356.                             brackets = `<span class="json-brackets json-square-brackets">[]</span>`
  1357.                         } else {
  1358.                             brackets = `<span class="json-brackets json-curly-brackets">{}</span>`
  1359.                         }
  1360.                     }
  1361.  
  1362.                     tr += `
  1363.                         <tr data-node-id="${tId}" data-node-pid="${pId}" type="${type}">
  1364.                             <td class="json-key" json-path="${chain}" style="padding-left: ${level * 19}px">${key}:
  1365.                                 <span class="tree-len">${len > 0 ? (type === 'array' ? '[' + len + ']' : '{' + len + '}') : ''}</span>
  1366.                             </td>
  1367.                             <td>${brackets}</td>
  1368.                         </tr>`
  1369.                     tr += res
  1370.                 } else {
  1371.                     val = (type === 'string') ? val.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') : val
  1372.                     tr += `<tr data-node-id="${tId}" data-node-pid="${pId}" type="${type}">
  1373.                         <td class="json-key" json-path="${chain}" style="padding-left: ${level * 19}px">${key}:</td>`
  1374.                     if (Utils.isUrl(val)) {
  1375.                         tr += `<td class="json-${type}"><a target="_blank" href="${val}">"${val}"</a></td>`
  1376.                     } else {
  1377.                         val = (type === 'string') ? `"${val}"` : val
  1378.                         tr += `<td class="json-${type}">${val}</td>`
  1379.                     }
  1380.                     tr += '</tr>'
  1381.                 }
  1382.             }
  1383.             return tr;
  1384.         }
  1385.  
  1386.     })(_jQuery)
  1387.  
  1388.  
  1389.     const openInTab = () => GM_openInTab('https://fetch-api.feny.ink/example.json')
  1390.     GM_registerMenuCommand('测试JSON( Alt + j )', openInTab);
  1391.     document.addEventListener('keydown', function (event) {
  1392.         if (event.altKey && event.key === 'j') {
  1393.             openInTab()
  1394.         }
  1395.     })
  1396. })();