☰

JSON Prettier

Format JSON data in a beautiful way.

  1. // ==UserScript==
  2. // @name        JSON Prettier
  3. // @icon        https://live.staticflickr.com/65535/52564733798_c1cb151c64_o.png
  4. // @version     1.0.1
  5. // @description Format JSON data in a beautiful way.
  6. // @description:zh-CN 將JSON數據漂亮的呈現，支援縮排與複製。
  7. // @license     MIT
  8. // @require     https://cdn.jsdelivr.net/npm/@violentmonkey/dom@1
  9. // @match       *://*/*
  10. // @match       file:///*
  11. // @grant       GM_getValue
  12. // @grant       GM_setValue
  13. // @grant       GM_addStyle
  14. // @grant       GM_registerMenuCommand
  15. // @grant       GM_setClipboard
  16. // @namespace   https://greasyfork.org/users/997719
  17. // @author      Wayne
  18. // @homepage    https://wayneblog.ga/
  19. // @homepageURL https://wayneblog.ga/
  20. // ==/UserScript==
  21.  
  22. (function () {
  23.     'use strict';
  24.     
  25.     const css = "*{margin:0;padding:0}body,html{font-family:Menlo,Microsoft YaHei,Tahoma}#json-formatter{position:relative;margin:0;padding:2em 1em 1em 2em;font-size:14px;line-height:1.5}#json-formatter>pre{white-space:pre-wrap}#json-formatter>pre:not(.show-commas) .comma,#json-formatter>pre:not(.show-quotes) .quote{display:none}.subtle{color:#999}.number{color:#ff8c00}.null{color:grey}.key{color:brown}.string{color:green}.boolean{color:#1e90ff}.bracket{color:#00f}.color{display:inline-block;width:.8em;height:.8em;margin:0 .2em;border:1px solid #666;vertical-align:-.1em}.item{cursor:pointer}.content{padding-left:2em}.collapse>span>.content{display:inline;padding-left:0}.collapse>span>.content>*{display:none}.collapse>span>.content:before{content:\"...\"}.complex{position:relative}.complex:before{content:\"\";position:absolute;top:1.5em;left:-.5em;bottom:.7em;margin-left:-1px;border-left:1px dashed #999}.complex.collapse:before{display:none}.folder{color:#999;position:absolute;top:0;left:-1em;width:1em;text-align:center;transform:rotate(90deg);transition:transform .3s;cursor:pointer}.collapse>.folder{transform:rotate(0)}.summary{color:#999;margin-left:1em}:not(.collapse)>.summary{display:none}.tips{position:absolute;padding:.5em;border-radius:.5em;box-shadow:0 0 1em grey;background:#fff;z-index:1;white-space:nowrap;color:#000}.tips-key{font-weight:700}.tips-val{color:#1e90ff}.tips-link{color:#6a5acd}.menu{position:fixed;top:0;right:0;background:#fff;padding:5px;user-select:none;z-index:10}.menu>span{display:inline-block;padding:4px 8px;margin-right:5px;border-radius:4px;background:#ddd;border:1px solid #ddd;cursor:pointer}.menu>span.toggle:not(.active){background:none}";
  26.     
  27.     const React = VM;
  28.     const gap = 5;
  29.     const formatter = {
  30.       options: [{
  31.         key: 'show-quotes',
  32.         title: '"',
  33.         def: true
  34.       }, {
  35.         key: 'show-commas',
  36.         title: ',',
  37.         def: true
  38.       }]
  39.     };
  40.     const config = { ...formatter.options.reduce((res, item) => {
  41.         res[item.key] = item.def;
  42.         return res;
  43.       }, {}),
  44.       ...GM_getValue('config')
  45.     };
  46.     if (['application/json', 'text/plain', 'application/javascript', 'text/javascript' // file:///foo/bar.js
  47.     ].includes(document.contentType)) formatJSON();
  48.     GM_registerMenuCommand('Toggle JSON format', formatJSON);
  49.     
  50.     function createQuote() {
  51.       return /*#__PURE__*/React.createElement("span", {
  52.         className: "subtle quote"
  53.       }, "\"");
  54.     }
  55.     
  56.     function createComma() {
  57.       return /*#__PURE__*/React.createElement("span", {
  58.         className: "subtle comma"
  59.       }, ",");
  60.     }
  61.     
  62.     function isColor(str) {
  63.       return /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(str);
  64.     }
  65.     
  66.     function tokenize(raw) {
  67.       const skipWhitespace = index => {
  68.         while (index < raw.length && ' \t\r\n'.includes(raw[index])) index += 1;
  69.     
  70.         return index;
  71.       };
  72.     
  73.       const expectIndex = index => {
  74.         if (index < raw.length) return index;
  75.         throw new Error('Unexpected end of input');
  76.       };
  77.     
  78.       const expectChar = (index, white, black) => {
  79.         const ch = raw[index];
  80.     
  81.         if (white && !white.includes(ch) || black && black.includes(ch)) {
  82.           throw new Error(`Unexpected token "${ch}" at ${index}`);
  83.         }
  84.     
  85.         return ch;
  86.       };
  87.     
  88.       const findWord = (index, words) => {
  89.         for (const word of words) {
  90.           if (raw.slice(index, index + word.length) === word) {
  91.             return word;
  92.           }
  93.         }
  94.       };
  95.     
  96.       const expectSpaceAndCharIndex = (index, white, black) => {
  97.         const i = expectIndex(skipWhitespace(index));
  98.         expectChar(i, white, black);
  99.         return i;
  100.       };
  101.     
  102.       const parseString = start => {
  103.         let j;
  104.     
  105.         for (j = start + 1; true; j = expectIndex(j + 1)) {
  106.           const ch = raw[j];
  107.           if (ch === '"') break;
  108.     
  109.           if (ch === '\\') {
  110.             j = expectIndex(j + 1);
  111.             const ch2 = raw[j];
  112.     
  113.             if (ch2 === 'x') {
  114.               j = expectIndex(j + 2);
  115.             } else if (ch2 === 'u') {
  116.               j = expectIndex(j + 4);
  117.             }
  118.           }
  119.         }
  120.     
  121.         const source = raw.slice(start + 1, j);
  122.         return {
  123.           type: 'string',
  124.           source,
  125.           data: source,
  126.           color: isColor(source),
  127.           start,
  128.           end: j + 1
  129.         };
  130.       };
  131.     
  132.       const parseKeyword = start => {
  133.         const nullWord = findWord(start, ['null']);
  134.     
  135.         if (nullWord) {
  136.           return {
  137.             type: 'null',
  138.             source: 'null',
  139.             data: null,
  140.             start,
  141.             end: start + 4
  142.           };
  143.         }
  144.     
  145.         const bool = findWord(start, ['true', 'false']);
  146.     
  147.         if (bool) {
  148.           return {
  149.             type: 'boolean',
  150.             source: bool,
  151.             data: bool === 'true',
  152.             start,
  153.             end: start + bool.length
  154.           };
  155.         }
  156.     
  157.         expectChar(start, '0');
  158.       };
  159.     
  160.       const DIGITS = '0123456789';
  161.     
  162.       const findDecimal = (start, fractional) => {
  163.         let i = start;
  164.         if ('+-'.includes(raw[i])) i += 1;
  165.         let j;
  166.         let dot = -1;
  167.     
  168.         for (j = i; true; j = expectIndex(j + 1)) {
  169.           const ch = expectChar(j, // there must be at least one digit
  170.           // dot must not be the last character of a number, expecting a digit
  171.           j === i || dot >= 0 && dot === j - 1 ? DIGITS : null, // there can be at most one dot
  172.           !fractional || dot >= 0 ? '.' : null);
  173.           if (ch === '.') dot = j;else if (!DIGITS.includes(ch)) break;
  174.         }
  175.     
  176.         return j;
  177.       };
  178.     
  179.       const parseNumber = start => {
  180.         let i = findDecimal(start, true);
  181.         const ch = raw[i];
  182.     
  183.         if (ch && ch.toLowerCase() === 'e') {
  184.           i = findDecimal(i + 1);
  185.         }
  186.     
  187.         const source = raw.slice(start, i);
  188.         return {
  189.           type: 'number',
  190.           source,
  191.           data: +source,
  192.           start,
  193.           end: i
  194.         };
  195.       };
  196.     
  197.       let parseItem;
  198.     
  199.       const parseArray = start => {
  200.         const result = {
  201.           type: 'array',
  202.           data: [],
  203.           start
  204.         };
  205.         let i = start + 1;
  206.     
  207.         while (true) {
  208.           i = expectIndex(skipWhitespace(i));
  209.           if (raw[i] === ']') break;
  210.           if (result.data.length) i = expectSpaceAndCharIndex(i, ',') + 1;
  211.           const item = parseItem(i);
  212.           result.data.push(item);
  213.           i = item.end;
  214.         }
  215.     
  216.         result.end = i + 1;
  217.         return result;
  218.       };
  219.     
  220.       const parseObject = start => {
  221.         const result = {
  222.           type: 'object',
  223.           data: [],
  224.           start
  225.         };
  226.         let i = start + 1;
  227.     
  228.         while (true) {
  229.           i = expectIndex(skipWhitespace(i));
  230.           if (raw[i] === '}') break;
  231.           if (result.data.length) i = expectSpaceAndCharIndex(i, ',') + 1;
  232.           i = expectSpaceAndCharIndex(i, '"');
  233.           const key = parseString(i);
  234.           i = expectSpaceAndCharIndex(key.end, ':') + 1;
  235.           const value = parseItem(i);
  236.           result.data.push({
  237.             key,
  238.             value
  239.           });
  240.           i = value.end;
  241.         }
  242.     
  243.         result.end = i + 1;
  244.         return result;
  245.       };
  246.     
  247.       parseItem = start => {
  248.         const i = expectIndex(skipWhitespace(start));
  249.         const ch = raw[i];
  250.         if (ch === '"') return parseString(i);
  251.         if (ch === '[') return parseArray(i);
  252.         if (ch === '{') return parseObject(i);
  253.         if ('-0123456789'.includes(ch)) return parseNumber(i);
  254.         return parseKeyword(i);
  255.       };
  256.     
  257.       const result = parseItem(0);
  258.       const end = skipWhitespace(result.end);
  259.       if (end < raw.length) expectChar(end, []);
  260.       return result;
  261.     }
  262.     
  263.     function loadJSON() {
  264.       const raw = document.body.innerText;
  265.     
  266.       try {
  267.         // JSON
  268.         const content = tokenize(raw);
  269.         return {
  270.           raw,
  271.           content
  272.         };
  273.       } catch (e) {
  274.         // not JSON
  275.         console.error('Not JSON', e);
  276.       }
  277.     
  278.       try {
  279.         // JSONP
  280.         const parts = raw.match(/^(.*?\w\s*\()(.+)(\)[;\s]*)$/);
  281.         const content = tokenize(parts[2]);
  282.         return {
  283.           raw,
  284.           content,
  285.           prefix: /*#__PURE__*/React.createElement("span", {
  286.             className: "subtle"
  287.           }, parts[1].trim()),
  288.           suffix: /*#__PURE__*/React.createElement("span", {
  289.             className: "subtle"
  290.           }, parts[3].trim())
  291.         };
  292.       } catch (e) {
  293.         // not JSONP
  294.         console.error('Not JSONP', e);
  295.       }
  296.     }
  297.     
  298.     function formatJSON() {
  299.       if (formatter.formatted) return;
  300.       formatter.formatted = true;
  301.       formatter.data = loadJSON();
  302.       if (!formatter.data) return;
  303.       formatter.style = GM_addStyle(css);
  304.       formatter.root = /*#__PURE__*/React.createElement("div", {
  305.         id: "json-formatter"
  306.       });
  307.       document.body.innerHTML = '';
  308.       document.body.append(formatter.root);
  309.       initTips();
  310.       initMenu();
  311.       bindEvents();
  312.       generateNodes(formatter.data, formatter.root);
  313.     }
  314.     
  315.     function generateNodes(data, container) {
  316.       const rootSpan = /*#__PURE__*/React.createElement("span", null);
  317.       const root = /*#__PURE__*/React.createElement("div", null, rootSpan);
  318.       const pre = /*#__PURE__*/React.createElement("pre", null, root);
  319.       formatter.pre = pre;
  320.       const queue = [{
  321.         el: rootSpan,
  322.         elBlock: root,
  323.         ...data
  324.       }];
  325.     
  326.       while (queue.length) {
  327.         const item = queue.shift();
  328.         const {
  329.           el,
  330.           content,
  331.           prefix,
  332.           suffix
  333.         } = item;
  334.         if (prefix) el.append(prefix);
  335.     
  336.         if (content.type === 'array') {
  337.           queue.push(...generateArray(item));
  338.         } else if (content.type === 'object') {
  339.           queue.push(...generateObject(item));
  340.         } else {
  341.           const {
  342.             type,
  343.             color
  344.           } = content;
  345.           if (type === 'string') el.append(createQuote());
  346.           if (color) el.append( /*#__PURE__*/React.createElement("span", {
  347.             className: "color",
  348.             style: `background-color: ${content.data}`
  349.           }));
  350.           el.append( /*#__PURE__*/React.createElement("span", {
  351.             className: `${type} item`,
  352.             "data-type": type,
  353.             "data-value": toString(content)
  354.           }, toString(content)));
  355.           if (type === 'string') el.append(createQuote());
  356.         }
  357.     
  358.         if (suffix) el.append(suffix);
  359.       }
  360.     
  361.       container.append(pre);
  362.       updateView();
  363.     }
  364.     
  365.     function toString(content) {
  366.       return `${content.source}`;
  367.     }
  368.     
  369.     function setFolder(el, length) {
  370.       if (length) {
  371.         el.classList.add('complex');
  372.         el.append( /*#__PURE__*/React.createElement("div", {
  373.           className: "folder"
  374.         }, '\u25b8'), /*#__PURE__*/React.createElement("span", {
  375.           className: "summary"
  376.         }, `// ${length} items`));
  377.       }
  378.     }
  379.     
  380.     function generateArray({
  381.       el,
  382.       elBlock,
  383.       content
  384.     }) {
  385.       const elContent = content.data.length && /*#__PURE__*/React.createElement("div", {
  386.         className: "content"
  387.       });
  388.       setFolder(elBlock, content.data.length);
  389.       el.append( /*#__PURE__*/React.createElement("span", {
  390.         className: "bracket"
  391.       }, "["), elContent || ' ', /*#__PURE__*/React.createElement("span", {
  392.         className: "bracket"
  393.       }, "]"));
  394.       return content.data.map((item, i) => {
  395.         const elValue = /*#__PURE__*/React.createElement("span", null);
  396.         const elChild = /*#__PURE__*/React.createElement("div", null, elValue);
  397.         elContent.append(elChild);
  398.         if (i < content.data.length - 1) elChild.append(createComma());
  399.         return {
  400.           el: elValue,
  401.           elBlock: elChild,
  402.           content: item
  403.         };
  404.       });
  405.     }
  406.     
  407.     function generateObject({
  408.       el,
  409.       elBlock,
  410.       content
  411.     }) {
  412.       const elContent = content.data.length && /*#__PURE__*/React.createElement("div", {
  413.         className: "content"
  414.       });
  415.       setFolder(elBlock, content.data.length);
  416.       el.append( /*#__PURE__*/React.createElement("span", {
  417.         className: "bracket"
  418.       }, '{'), elContent || ' ', /*#__PURE__*/React.createElement("span", {
  419.         className: "bracket"
  420.       }, '}'));
  421.       return content.data.map(({
  422.         key,
  423.         value
  424.       }, i) => {
  425.         const elValue = /*#__PURE__*/React.createElement("span", null);
  426.         const elChild = /*#__PURE__*/React.createElement("div", null, createQuote(), /*#__PURE__*/React.createElement("span", {
  427.           className: "key item",
  428.           "data-type": key.type
  429.         }, key.data), createQuote(), ': ', elValue);
  430.         if (i < content.data.length - 1) elChild.append(createComma());
  431.         elContent.append(elChild);
  432.         return {
  433.           el: elValue,
  434.           content: value,
  435.           elBlock: elChild
  436.         };
  437.       });
  438.     }
  439.     
  440.     function updateView() {
  441.       formatter.options.forEach(({
  442.         key
  443.       }) => {
  444.         formatter.pre.classList[config[key] ? 'add' : 'remove'](key);
  445.       });
  446.     }
  447.     
  448.     function removeEl(el) {
  449.       el.remove();
  450.     }
  451.     
  452.     function initMenu() {
  453.       const handleCopy = () => {
  454.         GM_setClipboard(formatter.data.raw);
  455.       };
  456.     
  457.       const handleCollapse = () => {
  458.         var list = React.getElementsByXPath("//div[@class='complex']");
  459.         for (var i in list) {
  460.           list[i].classList.toggle('collapse');
  461.         }
  462.       };
  463.     
  464.       const handleExpand = () => {
  465.         var list = React.getElementsByXPath("//div[@class='complex collapse']");
  466.         for (var i in list) {
  467.           list[i].classList.toggle('collapse');
  468.         }
  469.       };
  470.     
  471.       const handleMenuClick = e => {
  472.         const el = e.target;
  473.         const {
  474.           key
  475.         } = el.dataset;
  476.     
  477.         if (key) {
  478.           config[key] = !config[key];
  479.           GM_setValue('config', config);
  480.           el.classList.toggle('active');
  481.           updateView();
  482.         }
  483.       };
  484.     
  485.       formatter.root.append( /*#__PURE__*/React.createElement("div", {
  486.         className: "menu",
  487.         onClick: handleMenuClick
  488.       }, /*#__PURE__*/React.createElement("span", {
  489.         onClick: handleCopy
  490.       }, "Copy"), React.createElement("span", {
  491.         onClick: handleExpand
  492.       }, "Expand All"), React.createElement("span", {
  493.         onClick: handleCollapse
  494.       }, "Collapse All"), formatter.options.map(item => /*#__PURE__*/React.createElement("span", {
  495.         className: `toggle${config[item.key] ? ' active' : ''}`,
  496.         dangerouslySetInnerHTML: {
  497.           __html: item.title
  498.         },
  499.         "data-key": item.key
  500.       }))));
  501.     }
  502.     
  503.     function initTips() {
  504.       const tips = /*#__PURE__*/React.createElement("div", {
  505.         className: "tips",
  506.         onClick: e => {
  507.           e.stopPropagation();
  508.         }
  509.       });
  510.     
  511.       const hide = () => removeEl(tips);
  512.     
  513.       document.addEventListener('click', hide, false);
  514.       formatter.tips = {
  515.         node: tips,
  516.         hide,
  517.     
  518.         show(range) {
  519.           const {
  520.             scrollTop
  521.           } = document.body;
  522.           const rects = range.getClientRects();
  523.           let rect;
  524.     
  525.           if (rects[0].top < 100) {
  526.             rect = rects[rects.length - 1];
  527.             tips.style.top = `${rect.bottom + scrollTop + gap}px`;
  528.             tips.style.bottom = '';
  529.           } else {
  530.             [rect] = rects;
  531.             tips.style.top = '';
  532.             tips.style.bottom = `${formatter.root.offsetHeight - rect.top - scrollTop + gap}px`;
  533.           }
  534.     
  535.           tips.style.left = `${rect.left}px`;
  536.           const {
  537.             type,
  538.             value
  539.           } = range.startContainer.dataset;
  540.           tips.innerHTML = '';
  541.           tips.append( /*#__PURE__*/React.createElement("span", {
  542.             className: "tips-key"
  543.           }, "type"), ': ', /*#__PURE__*/React.createElement("span", {
  544.             className: "tips-val",
  545.             dangerouslySetInnerHTML: {
  546.               __html: type
  547.             }
  548.           }));
  549.     
  550.           if (type === 'string' && /^(https?|ftps?):\/\/\S+/.test(value)) {
  551.             tips.append( /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("a", {
  552.               className: "tips-link",
  553.               href: value,
  554.               target: "_blank",
  555.               rel: "noopener noreferrer"
  556.             }, "Open link"));
  557.           }
  558.     
  559.           formatter.root.append(tips);
  560.         }
  561.     
  562.       };
  563.     }
  564.     
  565.     function selectNode(node) {
  566.       const selection = window.getSelection();
  567.       selection.removeAllRanges();
  568.       const range = document.createRange();
  569.       range.setStartBefore(node.firstChild);
  570.       range.setEndAfter(node.firstChild);
  571.       selection.addRange(range);
  572.       return range;
  573.     }
  574.     
  575.     function bindEvents() {
  576.       formatter.root.addEventListener('click', e => {
  577.         e.stopPropagation();
  578.         const {
  579.           target
  580.         } = e;
  581.     
  582.         if (target.classList.contains('item')) {
  583.           formatter.tips.show(selectNode(target));
  584.         } else {
  585.           formatter.tips.hide();
  586.         }
  587.     
  588.         if (target.classList.contains('folder')) {
  589.           target.parentNode.classList.toggle('collapse');
  590.         }
  591.       }, false);
  592.     }
  593.     
  594. }());