Fast and flexible JSON viewer.

Latest Version

Version
0.9.5.1
Update
March 25, 2024
Size
55.95KiB
Developer
Category
Users
57
Rating
1 ★
Manifest Version
3
Web Store Status
Languages Support
English (United States)
See more
Permissions
See more

JSON Navigator Extension

Fast and flexible JSON viewer. This is the one you want :)

Live demo: https://r55man.com/json-navigator/

* FAST FAST FAST. Nothing else compares. Supports 100MB+ file sizes. Loads files virtually instantly.

* JSON Burrowing!!! This powerful feature allows you to quickly descend into deep hierarchies of data without becoming overwhelmed with content on the screen. Clickable JSON Path Bar to instantly navigate to any point in the current hierarchy. Works with the browser's native forward/back buttons to quickly navigate the JSON tree, and allows you to open subtrees in new tabs and/or windows.

* The on-screen control panel gives instant access to tons of useful features:
- Toggleable raw JSON view.
- Toggleable null value hiding. Null value hiding cascades upwards from all-null children.
- Toggleable bold keys.
- Toggleable byte counts: shows how much data is inside a given hierarchy.
- Toggleable array sizes and object item counts.
- Toggleable key sorting.
- Toggleable color-coded depth guides.
- Toggleable auto-expand.
- Toglleable HTML Markup.
- Toggleable hyperlink conversion.
- Toggleable line wrapping.
- Toggleable dark/light mode.
- Configurable indent depth.
- Configurable auto-expand and click-to-expand depth.
- Configurable line spacing.
- Configurable multi-level expand on all objects and arrays.
- Configurable fonts and font sizing. Console fonts and JSON code fonts are independently configurable.

* Furthermore, each entry in the JSON file has it's own menu giving you powerful navigation tools:
- Collapse-all-children feature on all objects and arrays.
- Expand-all-children feature on all objects and arrays.
- One-click copy-to-clipboard on all non-null values.
- Smart clipboard omits null entries when \"Show Nulls\" is turned off.
- \"Burrow\" link, opening this key/val pair isolated from the rest of the document.

* One-click in-app documentation.

* Full Internationalization support. Controls and documentation are available in six languages:
- English
- French
- German
- Spanish
- Russian
- Chinese

* No-clutter display omits syntax operators and allows you to turn off the header and footer.

* Full set of keybindings for easy keyboard navigation.

* Settings saved between sessions.

* Multiple Dark Mode and Light Mode themes to chose from.

* Works on local files as well as remote.


## Known Issues :: To be addressed before v1.0

- Key sorting is buggy. It gets keys mixed up when the tree is expanded more than a couple levels deep.

- Wrapped lines shift jarringly when the item menu is displayed. The item menu should not trigger a reflow of wrapped lines.

- \"Show Bytes\" incurs a 25-50% overhead in JSON processing time, which gets progressively worse as the data gets shallower. On small files (less than 1MB) this increase is unnoticeable, but it gets worse the larger the files get. Currently there is no way to prevent this overhead; turning off \"Show Bytes\" will still incur the penalty, the bytes just won't be displayed. This will be addressed in a future (pre 1.0) release.

- The controls next to object/arrays need to be better documented, explaining what they do and how they tie into \"Expand Depth\". In fact, the entire program needs to be better documented :/

- The search bar is rather flaky in its interaction with other functions at the moment. Searching from the root level generally works as expected, but searching from subtrees is bugged. The search UI is primitive and unintuitive, and does not allow for any kind of search customization, e.g. key/val/key+val matching ability to search by substring vs regex, etc. In general, search needs a lot of work before it's production-quality.

- In the UI, cascading nulls only trigger once you uncover nulls deep enough to reveal that all the children are null. This will eventually be need to fixed, perhaps by pre-scanning the initial JSON file to reveal all the nulls when the document loads.

- There are currently only a handful of themes and fonts to choose from, and no way to add your own. A theme editor will soon be available, making it simple to design custom themes and add custom fonts.

- There is no way to configure the plugin to work with mime types other than application/json, or to key off of filename extension, or to force-convert a page that you know has JSON data but the browser insists on rendering itself. These issues will be addressed in an upcoming release.

- Large arrays (1000+ elements) result in a slow UI and are pretty much useless in terms of finding data. There should instead be a configurable cutoff length, with progressive/selective display of additional items.

