What is "JSON Beautifier" extension and how does it work?
The extension installs an observer for top frame loads. When a frame has a mime type that may belong to a JSON object, a small code is injected into the page. When page loading is finished (which means the entire JSON object is fetched), the content will be parsed. On successful object parsing, an editor instance is created and the entire object is fed to the editor instance. You can see all the available keys and their values. You can even edit them or search through all the keys or values. There is a built-in tool to drag and drop objects to different places as well.
Please note that this extension use https://github.com/tulios/json-viewer project for displaying JSON objects.
As of version 0.1.3, the extension uses non-persistent background page which means that the background script unloads itself when the extension is not being used. This way, the extension has no effect on the browser performance when it is not actually being used.
How does the extension detect JSON pages?
Each web page when loads, it sends "content-type" header along with the headers so that browser knows how to handle this request. By installing this extension, an observer is installed for tracking these headers only for the top frame requests. If a matching mime type is detected, an script is injected into the page waiting for the entire data to be available. You will see a loading effect when the script is injected. Once the entire data is available, the script tries to parse the data and validate its content. If validation passes, the data is sent to an editor instance for displaying the result.
What are the available editing options in the editor?
You can edit the type of nodes to
String formats. Use
Auto format to allow the extension to decide the format. Also you can sort the children of a node in ascending or descending orders. Both of these operations are available through the selector box at the left side of an object (node). Also you can drag and drop nodes to change their place.
What's new in this version?
Please check the Logs section.
Can I expand or collapse all the available fields all-together?
Yes, there are two action buttons on top left side of the editor that allows you to expand or collapse all nodes. After a JSON object is fully loaded, only the first level keys are expanded. You can use these buttons to expand the entire JSON object to the last level or collapse the entire node to the zero level.
How can I test JSON Beautifier extension?
Here is a list of sample JSON files. Open these files in your browser after the extension is installed to see the editor in action.
And use these two large JSON objects to see how extension performs on large input data:
Can this extension beautify local JSON files (file://*/*)?
Yes, as of version 0.1.3, the extension can act on local files as well as server files. Just make sure "allow access to file URLs" is checked for this extension in chrome://extensions page if you are using the extension on a Chromium based browser like Chrome or Opera.
|Please keep reviews clean, avoid the use of improper language and do not post any personal information.|
The extension installs an observer for top frame loads. When a frame has a mime type that may belong to a JSON object, a small code is injected into the page. When page loading is finished, the content will be parsed. On successful object parsing, an editor instance is created automatically and the entire object is fed to the editor instance. You can see all the available keys and their values and edit them or search through all the keys or values if you want. There is a built-in tool to drag and drop objects to different places as well. The extension has a beautiful easy to use the editor to give you complete access to change and modify JSON pages.
JSON Beautifier also allows you to edit different types of nodes to Auto, Array, Object and String format. You can use Auto format to let the extension decide the format. You can also drag and drop nodes to change their place.
|storage||To save and get local preferences like version number|
|tabs||To update JSON tab content once it is loaded|
|<all_urls>||To be able to act on both local and server-side pages|