REST API Formatter Userscript

// ==UserScript==
// @name        SharePoint Rest API Formatter
// @namespace   Portals Dev
// @match       https://*.sharepoint.com/*_api/*
// @grant       none
// @version     1.0
// @author      -
// @description 4/19/2020, 2:19:16 PM
// ==/UserScript==

(async () => {
	let mode = document.querySelector("#webkit-xml-viewer-source-xml") ? "viewer" : "raw";

	if (mode === "viewer") return;

    document.body.style.opacity = 0;
	async function init() {
		document.body.style.fontSize = "12px";
		document.body.style.transition = "opacity .15s ease-out";

        loadStyles("https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.min.css");
        console.log(document.querySelector("pre").innerHTML);
        window.xml = prettifyXml(document.querySelector("pre").innerHTML);
        
        await loadScript("https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js"),
        await fetchJson();

        
	    document.body.innerHTML = `
    <div>
     <button onclick='showXml()'>XML</button> 
      <button onclick='showJson()'>JSON</button> 
    </div>
    <pre></pre>`;
      
        window.showXml();
        document.body.style.opacity = 1;
        
	}

	function decodeHtml(str) {
		return str.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
	}

	var prettifyXml = function (sourceXml) {
		sourceXml = decodeHtml(sourceXml);
		var xmlDoc = new DOMParser().parseFromString(sourceXml, "application/xml");
		var xsltDoc = new DOMParser().parseFromString(
			[
				// describes how we want to modify the XML - indent everything
				'<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
				'  <xsl:strip-space elements="*"/>',
				'  <xsl:template match="para[content-style][not(text())]">', // change to just text() to strip space in text nodes
				'    <xsl:value-of select="normalize-space(.)"/>',
				"  </xsl:template>",
				'  <xsl:template match="node()|@*">',
				'    <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>',
				"  </xsl:template>",
				'  <xsl:output indent="yes"/>',
				"</xsl:stylesheet>",
			].join("\n"),
			"application/xml"
		);

		var xsltProcessor = new XSLTProcessor();
		xsltProcessor.importStylesheet(xsltDoc);
		var resultDoc = xsltProcessor.transformToDocument(xmlDoc);
		var resultXml = new XMLSerializer().serializeToString(resultDoc);

		return resultXml;
	};

	function loadScript(url) {
		return new Promise((resolve, reject) => {
			var head = document.querySelector("head");
			var scriptTag = document.createElement("script");
			scriptTag.src = url;
			scriptTag.type = "text/javascript";
			scriptTag.onload = () => {
				resolve(true);
			};
			head.appendChild(scriptTag);
		});
	}

	function loadStyles(url) {
		var head = document.querySelector("head");

		var linkTag = document.createElement("link");
		linkTag.rel = "stylesheet";
		linkTag.href = url;
		linkTag.type = "text/css";
		head.appendChild(linkTag);
	}

	async function fetchJson() {
		let headers = {
            accept: "application/json",
            pragma: "no-cache",
            "cache-control": "no-cache",
        };
        let url = window.location.href;
        let prefix =  url.indexOf("?") > -1 ? "&" : "?"
        url = url + prefix + "v=" + Date.now();
		let data = await fetch(url, { headers }).then((res) => {
            if (res.ok) {
                return res.json();
            } else {
                return res.text();
            }
        });
		window.data = data;
	}

	window.showXml = function () {
		const html = Prism.highlight(window.xml, Prism.languages.xml, "xml");
		document.querySelector("pre").innerHTML = `<code>${html}</code>`;
	};

	window.showJson = function () {
		const html = Prism.highlight(JSON.stringify(data, null, 2), Prism.languages.javascript, "javascript");
		document.querySelector("pre").innerHTML = `<code>${html}</code>`;
    };
    
    setTimeout(init, 10);

})();