JSON Formatter Chrome Extension

A Chrome extension that automatically detects and formats JSON content on any webpage with syntax highlighting.

Features

• 🔍 Auto-Detection: Automatically detects JSON content on any webpage
• 🎨 Syntax Highlighting: Beautiful syntax highlighting using Prism.js
• 🌙 Dark Mode: Easy-to-read dark theme for better visibility
• 🚀 Fast: Instantly formats JSON as soon as content is detected
• 📱 Responsive: Works well with any JSON content size
• 🔄 Format Anywhere: Works not just with .json files but any webpage containing valid JSON

Installation

From Source

1. Clone this repository

   git clone https://github.com/thiengo105/json-formatter.git

2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" in the top right
4. Click "Load unpacked" and select the extension directory

How It Works

The extension automatically:

1. Detects if a webpage contains valid JSON content
2. Formats the JSON with proper indentation
3. Applies syntax highlighting for better readability
4. Presents the formatted JSON in a dark theme

Project Structure

json-formatter/
├── manifest.json      # Extension configuration
├── content.js        # Main JSON detection and formatting logic
├── prism.js         # Syntax highlighting library
├── prism.css        # Syntax highlighting styles
└── icons/           # Extension icons
    ├── icon16.png   # Icon for extension list
    ├── icon48.png   # Icon for Chrome Web Store
    └── icon128.png  # Large icon for Chrome Web Store

Development

Prerequisites

• Google Chrome browser
• Basic knowledge of JavaScript
• Text editor or IDE

Local Development

1. Make changes to the source code
2. Go to chrome://extensions/
3. Click the reload button on the extension card
4. Test your changes

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details

Author

• Thien Ngo - thiengo105

Acknowledgments

• Prism.js for the syntax highlighting functionality