← Back to ProjectsView Architecture
GitHub

Smart JSON Chrome Extension#

Project Overview##

Smart JSON is a Chrome extension developed by Mrutyunjay Patil in 2024, designed to enhance JSON data interaction within web browsers. The extension operates as a client-side tool that automatically detects and transforms JSON content on web pages into an interactive, formatted interface.

Core Purpose and Functionality##

The extension serves as a JSON manipulation and visualization tool that activates when users visit pages containing JSON data (content-type: "application/json"). It transforms raw JSON into a structured, interactive tree view with collapsible nodes, syntax highlighting, and copy functionality.

Technical Architecture##

Extension Structure###

The project follows standard Chrome extension architecture with these core components:

  • Manifest (manifest.json): Defines extension metadata, permissions, and configuration using Manifest V3
  • Content Script (content.js): Main functionality handler that executes on target pages
  • Popup Interface (popup.html): User-facing information panel describing extension features
  • Privacy Policy (privacy-policy.html): Static privacy documentation
  • License (LICENSE.md): MIT license documentation

Permissions and Security###

The extension requests minimal permissions:

  • activeTab: Allows interaction with the currently active browser tab only
  • clipboardWrite: Enables copying functionality to system clipboard

Implementation Details##

Core JavaScript Logic (content.js)###

Initialization Process:

  • Uses an Immediately-Invoked Function Expression (IIFE) for setup
  • Detects JSON content by checking document.contentType === "application/json"
  • Automatically triggers formatting when JSON pages are loaded

JSON Processing Pipeline:

  1. Detection: Identifies JSON content type in document
  2. Parsing: Extracts text content from document body using body.innerText
  3. Formatting: Converts raw JSON into structured HTML via prettyFormatJSON() function
  4. Rendering: Replaces original page content with formatted version
  5. Enhancement: Adds interactive controls, styling, and event listeners

Recursive Formatting System:

  • recursiveFormat() function processes JSON objects and arrays recursively
  • Maintains proper indentation using depth tracking
  • Handles both objects and arrays with appropriate bracket/brace formatting
  • Generates collapsible content structure with toggle controls

Interactive Features###

Expand/Collapse Functionality:

  • Toggle buttons with SVG icons (+ for expand, - for collapse)
  • Individual node toggling with single click
  • Ctrl+click for recursive expand/collapse of nested levels
  • Global "Expand All" and "Collapse All" controls

Copy Operations:

  • Individual key/value copying via inline copy buttons
  • "Copy Visible" function extracts only currently expanded JSON portions
  • "Copy Full JSON" provides complete original JSON data
  • Clipboard integration using navigator.clipboard.writeText()

Visual Elements:

  • Color-coded syntax highlighting (red for keys, green for values)
  • SVG-based icons for all interactive elements
  • Responsive button styling with hover effects
  • Fixed positioning for control panel

User Interface Components##

Control Panel###

Fixed-position panel containing:

  • Expand All button
  • Collapse All button
  • Copy Visible button
  • Copy Full JSON button
  • Shortcuts toggle button

Shortcuts Panel###

Toggleable information panel displaying:

  • Ctrl + - : Collapse all nested JSON
  • Ctrl + + : Expand all nested JSON

Author Attribution###

Fixed author label displaying "Smart JSON Author: Mrutyunjay Patil"

Data Processing Logic##

JSON Parsing and Validation###

  • Uses JSON.parse() for initial validation and object creation
  • Stores original JSON object in global variable originalJsonObject
  • Implements error handling for invalid JSON with user feedback

HTML Generation###

  • insertCopyButtons() function processes formatted JSON line-by-line
  • Uses regex pattern matching to identify keys and values: /(".*?")(\s*:\s*)(".*?"|[\[\]{},]|\d+|true|false|null)/g
  • Generates HTML with embedded copy buttons and syntax highlighting
  • Implements HTML escaping via escapeHtml() function for security

Content Extraction###

  • extractVisibleJSONText() recursively traverses DOM to extract visible content
  • Filters based on display properties and CSS classes
  • Reconstructs JSON structure from visible elements

Styling and Visual Design##

CSS Architecture###

  • Courier New monospace font for code readability
  • Light color scheme with white background (#fefefe body, #fff content)
  • Box shadow effects for visual depth
  • Responsive button interactions with color transitions
  • Fixed positioning for persistent controls

Color Coding###

  • Keys: Red (color: red)
  • Values: Green (color: #32cd32)
  • Copy/toggle icons: Blue (fill: #74C0FC)
  • Hover states: Orange (fill: #ff8c00)

Event Handling System##

Toggle Interactions###

  • Click event listeners attached to all .toggle-button elements
  • Ctrl+click detection for recursive operations
  • Dynamic icon switching between expand/collapse states
  • Content visibility toggling via display style manipulation

Copy Operations###

  • Event delegation for dynamically generated copy buttons
  • Data attribute storage for copy content (data-text)
  • Clipboard API integration with error handling
  • Console logging for operation feedback

Privacy and Data Handling##

Client-Side Processing###

  • All JSON processing occurs entirely within the browser
  • No data transmission to external servers
  • No data collection or storage mechanisms
  • No tracking or analytics implementation

Permission Usage###

  • Active tab permission used only for content modification
  • Clipboard permission used exclusively for copy functionality
  • No background processes or persistent data storage

Browser Compatibility##

Chrome Extension Standards###

  • Manifest V3 compliance for modern Chrome compatibility
  • Standard web APIs: clipboard, DOM manipulation, CSS
  • No external dependencies or third-party libraries
  • Cross-platform compatibility within Chrome ecosystem

Installation and Deployment##

Development Installation Process###

  1. Local file extraction or repository cloning
  2. Chrome developer mode activation
  3. Unpacked extension loading via chrome://extensions/
  4. Automatic toolbar integration upon successful installation

Runtime Behavior###

  • Content script injection on all web pages (*://*/* match pattern)
  • Execution timing: document_idle for complete page loading
  • Automatic activation on JSON content detection
  • No manual activation required for JSON pages

This extension represents a focused, single-purpose tool for JSON data manipulation that prioritizes user privacy, minimal permissions, and client-side processing while providing comprehensive JSON interaction capabilities.

Architecture Diagram

Drag to pan, scroll to zoom