// ==UserScript== // @license MIT // @name JSON Viewer // @namespace http://tampermonkey.net/ // @version 0.6.2 // @note v0.6.2 脑图增加JSON Crack // @note v0.6.1 增加多一种浅色主题 // @note v0.6.0 增加简单HTTP 请求功能，可请求GET/POST/PUT/DELETE的API接口，而不单单只能GET请求使用 // @note v0.5.9 jsonp格式小优化 // @note v0.5.8 增加JSON手动输入 // @note v0.5.7 一些小细节优化 // @note v0.5.6 修复BUG // @note v0.5.5 解决@require jquery-simple-tree-table.min.js依赖加载失败问题 // @note v0.5.4 单击复制修改为CTRL+单击复制JSONPath功能，JSON格式化风格增加table格式 // @note v0.5.3 增加暗黑主题色 // @note v0.5.2 单击JSON格式化的key可复制JSONPath // @note v0.5.1 修复JSONPath提示有误 // @note v0.5.0 解决chrome 120+以上内核JSON格式化不执行和引入layer报错问题 // @note v0.4.9 布局修改，增加保存JSON/脑图为文件，增加JSON过滤，鼠标移入key提示JSONPath // @note v0.4.8 代码优化 // @note v0.4.7 增加对JSONP的判断，代码优化 // @note v0.4.6 增加复制按钮，JSON脑图CSS样式细节优化，JSON脑图增加收起/展开子节点按钮 // @note v0.4.5 在json-viewer-updated原基础上进行了一些修改，主要有CSS样式修改，新增折叠/展开全部功能，新增JSON脑图功能，脑图节点点击显示调用路径 // @description 格式化显示JSON使数据看起来更加漂亮，支持折叠/展开格式化后的数据，支持JSON脑图让调用层级看着更清晰，支持复制JSON脑图节点路径 // @author Feny // @match *://*/* // @grant GM_addStyle // @grant GM_getValue // @grant GM_setValue // @grant unsafeWindow // @grant GM_openInTab // @grant GM_setClipboard // @grant GM_getResourceText // @grant GM_registerMenuCommand // @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== // @require https://code.jquery.com/jquery.min.js // @require https://unpkg.com/jsmind@0.8.5/es6/jsmind.js // @require https://unpkg.com/dom-to-image@2.6.0/dist/dom-to-image.min.js // @require https://unpkg.com/jsmind@0.8.5/es6/jsmind.screenshot.js // @resource swalStyle https://unpkg.com/jsmind@0.8.5/style/jsmind.css // @downloadURL none // ==/UserScript== /** * jquery-simple-tree-table.min.js * https://cdn.jsdelivr.net/npm/@kanety/jquery-simple-tree-table@0.5.1/dist/jquery-simple-tree-table.min.js */ !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;n0&&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 :first-child",iconTemplate:"",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}]); (function () { 'use strict'; const Utils = { // 检查字符串是否为URL isUrl: function (string) { var regexp = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/; return regexp.test(string); }, // 检查是否是图片链接 isImg: function (pathImg) { // var regexp = /^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?\/([\w#!:.?+=&%@!\-\/])*\.(gif|jpg|jpeg|png|GIF|JPG|PNG)([\w#!:.?+=&%@!\-\/])?/; let regexp = /\.(ico|bmp|gif|jpg|jpeg|png|svg|webp|GIF|JPG|PNG|WEBP|SVG)([\w#!:.?+=&%@!\-\/])?/i return regexp.test(pathImg); }, // 检验内容是否是json格式的内容 isJSON: function (str) { try { JSON.parse(str) return true } catch (e) { console.log("is not json", e) return false } }, // 获取数据类型 getType: function (value) { return Object.prototype.toString.call(value).match(/\s(.+)]/)[1].toLowerCase(); }, // 获取数组中对象key最多的对象 findMaxKeysObject: function (arr) { let maxKeysCount = 0, maxKeysObject for (let obj of arr) { let keysCount = Object.keys(obj).length if (keysCount > maxKeysCount) { maxKeysCount = keysCount maxKeysObject = obj } } return maxKeysObject }, // 随机rgb颜色 rgbaColor: (opacity) => `rgba(${Math.random() * 256}, ${Math.random() * 256}, ${Math.random() * 256}, ${opacity})` } // jquery.json-viewer 插件 开始 // 解决和原网页jquery版本冲突 var _jQuery = jQuery.noConflict(true); (function ($) { /** * 检查 arg 是否为至少包含 1 个元素的数组或至少包含 1 个键的字典 */ function isCollapsable(arg) { return arg instanceof Object && Object.keys(arg).length > 0; } /** * 将 JSON 对象转换为 HTML 表示形式 * @return string */ function json2html(json, parentPath = '') { let html = '', type = Utils.getType(json) switch (type) { case 'array': case 'object': let len = json.length || Object.keys(json).length; if (len > 0) { html += ``; html += type === 'array' ? '[
    ' : '{
      '; for (var key in json) { if (json.hasOwnProperty(key)) { let comma = --len > 0 ? ',' : '', jsonPath = parentPath + '.' + key, collapse = isCollapsable(json[key]) ? '' : '', res = json2html(json[key], jsonPath) let toHtml = type === 'array' ? res : `"${key}": ${res}` html += [`
    • `, collapse, toHtml, comma, '
      • '].join('') } } if (type === 'array') { html += `
]` } else { html += `}` } } else { html += `` html += (type === 'array') ? '[]' : '{}' html += '' } break default: /* Escape tags */ json = type === 'string' ? json.replace(/&/g, '&').replace(//g, '>') : json if (Utils.isUrl(json)) { html += `"${json}"`; } else { json = type === 'string' ? `"${json}"` : json html += `${json}`; } break } return html; } $.fn.jsonViewer = function (json, jsonpFn) { return this.each(function () { /* Transform to HTML */ var html = json2html(json); /** is JSONP */ if (jsonpFn !== undefined && jsonpFn !== null) { html = `
${jsonpFn}(
${html}
)
` } /* Insert HTML in target DOM element */ $(this).html(html); /* Bind click on toggle buttons */ $(this).off('click'); $(this).on('click', 'a.json-toggle', function () { var target = $(this).toggleClass('collapsed').siblings('ul.json-object, ol.json-array'); target.toggle(); if (target.is(':visible')) { target.siblings('.json-placeholder').remove(); } else { var count = target.children('li:not([class*="hidden"])').length; var placeholder = count + (count > 1 ? ' items' : ' item'); target.after('' + placeholder + ''); } return false; }); /* Simulate click on toggle button when placeholder is clicked */ $(this).on('click', 'a.json-placeholder', function () { $(this).siblings('a.json-toggle').click(); $(this).siblings('a.json-placeholder').remove(); return false; }); }); }; })(_jQuery); // jquery.json-viewer 插件 结束 (function ($) { let docType = [ "application/vnd.api+json", "application/javascript", "application/json", "text/javascript", "text/plain", "text/json", ], contentType = document.contentType if (!docType.includes(contentType)) { return } var source = $('pre').first(); if (source.length === 0) { let text = document.body.innerText if (!Utils.isJSON(text)) { return } let pre = document.createElement('pre') pre.innerText = text document.body.insertAdjacentHTML('afterbegin', pre); source = $(pre) } let rawText = source.text() if (!rawText) { return } // 判断是否为jsonp格式 window.globalJSONPFun = null let tokens = rawText.match(/^([^\s(]*)\s*\(([\s\S]*)\)\s*;?$/) if (tokens && tokens[1] && tokens[2]) { globalJSONPFun = tokens[1] rawText = tokens[2] } if (!Utils.isJSON(rawText)) { return } // 添加样式 GM_addStyle(GM_getResourceText('swalStyle')) $("head").append('') .append('