What is "JSON Beautifier" extension and how does it work?

The extension sets up a monitoring system for top-frame page loading. A small code snippet is injected into the page if a frame contains a mime type associated with a JSON object. The page's content is parsed once the page finishes loading (indicating that the complete JSON object has been fetched). If the object parsing is successful, a JSON editor instance is loaded, and the entire object is provided to this instance. This enables you to effortlessly access and review all available keys and their corresponding values. Moreover, you can modify them or perform searches across the keys and values. Additionally, there is a convenient built-in tool for dragging and dropping objects to different locations in the JSON tree.

This extension use tulios/json-viewer project for displaying JSON objects.

The extension uses a non-persistent background page (starting from version 0.1.3), ensuring that the background script unloads itself when the extension is inactive. So, the extension does not affect the browser's performance when not in use.

How does the extension identify JSON pages?

One of the headers that the server returns when a web page loads is the "content-type" header. This header provides information to the browser about how to handle the request. The extension installs an observer specifically for tracking this header in the top-frame requests. A script is added to the page when a matching mime type is detected. The script then waits with a loading animation until all the necessary data is available. Once the data transfer is complete, the script attempts to parse and validate the contents. After successful validation, the data is sent to a JSON editor instance to display the resulting output.

What are the available editing features in the editor?

You can adjust the node types to either "Auto," "Array," "Object," or "String" formats. The "Auto" format allows the extension to determine the appropriate format automatically. Additionally, you can sort the children of a node in ascending or descending order. These editing operations can be accessed through the selector box located on the left side of each object (node). You can also change the position of nodes by using the drag-and-drop feature.

What's new in this version?

Please check the Logs section.

Is there a way to expand or collapse all JSON keys in the editor at once?

Certainly! You can find two action buttons on the top left side within the editor. These buttons enable you to expand or collapse all nodes at once. Once a JSON object is fully loaded, only the keys on the first level are expanded by default. Using these two buttons, you can expand the entire JSON object to the deepest level or collapse the entire node hierarchy to the top 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.

• https://api.github.com/repos/tulios/json-viewer
• http://graph.facebook.com/github
• https://api.github.com
• https://api.github.com/gists/public

And use these two large JSON objects to see how extension performs on large input data:

• https://raw.githubusercontent.com/ebrelsford/geojson-examples/master/596acres-02-18-2014.geojson
• https://api.takealot.com/rest/v-1-4-2/productlines?available=1&cat=10371&instock=1&rows=10&sort=score%20desc&start=0

Does this extension support beautifying local JSON files (file:///)?

Not only can the extension beautify server files, but it can also beautify local JSON files (starting from version 0.1.3). Please make sure that the "allow access to file URLs" option is enabled for this extension on the "chrome://extensions" page. This step is necessary if you are on a Chromium-based browser such as Chrome, Edge, or Opera.

Supported shortcut keys?

List of supported shortcut keys for the "Tree" view:

List of supported shortcut keys for the "Code" view:

Can I use this editor to open and modify embedded JSON objects on a page while benefiting from syntax highlighting?

Certainly! You can achieve this by using your mouse to select the entire JSON string. Once the JSON is selected, right-click and choose the appropriate context menu item to open the selected JSON in a new editor instance, which will open in a browser tab. From there, you can easily modify and view the JSON in the syntax highlighting view provided by the editor.

Can this extension be used to generate a new JSON object from scratch?

Click the action button on the browser toolbar to open a new editor instance. The editor will contain a sample JSON structure. You can adjust the view mode according to your preference. Once you have finished editing the JSON, click the save button to export the results to your local disk. It's important to note that the JSON objects in this editor are not persistent, meaning they are not permanently stored or retained.

Is it possible to extract a specific portion of a JSON object using this tool?

When viewing a JSON object in the "Tree" view, the "Actions" menu offers three convenient options. Firstly, you can use the "Copy Object Path" item to copy the current path to the clipboard. Additionally, you can copy a particular segment of the entire object in the JSON formatted string. You can accomplish this by selecting "Copy Inner JSON" or "Copy Outer JSON" based on your specific needs.

How does the extension handle displaying JSON files containing large numbers, considering that JavaScript does not natively support them?

In versions before 0.3.7, the extension relied on the native JSON parser, which resulted in the truncation of large numbers. However, starting from version 0.3.7, the extension employs a different approach. It converts large numbers into read-only objects, represented in the format "{type: 'Big Number', value: '###n'}". The 'value' field is a string that ends with the character 'n', indicating it represents a large number (such as BigInt or BigFloat). This approach allows users to modify the value within these objects. Once the user exports the data, these objects are converted back into their respective large-number formats.