Format JSON data in a beautiful way.
// ==UserScript==
// @name JSON Prettier
// @icon https://live.staticflickr.com/65535/52564733798_c1cb151c64_o.png
// @version 1.0.1
// @description Format JSON data in a beautiful way.
// @description:zh-CN 將JSON數據漂亮的呈現，支援縮排與複製。
// @license MIT
// @require https://cdn.jsdelivr.net/npm/@violentmonkey/dom@1
// @match *://*/*
// @match file:///*
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_addStyle
// @grant GM_registerMenuCommand
// @grant GM_setClipboard
// @namespace https://greasyfork.org/users/997719
// @author Wayne
// @homepage https://wayneblog.ga/
// @homepageURL https://wayneblog.ga/
// ==/UserScript==
(function () {
'use strict';
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}";
const React = VM;
const gap = 5;
const formatter = {
options: [{
key: 'show-quotes',
title: '"',
def: true
}, {
key: 'show-commas',
title: ',',
def: true
}]
};
const config = { ...formatter.options.reduce((res, item) => {
res[item.key] = item.def;
return res;
}, {}),
...GM_getValue('config')
};
if (['application/json', 'text/plain', 'application/javascript', 'text/javascript' // file:///foo/bar.js
].includes(document.contentType)) formatJSON();
GM_registerMenuCommand('Toggle JSON format', formatJSON);
function createQuote() {
return /*#__PURE__*/React.createElement("span", {
className: "subtle quote"
}, "\"");
}
function createComma() {
return /*#__PURE__*/React.createElement("span", {
className: "subtle comma"
}, ",");
}
function isColor(str) {
return /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(str);
}
function tokenize(raw) {
const skipWhitespace = index => {
while (index < raw.length && ' \t\r\n'.includes(raw[index])) index += 1;
return index;
};
const expectIndex = index => {
if (index < raw.length) return index;
throw new Error('Unexpected end of input');
};
const expectChar = (index, white, black) => {
const ch = raw[index];
if (white && !white.includes(ch) || black && black.includes(ch)) {
throw new Error(`Unexpected token "${ch}" at ${index}`);
}
return ch;
};
const findWord = (index, words) => {
for (const word of words) {
if (raw.slice(index, index + word.length) === word) {
return word;
}
}
};
const expectSpaceAndCharIndex = (index, white, black) => {
const i = expectIndex(skipWhitespace(index));
expectChar(i, white, black);
return i;
};
const parseString = start => {
let j;
for (j = start + 1; true; j = expectIndex(j + 1)) {
const ch = raw[j];
if (ch === '"') break;
if (ch === '\\') {
j = expectIndex(j + 1);
const ch2 = raw[j];
if (ch2 === 'x') {
j = expectIndex(j + 2);
} else if (ch2 === 'u') {
j = expectIndex(j + 4);
}
}
}
const source = raw.slice(start + 1, j);
return {
type: 'string',
source,
data: source,
color: isColor(source),
start,
end: j + 1
};
};
const parseKeyword = start => {
const nullWord = findWord(start, ['null']);
if (nullWord) {
return {
type: 'null',
source: 'null',
data: null,
start,
end: start + 4
};
}
const bool = findWord(start, ['true', 'false']);
if (bool) {
return {
type: 'boolean',
source: bool,
data: bool === 'true',
start,
end: start + bool.length
};
}
expectChar(start, '0');
};
const DIGITS = '0123456789';
const findDecimal = (start, fractional) => {
let i = start;
if ('+-'.includes(raw[i])) i += 1;
let j;
let dot = -1;
for (j = i; true; j = expectIndex(j + 1)) {
const ch = expectChar(j, // there must be at least one digit
// dot must not be the last character of a number, expecting a digit
j === i || dot >= 0 && dot === j - 1 ? DIGITS : null, // there can be at most one dot
!fractional || dot >= 0 ? '.' : null);
if (ch === '.') dot = j;else if (!DIGITS.includes(ch)) break;
}
return j;
};
const parseNumber = start => {
let i = findDecimal(start, true);
const ch = raw[i];
if (ch && ch.toLowerCase() === 'e') {
i = findDecimal(i + 1);
}
const source = raw.slice(start, i);
return {
type: 'number',
source,
data: +source,
start,
end: i
};
};
let parseItem;
const parseArray = start => {
const result = {
type: 'array',
data: [],
start
};
let i = start + 1;
while (true) {
i = expectIndex(skipWhitespace(i));
if (raw[i] === ']') break;
if (result.data.length) i = expectSpaceAndCharIndex(i, ',') + 1;
const item = parseItem(i);
result.data.push(item);
i = item.end;
}
result.end = i + 1;
return result;
};
const parseObject = start => {
const result = {
type: 'object',
data: [],
start
};
let i = start + 1;
while (true) {
i = expectIndex(skipWhitespace(i));
if (raw[i] === '}') break;
if (result.data.length) i = expectSpaceAndCharIndex(i, ',') + 1;
i = expectSpaceAndCharIndex(i, '"');
const key = parseString(i);
i = expectSpaceAndCharIndex(key.end, ':') + 1;
const value = parseItem(i);
result.data.push({
key,
value
});
i = value.end;
}
result.end = i + 1;
return result;
};
parseItem = start => {
const i = expectIndex(skipWhitespace(start));
const ch = raw[i];
if (ch === '"') return parseString(i);
if (ch === '[') return parseArray(i);
if (ch === '{') return parseObject(i);
if ('-0123456789'.includes(ch)) return parseNumber(i);
return parseKeyword(i);
};
const result = parseItem(0);
const end = skipWhitespace(result.end);
if (end < raw.length) expectChar(end, []);
return result;
}
function loadJSON() {
const raw = document.body.innerText;
try {
// JSON
const content = tokenize(raw);
return {
raw,
content
};
} catch (e) {
// not JSON
console.error('Not JSON', e);
}
try {
// JSONP
const parts = raw.match(/^(.*?\w\s*\()(.+)(\)[;\s]*)$/);
const content = tokenize(parts[2]);
return {
raw,
content,
prefix: /*#__PURE__*/React.createElement("span", {
className: "subtle"
}, parts[1].trim()),
suffix: /*#__PURE__*/React.createElement("span", {
className: "subtle"
}, parts[3].trim())
};
} catch (e) {
// not JSONP
console.error('Not JSONP', e);
}
}
function formatJSON() {
if (formatter.formatted) return;
formatter.formatted = true;
formatter.data = loadJSON();
if (!formatter.data) return;
formatter.style = GM_addStyle(css);
formatter.root = /*#__PURE__*/React.createElement("div", {
id: "json-formatter"
});
document.body.innerHTML = '';
document.body.append(formatter.root);
initTips();
initMenu();
bindEvents();
generateNodes(formatter.data, formatter.root);
}
function generateNodes(data, container) {
const rootSpan = /*#__PURE__*/React.createElement("span", null);
const root = /*#__PURE__*/React.createElement("div", null, rootSpan);
const pre = /*#__PURE__*/React.createElement("pre", null, root);
formatter.pre = pre;
const queue = [{
el: rootSpan,
elBlock: root,
...data
}];
while (queue.length) {
const item = queue.shift();
const {
el,
content,
prefix,
suffix
} = item;
if (prefix) el.append(prefix);
if (content.type === 'array') {
queue.push(...generateArray(item));
} else if (content.type === 'object') {
queue.push(...generateObject(item));
} else {
const {
type,
color
} = content;
if (type === 'string') el.append(createQuote());
if (color) el.append( /*#__PURE__*/React.createElement("span", {
className: "color",
style: `background-color: ${content.data}`
}));
el.append( /*#__PURE__*/React.createElement("span", {
className: `${type} item`,
"data-type": type,
"data-value": toString(content)
}, toString(content)));
if (type === 'string') el.append(createQuote());
}
if (suffix) el.append(suffix);
}
container.append(pre);
updateView();
}
function toString(content) {
return `${content.source}`;
}
function setFolder(el, length) {
if (length) {
el.classList.add('complex');
el.append( /*#__PURE__*/React.createElement("div", {
className: "folder"
}, '\u25b8'), /*#__PURE__*/React.createElement("span", {
className: "summary"
}, `// ${length} items`));
}
}
function generateArray({
el,
elBlock,
content
}) {
const elContent = content.data.length && /*#__PURE__*/React.createElement("div", {
className: "content"
});
setFolder(elBlock, content.data.length);
el.append( /*#__PURE__*/React.createElement("span", {
className: "bracket"
}, "["), elContent || ' ', /*#__PURE__*/React.createElement("span", {
className: "bracket"
}, "]"));
return content.data.map((item, i) => {
const elValue = /*#__PURE__*/React.createElement("span", null);
const elChild = /*#__PURE__*/React.createElement("div", null, elValue);
elContent.append(elChild);
if (i < content.data.length - 1) elChild.append(createComma());
return {
el: elValue,
elBlock: elChild,
content: item
};
});
}
function generateObject({
el,
elBlock,
content
}) {
const elContent = content.data.length && /*#__PURE__*/React.createElement("div", {
className: "content"
});
setFolder(elBlock, content.data.length);
el.append( /*#__PURE__*/React.createElement("span", {
className: "bracket"
}, '{'), elContent || ' ', /*#__PURE__*/React.createElement("span", {
className: "bracket"
}, '}'));
return content.data.map(({
key,
value
}, i) => {
const elValue = /*#__PURE__*/React.createElement("span", null);
const elChild = /*#__PURE__*/React.createElement("div", null, createQuote(), /*#__PURE__*/React.createElement("span", {
className: "key item",
"data-type": key.type
}, key.data), createQuote(), ': ', elValue);
if (i < content.data.length - 1) elChild.append(createComma());
elContent.append(elChild);
return {
el: elValue,
content: value,
elBlock: elChild
};
});
}
function updateView() {
formatter.options.forEach(({
key
}) => {
formatter.pre.classList[config[key] ? 'add' : 'remove'](key);
});
}
function removeEl(el) {
el.remove();
}
function initMenu() {
const handleCopy = () => {
GM_setClipboard(formatter.data.raw);
};
const handleCollapse = () => {
var list = React.getElementsByXPath("//div[@class='complex']");
for (var i in list) {
list[i].classList.toggle('collapse');
}
};
const handleExpand = () => {
var list = React.getElementsByXPath("//div[@class='complex collapse']");
for (var i in list) {
list[i].classList.toggle('collapse');
}
};
const handleMenuClick = e => {
const el = e.target;
const {
key
} = el.dataset;
if (key) {
config[key] = !config[key];
GM_setValue('config', config);
el.classList.toggle('active');
updateView();
}
};
formatter.root.append( /*#__PURE__*/React.createElement("div", {
className: "menu",
onClick: handleMenuClick
}, /*#__PURE__*/React.createElement("span", {
onClick: handleCopy
}, "Copy"), React.createElement("span", {
onClick: handleExpand
}, "Expand All"), React.createElement("span", {
onClick: handleCollapse
}, "Collapse All"), formatter.options.map(item => /*#__PURE__*/React.createElement("span", {
className: `toggle${config[item.key] ? ' active' : ''}`,
dangerouslySetInnerHTML: {
__html: item.title
},
"data-key": item.key
}))));
}
function initTips() {
const tips = /*#__PURE__*/React.createElement("div", {
className: "tips",
onClick: e => {
e.stopPropagation();
}
});
const hide = () => removeEl(tips);
document.addEventListener('click', hide, false);
formatter.tips = {
node: tips,
hide,
show(range) {
const {
scrollTop
} = document.body;
const rects = range.getClientRects();
let rect;
if (rects[0].top < 100) {
rect = rects[rects.length - 1];
tips.style.top = `${rect.bottom + scrollTop + gap}px`;
tips.style.bottom = '';
} else {
[rect] = rects;
tips.style.top = '';
tips.style.bottom = `${formatter.root.offsetHeight - rect.top - scrollTop + gap}px`;
}
tips.style.left = `${rect.left}px`;
const {
type,
value
} = range.startContainer.dataset;
tips.innerHTML = '';
tips.append( /*#__PURE__*/React.createElement("span", {
className: "tips-key"
}, "type"), ': ', /*#__PURE__*/React.createElement("span", {
className: "tips-val",
dangerouslySetInnerHTML: {
__html: type
}
}));
if (type === 'string' && /^(https?|ftps?):\/\/\S+/.test(value)) {
tips.append( /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("a", {
className: "tips-link",
href: value,
target: "_blank",
rel: "noopener noreferrer"
}, "Open link"));
}
formatter.root.append(tips);
}
};
}
function selectNode(node) {
const selection = window.getSelection();
selection.removeAllRanges();
const range = document.createRange();
range.setStartBefore(node.firstChild);
range.setEndAfter(node.firstChild);
selection.addRange(range);
return range;
}
function bindEvents() {
formatter.root.addEventListener('click', e => {
e.stopPropagation();
const {
target
} = e;
if (target.classList.contains('item')) {
formatter.tips.show(selectNode(target));
} else {
formatter.tips.hide();
}
if (target.classList.contains('folder')) {
target.parentNode.classList.toggle('collapse');
}
}, false);
}
}());