Skip to content

7angle/json-pilot

Repository files navigation

JSON Pilot ✈️

JSON Pilot

A powerful browser extension for viewing, formatting, and exploring JSON content in your browser. Transform raw JSON data into an interactive, beautifully formatted tree view with powerful exploration features.

✨ Features

  • 🎨 Beautiful Interface: Clean, modern design with intuitive controls
  • 🌗 Theme Support: Switch between light and dark themes
  • 🔍 Interactive Exploration:
    • Expand/collapse nodes
    • Click to select nodes
    • Copy JSON paths
    • Copy selected values
  • 🎯 Path Navigation: Visual path display for selected nodes
  • 🚀 Performance Optimized: Handles large JSON files with ease
  • 💡 Smart Detection: Automatically detects and formats JSON content
  • 🛡️ Privacy Focused: All processing happens locally in your browser
  • 🔒 Secure: No external servers, no data collection

🚀 Quick Start

Chrome Installation

  1. Download the latest release from GitHub Releases
  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

💻 Development

Prerequisites

  • Node.js 16.x or higher
  • npm 7.x or higher
  • Modern web browser (Chrome 88+ or Firefox 109+)

Setup

# Clone the repository
git clone https://github.com/7angle/json-pilot.git

# Navigate to project directory
cd json-pilot

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

json-pilot/
├── src/                # Source code
│   ├── App.vue        # Main application component
│   ├── components/    # Vue components
│   └── main.js        # Application entry point
├── public/            # Static assets
├── manifest.json      # Extension manifest
├── background.js      # Background script
├── content.js         # Content script
└── vite.config.js     # Vite configuration

🎯 Usage

  1. View JSON: Navigate to any URL that returns JSON content

    • The extension automatically detects and formats JSON
    • Raw JSON text is also transformed into the viewer
  2. Interact with JSON:

    • Click the expand/collapse icons to explore nested objects
    • Click on any value to select it
    • Use the copy button to copy selected JSON
    • Toggle between light and dark themes
  3. Navigation:

    • Use the path display to understand your location in the JSON structure
    • Click the expand/collapse all button to quickly view or hide all nodes

🤝 Contributing

We welcome contributions! Here's how you can help:

  1. Fork the repository
  2. Create your feature branch:
    git checkout -b feature/amazing-feature
  3. Commit your changes:
    git commit -m 'feat: add amazing feature'
  4. Push to the branch:
    git push origin feature/amazing-feature
  5. Open a Pull Request

Please read our Contributing Guide for details on our code of conduct and development process.

📜 License

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

🔒 Privacy

JSON Pilot takes your privacy seriously. All JSON processing happens locally in your browser - no data is ever sent to external servers. Read our Privacy Policy for more details.

📞 Support

⭐ Show Your Support

If you find JSON Pilot helpful, please consider:

  • Starring the repository
  • Sharing it with others
  • Reporting issues if you find any
  • Contributing to the project

Made with ❤️ by 7 Angle