/json-lens

JSON-Lens is a minimalist Chrome extension for formatting JSON.

Primary LanguageJavaScript

JSON Lens

English | δΈ­ζ–‡

A powerful Chrome JSON formatting and viewing extension designed for developers, providing a professional JSON data viewing, preview, and download experience.

πŸ“Ί Preview

JSON Lens Preview

πŸš€ Features

πŸ” Smart Detection

  • Automatically detect JSON files and content
  • Support for various JSON response formats
  • Detect .json files and application/json content types

🎨 Syntax Highlighting

  • Professional code highlighting display
  • Differentiate between data types (string, number, boolean, null)
  • Dark and light theme switching

πŸ“Š Structured Display

  • Clear hierarchical structure display
  • Line number display function
  • Support for node collapse/expand
  • Friendly display for large JSON files

πŸ”— Link Functionality

  • Automatic recognition of URLs in JSON
  • Click links to jump directly
  • Hover to preview link content
  • Real-time preview of image links

πŸ“‹ Smart Copy

  • One-click copy button in the top toolbar
  • Smart status switching (Copy ⇄ Copied)
  • Support for modern and traditional copy methods
  • Real-time icon status feedback, no popup interference

🎨 Modern Interface

  • High-quality SVG vector icon design
  • Smart status switching and visual feedback
  • Perfect adaptation to dark/light themes
  • Smooth interactive animations and hover effects

βš™οΈ Flexible Configuration

πŸ–ΌοΈ Image Extraction and Download

  • Automatic extraction of image URLs from JSON
  • List preview and single image preview (support ESC/mask close)
  • Single download with save dialog support
  • High-risk confirmation popup before batch download (support for jumping to Chrome download settings)
  • Batch download progress and result prompts
  • Smart switching of raw JSON data
  • Unified expand/collapse control
  • Personalized setting options
  • Data formatting switch

πŸ“¦ Installation

Developer Mode Installation (Recommended)

  1. Download the source code to your local machine
  2. Open Chrome browser
  3. Visit chrome://extensions/
  4. Enable "Developer mode" in the top right corner
  5. Click "Load unpacked extension"
  6. Select the project folder
  7. Installation complete!

Chrome Web Store Installation (Coming Soon)

Search for "JSON Lens" to find and install.

🎯 Usage Instructions

Auto Formatting

  1. Visit any page containing JSON data
  2. The extension will automatically detect and format the display
  3. Enjoy a clear JSON structured view

Manual Formatting

  1. Click the extension icon in the browser toolbar
  2. Click "Format Page" in the popup window
  3. View the formatted JSON content

Feature Operations

  • Collapse/Expand: Click the arrow icon in front of the node
  • All Operations: Use the expand/collapse button in the top control bar
  • Raw Data: Click the "Show Raw Data" button to switch
  • Link Preview: Hover over links to view preview
  • Image Preview: Hover over image links for real-time preview

πŸ“„ License

MIT License - see LICENSE file for details

πŸ™ Acknowledgements

Thanks to all developers who contributed to this project and user feedback.