Skip to content

jackrabbitbit/searchjson_chrome

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SearchJSON

A privacy-first JSON toolkit for Chrome. Format, search, and compare JSON documents—all processing happens locally in your browser.


Features

  • Zero Data Retention — All processing is client-side. No servers, no tracking, no storage.
  • Instant Formatting — Paste JSON and get clean, indented output immediately.
  • Deep Search — Find any value and get the exact JSON path to it.
  • Compare Mode — Side-by-side comparison of two JSON documents with synchronized search.
  • Multiple Path Formats — Copy paths in PostgreSQL, JavaScript, Python, JSONPath, or a custom format.
  • Dark/Light Themes — Switch between themes based on your preference.

New in v1.1.0

  • Tree View — Collapsible hierarchical view of your JSON structure. Expand and collapse nodes to navigate complex data.
  • Visual Diff — Highlight differences between two JSON documents with color-coded markers (green for additions, red for deletions, yellow for changes).
  • Export/Download — Download your formatted JSON as a .json file with a single click.
  • YAML Import — Paste YAML content and convert it to JSON instantly.

Installation

Chrome Web Store

https://chromewebstore.google.com/detail/gghidbkkfjplgofhfjagpmafpmbckdgi?utm_source=item-share-cb

Manual Installation

  1. Clone this repository:

    git clone https://github.com/jackrabbitbit/searchjson_chrome.git
  2. Generate PNG icons (Chrome requires PNG format):

    • icons/icon16.png (16x16)
    • icons/icon32.png (32x32)
    • icons/icon48.png (48x48)
    • icons/icon128.png (128x128)

    Convert from the included icons/icon.svg using any SVG-to-PNG tool.

  3. Open chrome://extensions/ and enable Developer mode.

  4. Click Load unpacked and select the searchjson_chrome folder.

  5. Pin the extension from the toolbar for quick access.


Usage

Formatting JSON

Paste JSON into the input panel. It formats automatically on paste.

Searching

Enter a search term and press FIND or Enter. Results display the path to each match. Click any result to copy the path to your clipboard.

Compare Mode

Click COMPARE to open a second panel. Paste a second JSON document and search across both simultaneously. Results are labeled SRC or CMP to indicate the source.

Path Formats

Format Example
PostgreSQL ->'data'->'users'->0
JavaScript data.users[0]
Python ["data"]["users"][0]
JSONPath $.data.users[0]
Custom Configure separator, key wrap, index wrap, and prefix

Keyboard Shortcuts

Shortcut Action
Ctrl + F Focus search input
Escape Clear highlights, return to edit
Enter Search / Next match
Double-click Exit highlight mode

Privacy

Your data never leaves your browser.

  • All JSON processing is done locally
  • No server communication
  • No analytics or tracking
  • No data storage beyond your session
  • Works completely offline

Project Structure

searchjson_chrome/
├── manifest.json        # Chrome extension manifest
├── popup.html           # Extension popup UI
├── popup.js             # Popup logic
├── background.js        # Service worker
├── app.html             # Main application page
├── css/
│   └── style.css        # Application styles
├── js/
│   └── app.js           # Main application logic
├── icons/
│   ├── icon.svg         # Source icon (vector)
│   └── icon*.png        # Generated PNG icons
└── README.md

Development

Requirements: Google Chrome (or Chromium-based browser). No build tools required.

  1. Edit the source files.
  2. Go to chrome://extensions/ and click the refresh icon on the SearchJSON card.
  3. Test your changes.

Key Files:

  • app.html — Main UI structure
  • js/app.js — Application logic (client-side JSON processing)
  • css/style.css — Lumina v2 design system

Changelog

v1.1.0

  • Tree View: Collapsible hierarchical JSON navigation
  • Visual Diff: Color-coded comparison highlighting
  • Export/Download: Save formatted JSON as a file
  • YAML Import: Convert YAML to JSON

v1.0.0

  • Initial release
  • Client-side JSON formatting
  • JSON search with path extraction
  • Compare mode for two documents
  • Multiple path format options (PostgreSQL, JavaScript, Python, JSONPath, Custom)
  • Dark/Light theme support
  • Keyboard shortcuts

License

MIT License — See LICENSE for details

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors