JSON in Firefox
JSONovich is a Firefox extension that pretty-prints and colorizes JSON content. It needs lots of testing. Want to help? Drop me a line or leave a comment here.
Install
Install the latest version of the JSONovich extension.
How it works
JSONovich uses the json.org parser to pretty print JSON code and google-code-prettify to colorize it. Much of the component is based upon code written for the XHTML Mobile Profile extension which does a similar stream conversion.
What's with the name?
JSONovich is named after Pavement member Bob Nastanovich primarily because he seems like a swell guy.
Is it up on the Mozilla add-ons site?
JSONovich has been uploaded to addons.mozilla.org. If you're inclined, login to the site, download, test, rate, and review it.
Can I get at the code?
Yes, you can check it out from googlecode with:
svn checkout http://jsonovich.googlecode.com/svn/trunk/ jsonovich-read-only
Or you can browse the source.
Requirements
JSONovich works in Firefox 3.0.x and also 3.5.x, but could use testing in other versions.
Testing
Want some sample JSON? Want to see how it handles invalid JSON? Or perhaps some Unicode? See how it handles JSON with HTML entities?
Changelog
- 1.4
- Adds support for the application/rdf+json MIME type. [2010/01/26]
- 1.3
- Works in Firefox 3.6. [2010/01/24]
- 1.2
- Fixes unicode input bug and adds namespacing to the overlay. [2009/11/06]
- 1.1
- Adds application/json to the default Accept header to provoke CouchDB and similar services to return content with type application/json rather than text/plain. [2009/08/30]
- 1.0
- Changes maxVersion to 3.5.* (verified working). [2009/07/01]
- 0.9.3
- Bypasses built-in JSON parser in Firefox 3.1/3.2. Built-in parser does not seem to be indenting properly on JSON.stringify() calls. [2009/03/05]
- 0.9.2
- Dumps raw json input to browser window upon parser/syntax error. Google-code-prettify still makes its best attempt to colorize the broken json, which could be useful for debugging. [2009/02/10]
- 0.9.1
- Adds application/sparql-results+json mime type to list of conversions. [2009/01/29]
- 0.9
- Adds an event handler that prevents line numbers from being copied. [2009/01/15]
- 0.8.3
- Fixes bug in 0.8.2 which broke surfacing of JSON syntax errors. [2009/01/06]
- 0.8.2
- Handles HTML embedded in JSON more safely, escaping ampersands and left/right angle brackets. Changes the way line numbers are displayed. [2009/01/06]
- 0.8.1
- Reformats a few lines, adds license info re: google-code-prettify. [2009/01/03]
- 0.8
- Adding line numbers. Ideally this would be configurable. Or perhaps they're just a big nuisance. Feedback appreciated. [2009/01/02]
- 0.7
- Refactors per the MDC Javascript style guide. [2009/01/01]
- 0.6
- Reads in JSON and converts to UTF-8 for some naive Unicode handling. Thanks, plasma. [2008/12/29]
- 0.5
- Wraps long lines at the right-edge of the window. [2008/12/23]
- 0.4
- Adds a check to see if a native JSON parsing library is already loaded, as will be the case in Firefox 3.1. Uses that library if so, otherwise loads the module included in JSONovich. [2008/12/23]
- 0.3
- Handles JSON syntax errors more gracefully. Used to eat bad data and display nothing, but now the syntax error (from the JSON parser) is surfaced. [2008/12/23]
- 0.2.1
- Minor change to install.rdf to make addons.mozilla.org happy. [2008/12/22]
- 0.2
- Changed title of pretty-printed JSON to be its URI rather than the silly "JSONovich'd". Thanks, Andy K. [2008/12/22]
- 0.1
- Initial release. [2008/12/12]
[...] JSONovich is a Firefox extension that pretty-prints and colorizes JSON. [...]
[...] must be a better way of viewing pretty-printed JSON from Firefox than this. (EDIT: Hail, JSONovich!) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 [...]
Doesn't work on Solr JSON, at least in my case, using Solr 1.3 and Tomcat. Is it a MIME type issue?
@Mark
Have a Solr JSON URL handy that I can use for testing?
The plug-in ought to handle application/json and text/x-json but I haven't tested the latter. I also haven't tested how entries in mimeTypes.rdf might affect the behavior, and am not sure which overrides the other.
Thanks!
For what it's worth, your plugin seems to work fine in Firefox 3.1 Beta 2 on MacOSX. Thanks for your efforts.
This is a really useful plugin. Before I had been using a ghetto bookmark script to pretty-print, but this is much nicer. Thanks!
One piece of feedback… could you make the title of the page correspond to the URL rather than "JSONovich'd!"? When I've got a couple json tabs open it's hard to remember which is which.
[...] http://lackoftalent.org/michael/blog/json-in-firefox/ [...]
@Andy K
Great idea. Version 0.2 does exactly that and is linked above.
This extension is very good for examining JSON data, but seems not work with Traditional Chinese well. You can try the following JSON string:
{"autos":[{"name":"Bens","cname":"\u8cd3\u58eb"},{"name":"Toyota","cname":"\u8c50\u7530"}]}
JSONovich doesn't display it correctly: http://www.flickr.com/photos/plasmaball/3137776480/ . The correct one is http://www.flickr.com/photos/plasmaball/3137776518/ .
And I hope you have proper fonts on your computer to display Traditional Chinese correctly, so you can see what's going wrong.
@plasma Thanks! Version 0.6 handles Unicode better. Give it a go and let me know if it's still busted.
@michael Thanks! JSONovich works perfectly with Traditional Chinese. And I believe it will work with other languages since JSON uses Unicode. Well done!
The line-number is good, and it makes discussing with others easy. But I wish there's a way to turn it off since copy-n-paste the json string will also includes line numbers.
@plasma I've set some CSS attributes on the line numbers so that they should not be copyable. Are you actually able to copy them?
IIRC, I'm using the user-select (CSS3), -moz-user-select (Mozilla-specific), and unselectable (uncertain origin) properties. That's probably overkill, but I have had them in there precisely so that copy/paste isn't busted. If you are on 0.8.1 and you are able to copy the line numbers, I'd be interested in knowing what version of Firefox you're using and what platform you're on.
Thanks again for the feedback.
@michael Yes, I can copy-n-paste them. Below is from http://lackoftalent.org/tmp/chinese.json, what I do is ctrl-a, ctrl-c, then ctrl-v:
1 {
2 "autos": [
3 {
4 "name": "Bens",
5 "cname": "賓士"
6 },
7 {
8 "name": "Toyota",
9 "cname": "豐田"
10 }
11 ]
12 }
For visual effect, the line numbers were not selected, but somehow they were put in clipboard. You can see what I actually saw at http://www.flickr.com/photos/plasmaball/3171917909/ .
My environment is JSONovich 0.8.1, Firefox 3.0.5, and Windows XP.
If there are tags in JSON string, the "less than" and "greater than" symbols are not escaped, so the tags are actually working in the browser. In my opinions, they should be escaped so a user could see them.
Try the following JSON string:
{"text":"<p>This is a paragraph<\/p>","script":"Will the following script <em>run<\/em>?<script>alert('hi')<\/script>"}
I escaped 'less than' and 'greater than' symbol. If they do not appear on the blog correctly, please converted manually before you use the string for testing.
In my environment, an alert will pop up. I don't think it's a correct behavior.
One more suggestion for eye candy. Many entries in a JSON are key-value pairs. But in JSONovich, keys and values are all green, so they are not very distinguishable. If possible, use another color on keys might be a good idea.
And sorry for keeping bugging you. :p
@plasma It seems I've misunderstood the purpose of the user-select CSS property. You're right, it only prevents selection; it does not prevent copy/paste. Doh! Back to the drawing board. I'm not quite sure how to handle line numbers. Here's the dilemma. Line numbers seem somewhat useful. But enabling them becomes problematic for two reasons: 1) the copy/paste issue which you've pointed out, and 2) long lines that wrap screw up the numbering.
Because I think it's useful for folks to copy/paste, and it's convenient to have long lines wrapped, I'm inclining towards disabling the line numbers altogether. But I'm open to alternatives.
I've added in naive HTML encoding as well. First it replaces all instances of '&' with '&', then it replaces '< ' with '<', and finally '>' with '>'. Any corner cases I should worry about here? I'll check that in as 0.8.2 in a little bit so you can test. I've added your test JSON to http://lackoftalent.org/tmp/entities.json
I'm using google-code-prettify for the colorizing, so there's no clean way to handle the key-value pair colors at present, sadly.
Feel free to keep "bugging" me, by all means. Your feedback has been most helpful!
@michael Yes, the line numbers are useful, but somehow I may want to copy-n-paste it for (1) formatted text to communicate with other easily, and (2) formatted text WITH line numbers at the beginning of each lines to communicate with others easily. So, it is really a dilemma that some may want the line numbers included, and some may not.
In my opinion, I can remove the line numbers with a simple regular expression, but putting them back isn't easy. Since this is a firefox-addon, you might consider to put a panel at the top of canvas and place a 'line number' button in the panel, so the line numbers can be toggled on-the-fly.
However, I am fine without line number since it is not critical to me. I'd like to hear from other about their thinking about line numbers as well.
About the coloring, I took some time to poke around google-code-pretty. There is a feature that may help you: 'Extensible language handlers for other languages. You can specify the language.' There are several language handler examples under http://google-code-prettify.googlecode.com/svn/trunk/src/ that you might be interested in.
@plasma
Okay, I took another stab at blocking copy of line numbers. The implementation is a bit hackish — I've attached an oncopy event handler to the body tag that removes the line number div from the DOM before copying, and sets a timer to restore that div one second later — but it's working in my tests. I'll be interested to hear how it works for others. Again, it's hackish, but hey, patches and other developers are welcome!
I also looked at the custom lexers for google-code-prettify but it's just a little too involved for me at this time. Thanks for the suggestion, though.
Version 0.9 is uploaded and ready for testing.
@michael
Wow, that hack is cool. It works here.
I thought about the custom lexer, and I was thinking it may not be a proper answer to the problem since every chars inside quotation marks are part of a string. Anyway, you can give it a try if you are interested in making a better visual experience. :)
Installing from the mozilla add-ons page produces an ERROR about an invalid download.
Installing from this page works fine.
@Keith
Which version? 0.9.1? Does the link point at https://addons.mozilla.org/en-US/firefox/downloads/file/45860/jsonovich-0.9.1-fx.xpi ?
Maybe give it another shot. I was just able to install via the mozilla add-ons page okay.
Thanks for the feedback.
Hello,
Would it be possible to have the add-on also be able to handle JSONP?
Thanks,
Dr. Teeth
@Dr. Teeth
I'm not familiar with JSONP. The way the extension works now is by hijacking the MIME type handling for a small set of JSON-related types, and handing off to a JSON parser. Does JSONP have its own MIME type(s)? Can it be parsed by a vanilla JSON parser?
If you point me at a URL of sample JSONP content, I can take a shot.
Thanks,
-Mike
P.S. If you're interested, I'd gladly get out of the way and accept a patch if you'd like to take a stab at it.
It doesn't seem to be working for JSON returned by the GData API for Google Spreadsheet. It may have something to do with the JSONP wrapper
(JSONP is a JSON object wrapped in a callback function. It is a way to get around cross-site browser limitations and access JSON data on external servers.)
Chris,
Do you have a URL where I may view a sample of said JSON(P)? I'll take a look.
Thanks!
Excellent plugin, in the past I've had to do the cut & paste dance with an AIR app to prettyify json for me.
One suggestion though, instead of just printing a syntax error and bailing, it would be nice to (after the syntax error message) dump the json content, perhaps highlighting everything after the error occurs. For example:
SyntaxError: missing ] after element list
{"alpha":[1,2,3,4], "bravo":[5,6,7,8, "charlie":[9,10,11,12]}
Where everything after the unmatched opening brace would be highlighted red (or something along those lines). At any rate, still incredibly useful in its current form!
@Evan
Thanks. The JSON parser that I'm using does not provide the location of the error; it just raises a SyntaxError and quits.
Great idea to dump the raw json input, though, so that developers don't need to view source to see it. One benefit of dumping it is that the colorizer still does its thing, so it might make it easier to find the error(s).
Just commited 0.9.2. Let me know if this works for you.
Just discovered the plugin.. been looking for something like this for a long time! Kudos for making it happen.
One question: do you only look at the extension? It would be nice if the plugin also detected the json mime types, like "text/javascript". At the moment, the following url is not picked up by the plugin:
http://api.postrank.com/v2/feed/info?format=json&appkey=postrank.com/example&id=everburning.com
ig
@Ilya
JSONovich does not look at file extensions at all; it's entirely MIME type-driven. The only types supported so far are those which return JSON definitively. Not sure that can be said about text/javascript. The official JSON type is application/json. The folks who run postrank ought to return the proper JSON type, ideally.
Cool extension, but it isn't working too well for me. All JSON documents are a single line of green text. It isn't blowing up, but it isn't formatting either.
I am using a firefox branch build
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1b3pre) Gecko/20090226 Shiretoko/3.1b3pre
Anyone else seen this behavior?
@Travis
Even this: http://lackoftalent.org/tmp/chinese.json ?
That is strange. I haven't seen this behavior before. Could be it's getting tangled up w/ another extension?
@Travis
The latest version, 0.9.3, should now work in versions of Firefox up to 3.2a1pre. Thanks a bunch!
Does this include any keyboard shortcuts to expand/collapse all sub-nodes within a node? if not, could this please be added as a feature request?
Im currently using jsonview plug-in, but am looking for another plug-in to replace it, since it doesnt support this 'expand/collapse' functionality…
@PRM
There is no collapsibility in JSONovich. It was my impression that this is a feature of jsonview, though. There are no plans to support that in JSONovich but I would welcome patches or other developers who want to build it out some more.
Is there an way to activate the plug-in for sites that dont return correct headers ?
My problem was that couchdb only returned Content-type: application/json, if it got the correct Accept header.
forcing the correct Accept: application/json header works fine with this: http://modifyheaders.mozdev.org/.
@kij
Thanks for dropping a line and posting your experience here.
I get no colorizing and the preferences button isn't active on this add on. How do I get colorization?
@Dennis:
What version of Firefox are you running? What operating system are you running? What URL are you trying to get colorization on?
This is all useful for testing. Thanks.
How can I open it ?
@beamq:
View any URL that returns a valid JSON MIME type, such as application/json. Check out any of the four URLs above in the "Testing" section.
I think you need to up the version; it lists itself as "Not compatible with Firefox 3.5.2"
@Bill:
Which version did you try to install and from which location? maxVersion is set to 3.5.* in install.rdf, so I'd be a bit puzzled if the latest (1.0) version didn't install on 3.5.2.
@kij:
JSONovich 1.1 adds application/json to the default Accept header, so it should play nice with CouchDB now.
Will there be support for Firefox 3.6? If so, when will an updated version be released?
@Christian:
JSONovich 1.3 works with Fx 3.6 You can install it via this page; it takes months for updates to show up on addons.mozilla.org.
Thanks.
[...] I updated the version up on the Mozilla site as well, but things tend to stay in the sandbox for months at a time. (For instance, I submitted version 1.2 back in November, and it's not yet available.) Feel free to install via my page. [...]