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.
What are the supported shortcut keys?
List of supported shortcut keys for "Tree" view:
|Alt+Arrows||Move the caret up/down/left/right between fields|
|Ctrl+Shift+Arrow Up/Down||Select multiple fields|
|Shift+Alt+Arrows||Move current field or selected fields up/down/left/right|
|Ctrl+Enter||Open link when on a field containing an url|
|Ctrl+Ins||Insert a new field with type auto|
|Ctrl+Shift+Ins||Append a new field with type auto|
|Ctrl+E||Expand or collapse field|
|Alt+End||Move the caret to the last field|
|F3, Ctrl+G||Find next|
|Shift+F3, Ctrl+Shift+G||Find previous|
|Alt+Home||Move the caret to the first field|
|Ctrl+M||Show actions menu|
|Ctrl+Z||Undo last action|
List of supported shortcut keys for "Code" view:
|Ctrl+\||Format JSON data, set proper indentation|
|Ctrl+Shift+\||Compact JSON data, remove all whitespace|
It is possible to open an embedded JSON on a page with this editor so that it could be modified and viewed in a syntax highlighting editor?
Use your mouse to select the entire JSON string and use the right-click context menu item to open the selected JSON in a browser tab in a new editor instance.
It is possible to use this extension to create a new JSON object from scratch?
Press the action button on the browser toolbar to open a new editor with a sample JSON in it. You can alter the view mode to the preferred mode and when JSON editing is done, press the save button to save the results to the local disk. Note that the JSON objects in this editor are not persistent.
Can I copy a portion of a JSON object using this tool?
There are three options on the "Actions" menu when viewing a JSON in the "Tree" view. You can use "Copy Object Path" to copy the current path to the clipboard or use the "Copy Inner JSON" or "Copy Outer JSON" items to copy a portion of the entire object in the JSON formatted string.
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|