I’m a big fan of JSON as a data exchange format. It’s simple, lightweight, easy to produce and easy to consume. However, JSON hasn’t quite caught up to XML in terms of tool support. For example, if you try to visit a URL that produces JSON (using the official “application/json” MIME type), Firefox will prompt you to download the file. If you try the same thing with an XML document, it’ll display a nice formatted result with collapsible sections. I’ve always wanted a Firefox extension that would give JSON the same treatment that comes built-in for XML, and after searching for it for a while I just gave up and wrote my own. The JSONView extension (install) will parse a JSON document and display something prettier, with syntax highlighting, collapsible arrays and objects, and nice readable formatting. In the case that your JSON isn’t really JSON (JSONView is pretty strict) it’ll display an error but still show you the text of your document. If you want to see the original text at any time, it’s still available in “View Source” too.
I’ve been eager to release this for some time, but I finally pushed it to addons.mozilla.org last night. I actually started development on it about 7 months ago, but work got paused on it for about 6 months due to stuff out of my control, and then I had some other projects I was working on. The actual development only took a few days (including digging through some confusing Unicode bugs). I thought it was funny that right as I was resuming work on JSONView I noticed that a JSON explorer had actually landed for Firebug 1.4, which I’ll also be looking forward to. Initially I had intended to build that functionality as part of my extension. There’s a lot I’d like to add on, like JSONP support and a preference to send the “application/json” MIME type in Firefox’s accept headers.
This is actually my first real open source project – I’ve released some code under open source licenses before, but this is actually set up at Google Code with an issue tracker and public source control and everything. I’ve licensed it under the MIT license. I’m really hoping people get interested in improving the extension with me. I’ve pre-seeded the issue tracker with some known bugs and feature requests.
The extension itself is pretty simple. I wasn’t sure how to approach the problem of supporting a new content type for Firefox, so I followed the example of the wmlbrowser extension and implemented a custom nsIStreamConverter. What this means is that I created a new component that tells Firefox “I know how to translate documents of type application/json into HTML”. And that it does – parsing the JSON using the new native JSON support in Firefox 3 (for speed and security) and then constructing an HTML document that it passes along the chain. This seems to work pretty well, though there are some problems – some parts of Firefox forget the original type of the document and treat it as HTML, so “View Page Info” reports “text/html” instead of “application/json”, “Save as…” saves the generated HTML, Firebug sees the generated HTML, etc. Just recently I came across the nsIURLContentListener interface, which might offer a better way of implementing JSONView, but I’m honestly not sure – the Mozilla documentation is pretty sparse and it was hard enough to get as far as I did. I’m hoping some Mozilla gurus can give me some pointers now that it’s out in the open.
Right now the extension is versioned at “0.1b1″ which is a wimpy way of saying “this is a first release and it could use some work”. It’s also trapped in the “sandbox” at addons.mozilla.org, where it will stay until it gets some downloads and reviews. Please check it out, write a little review, and soon people won’t have to log in to install it!
Note: While composing this post I ran across the JSONovich extension which was apparently released in mid-December and seems to do similar stuff to JSONView. No reason we can’t have two competing extensions, though.
Tags: extension, Firefox, json, open source
Entries
[...] JSONView is a new Firefox extension that gives you a nice way to view your JSON documents (JSONovich also does the trick). [...]
Does this support 3.1 yet? In the latest beta I am simply prompted to download the file, and yes the MIME is application/json.
I haven’t tried it on FF3.1, but I’ll take a look in the next couple of days and make sure it does work.
[...] JSONView and “JSONovich”: display JSON nicely in Firefox – shouldn’t that be a native [...]
[...] JSONView – View JSON documents in Firefox « Blog | BRH.numbera.com I’m a big fan of JSON as a data exchange format. It’s simple, lightweight, easy to produce and easy to consume. However, JSON hasn’t quite caught up to XML in terms of tool support. For example, if you try to visit a URL that produces JSON (using the official “application/json†MIME type), Firefox will prompt you to download the file. If you try the same thing with an XML document, it’ll display a nice formatted result with collapsible sections. I’ve always wanted a Firefox extension that would give JSON the same treatment that comes built-in for XML, and after searching for it for a while I just gave up and wrote my own. The JSONView extension (install) will parse a JSON document and display something prettier, with syntax highlighting, collapsible arrays and objects, and nice readable formatting. (tags: firefox json) [...]
Really nice work on this. I just finished an alpha of a syntax highlighting extension (https://addons.mozilla.org/en-US/firefox/addon/10740) and I ran into some similar challenges with the content listener approaches you describe.
So I ended up just letting Firefox display the document, and then listening for the DOMContentLoaded event to modify the DOM directly. But then the document is in some kind of odd plain text mode where innerHTML and other things are broken.
The documentation was also a pain point for me, I mean there are a bunch of great resources out there, but it’s hard to get a clear idea of what’s a hack vs. a good long-term approach. Anyways good luck.
[...] http://brh.numbera.com/blog/index.php/2009/02/24/jsonview-view-json-documents-in-firefox/ : JSON View est un plugin Firefox pour afficher élégamment du JSON [...]
The extension is now compatible with FF 3.1, for all you Firefox beta testers.
Congratulations on the Ars ink.
http://arstechnica.com/open-source/news/2009/03/web-developer-tips-json-tools-for-your-web-browser.ars
Hi Ben, was wondering if there are any plans for offline debugging? e.g. I have a file blah.json on my desktop, but cannot view it with JSONView unless I upload it to a web server to get the application/json content-type set.
Hey Richard, you can propose and keep track of bugs and feature requests on JSONView’s Google Code issue tracker. Opening JSON files locally is already done, and I hope to release it when I’m back in town on Tuesday. Otherwise it’ll have to wait until I’m next at home at the end of the month.