- There needs to be a live demo. People don't trust a random extension with 10 users :) The code is in the process of being refactored to work outside of a browser environment.

## Known Non-Issues :: These are not bugs

- There are no line numbers and no plans to include them, as it is difficult to find a compelling case for them in the context of a JSON file. The line numbers would not match those of the original file due to the formatting conversion, and therefore would be meaningless.

- The raw view would look better if it were marked up (c.f. highlight.js), but unfortunately syntax highlighters bomb on large files because they create an ungodly number of nodes. The raw view is already slow, taking several seconds to render on large files. Syntax highlighting would bring this to a crawl.


## Post-1.0 Ideas

- Logic layer for building a custom UI around the JSON files.

- Editing and saving, in conjunction with the logic layer.

- File import / export / upload / download.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx","manifest_version": 3,"name": "JSON Navigator","description": "Fast and flexible JSON viewer.","version": "0.9.5.1","author": "r55man ","host_permissions": [""],"icons": { "128": "icon/128.png", "48": "icon/48.png", "16": "icon/16.png" },"content_scripts": [{"matches": [""],"js": ["content.js"],"run_at":"document_start"}]}
Read more

How to download and manually install JSON Navigator extension for Chrome

Looking for a way to install JSON Navigator extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install JSON Navigator extensions manually, this article outlines two simple methods to effortlessly install JSON Navigator extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download JSON Navigator extension and manually install through Drag &Drop

If you ever need to manually install a JSON Navigator extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the JSON Navigator Extension by clicking the "Download CRX" button on the website.

Look for the JSON Navigator extension you wish to install. Go to the website and download the JSON Navigator extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for JSON Navigator extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the JSON Navigator extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download JSON Navigator extension for Chrome and install in Developer Mode

This is another method to install JSON Navigator extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the JSON Navigator extension file

Select and download the JSON Navigator extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the JSON Navigator extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your JSON Navigator extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the JSON Navigator extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install JSON Navigator extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

JSON Viewer Pro Extension · Developer Tools 57 137 ★ 349KiB

icon

JSON-As-Table Viewer Extension · Developer Tools 57 9 ★ 616KiB

icon

Seven JSON Viewer Extension · Developer Tools 57 8 ★ 228KiB

icon

JSON Formatter Extension · Developer Tools 57 33 ★ 102KiB

icon

Functional JSON viewer Extension · Developer Tools 57 2 ★ 54.79KiB

icon

JSON Viewer Extension · Developer Tools 57 45 ★ 140KiB

icon

Code Formatter - JSON, CSS & JavaScript Extension · Developer Tools 57 15 ★ 1.38MiB

icon

JsonDiscovery Extension · Developer Tools 57 44 ★ 255KiB

icon

JSON Beautifier and Editor Extension · Productivity 57 36 ★ 450KiB

icon

JSON Hero Extension · Developer Tools 57 7 ★ 868KiB

icon

Mark tab manager Extension · Productivity 57 32 ★ 47.08KiB

icon

JSON Lite Extension · Developer Tools 57 56 ★ 23.65KiB

icon

Virtual Json Viewer Extension · Developer Tools 57 8 ★ 553KiB

icon

JSON Formatter Extension · Developer Tools 57 4 ★ 194KiB

icon

DJSON. JSON Viewer & Formatter Extension · Developer Tools 57 68 ★ 126KiB

icon

JSON Editor Extension · Developer Tools 57 2 ★ 380KiB

icon

find+ | Regex Find-in-Page Tool Extension · Developer Tools 57 132 ★ 112KiB

icon

Just JSON Viewer Extension · Developer Tools 57 2 ★ 70.29KiB

icon

Byte Buddy Extension · Fun 57 3 ★ 1.52MiB

icon

TABLERONE tab manager Extension · Productivity 57 827 ★ 4.11MiB

icon

Super PiP - Picture-in-Picture with playback controls and subtitles Extension · Fun 57 214 ★ 28.45KiB

icon

JSON Formatter Extension · Developer Tools 57 65 ★ 40.9KiB

icon

JSON Dark Mode Viewer Extension · Developer Tools 57 3 ★ 292KiB

icon

JSON RPC Chrome Viewer Extension · Developer Tools 57 14 ★ 122KiB