Clickable Json links

Question

I'm browsing a json file with Firefox to navigate, I have to copy and paste the links in the document.

Is there a possibility to make these links hyperlink-style clickable?

I imagine this would involve writing your own browser (or a browser plugin) which examines the data and renders it with HTML, inserting hyperlinks where your logic deems appropriate. JSON *by itself* doesn't have hyperlinks because it's not HTML. — David, Dec 07 '17 at 12:45
David: Firefox does render JSON using HTML internally. I do not see why one should have to write whole browser or render all the data on its own. Post-processing browser-generated HTML is enough. — jaboja, Dec 07 '17 at 13:02

score 0 · Answer 1 · answered Dec 07 '17 at 13:34

Use following GreaseMonkey script (optionally fire it for JSON paths on your domain too).

// ==UserScript==
// @name        JSON links
// @namespace   http://example.com/json-links
// @description Clickable links in JSON
// @include     http://localhost/*
// @version     1
// @grant       none
// ==/UserScript==

setTimeout(function() {
    Array.forEach(
        document.querySelectorAll('.objectBox-string'),
        function(span) {
            var url = span.firstChild.nodeValue;
            url = /^\s*"((?:http|https|ftp):\/\/.*)"\s*$/.exec(url);
            if(!url) return;
            url = url[1];

            var a = document.createElement('a');
            a.href = url;
            a.appendChild(span.firstChild);

            span.parentNode.replaceChild(a, span);
        }
    );
}, 300);  // FF dev tools transform JSON into HTML dynamically therefore timeout

If you need to run it on local files too, see this answer:

Run Greasemonkey on html files located on the local filesystem?

(although I don't know if it works in the current version of Firefox).

Clickable Json links

1 Answers1