JSON Viewer

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

当前为 2024-10-09 提交的版本,查看 最新版本

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

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址