Build a JSON Editor Chrome Extension: Complete Developer's Guide

26 min read

Build a JSON Editor Chrome Extension: Complete Developer's Guide

· 25 min read · Chrome Extensions, Tutorial

Build a JSON Editor Chrome Extension: Complete Developer’s Guide

JSON (JavaScript Object Notation) has become the universal data interchange format for web applications, APIs, and configuration files. Every developer working with modern web technologies encounters JSON on a daily basis. Whether you’re debugging API responses, configuring build tools, or analyzing data structures, having a robust JSON editor extension directly in your browser can dramatically improve your productivity.

In this comprehensive guide, we’ll walk through the complete process of building a professional-grade JSON editor Chrome extension. You’ll learn how to create a feature-rich tool that can parse, format, validate, edit, and visualize JSON data with a beautiful tree viewer interface. By the end of this tutorial, you’ll have a fully functional extension ready for the Chrome Web Store.

Why Build a JSON Editor Chrome Extension?

The demand for json editor extensions in the Chrome Web Store remains consistently high. Developers, data analysts, and technical professionals constantly need to work with JSON data, yet the built-in developer tools offer limited JSON functionality. This creates an excellent opportunity to build a tool that solves real problems.

Market Demand and User Needs

A quick search for “json editor extension” in the Chrome Web Store reveals thousands of users actively seeking better JSON manipulation tools. The most popular extensions have millions of users, indicating strong market demand. Users want extensions that can:

  • Format and beautify minified JSON with proper indentation
  • Validate JSON syntax and highlight errors in real-time
  • Edit JSON directly with syntax highlighting and autocomplete
  • Navigate large JSON structures using an interactive tree viewer
  • Compare JSON documents side by side
  • Export and copy formatted JSON for use elsewhere

Building an extension that addresses these needs not only provides value to users but also serves as an impressive portfolio project that demonstrates your understanding of Chrome extension development, JavaScript DOM manipulation, and UI/UX design.

Technical Skills You’ll Gain

This project will teach you several valuable skills that extend beyond Chrome extension development:

  • Manifest V3 architecture and the modern Chrome extension system
  • Content script injection and communication with the popup
  • Local storage management for persisting user preferences
  • Complex DOM manipulation for building interactive tree views
  • Real-time JSON parsing and validation techniques
  • Event-driven programming patterns in browser extensions

Project Architecture and Features

Before writing any code, let’s outline the architecture of our JSON editor extension. A well-planned structure will make development smoother and the final product more maintainable.

Core Features

Our JSON editor extension will include the following features:

  1. JSON Input Panel - A text area where users can paste or type JSON content
  2. Format/Beautify Button - One-click formatting of minified JSON
  3. Minify Button - Compress formatted JSON to a single line
  4. Tree Viewer - Collapsible/expandable tree visualization of JSON structure
  5. Syntax Validation - Real-time error detection with line number indication
  6. Copy Button - Quick copy of formatted JSON to clipboard
  7. Theme Toggle - Light/dark mode support
  8. Local Storage - Remember user’s last JSON and preferences

Extension Structure

The extension will follow the Manifest V3 structure with the following files:

json-editor-extension/
├── manifest.json          # Extension configuration
├── popup.html             # Extension popup UI
├── popup.js               # Popup logic and JSON processing
├── styles.css             # Styling for the popup
├── tree-view.js           # Tree viewer component
├── tree-view.css          # Tree viewer styles
├── icon16.png             # Small toolbar icon
├── icon48.png             # Medium toolbar icon
└── icon128.png            # Large icon for web store

Step 1: Creating the Manifest File

Every Chrome extension begins with the manifest.json file. This configuration file tells Chrome about your extension’s permissions, files, and capabilities.

{
  "manifest_version": 3,
  "name": "JSON Editor Pro",
  "version": "1.0.0",
  "description": "A powerful JSON editor with tree viewer, formatter, and validator",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

The manifest declares we need storage permission to persist user data. The action key defines our popup as the default interface when users click the extension icon.

The popup HTML provides the user interface for our JSON editor extension. We’ll create a clean, intuitive layout with an input area, action buttons, and a tree viewer panel.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON Editor Pro</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>JSON Editor</h1>
      <button id="theme-toggle" class="icon-btn" title="Toggle Theme">🌙</button>
    </header>
    
    <div class="editor-container">
      <div class="input-panel">
        <textarea id="json-input" placeholder="Paste or type your JSON here..."></textarea>
        <div id="error-message" class="error-message hidden"></div>
      </div>
      
      <div class="actions">
        <button id="format-btn" class="btn primary">Format</button>
        <button id="minify-btn" class="btn secondary">Minify</button>
        <button id="copy-btn" class="btn secondary">Copy</button>
        <button id="clear-btn" class="btn danger">Clear</button>
      </div>
      
      <div class="tree-panel">
        <div class="panel-header">
          <h2>Tree View</h2>
          <button id="expand-all" class="small-btn">Expand All</button>
          <button id="collapse-all" class="small-btn">Collapse All</button>
        </div>
        <div id="tree-container" class="tree-container"></div>
      </div>
    </div>
  </div>
  
  <script src="tree-view.js"></script>
  <script src="popup.js"></script>
</body>
</html>

This HTML structure provides a two-panel layout: the input area for pasting JSON and the tree viewer panel for visualizing the structure. The action buttons allow users to format, minify, copy, and clear the JSON content.

Step 3: Styling with CSS

The CSS file styles our extension to look professional and user-friendly. We’ll implement a clean design with proper syntax highlighting for different JSON value types.

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #333333;
  --text-secondary: #666666;
  --border-color: #e0e0e0;
  --accent-color: #4a90d9;
  --success-color: #28a745;
  --error-color: #dc3545;
  --string-color: #22863a;
  --number-color: #005cc5;
  --boolean-color: #6f42c1;
  --null-color: #6a737d;
  --key-color: #032f62;
}

.dark-theme {
  --bg-primary: #1e1e1e;
  --bg-secondary: #252526;
  --text-primary: #d4d4d4;
  --text-secondary: #858585;
  --border-color: #3c3c3c;
  --accent-color: #569cd6;
  --string-color: #ce9178;
  --number-color: #b5cea8;
  --boolean-color: #c586c0;
  --null-color: #808080;
  --key-color: #9cdcfe;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  width: 500px;
  min-height: 600px;
}

.container {
  padding: 16px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

header h1 {
  font-size: 18px;
  font-weight: 600;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.icon-btn:hover {
  background: var(--bg-secondary);
}

.editor-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input-panel textarea {
  width: 100%;
  height: 180px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 13px;
  resize: vertical;
}

.input-panel textarea:focus {
  outline: none;
  border-color: var(--accent-color);
}

.error-message {
  color: var(--error-color);
  font-size: 12px;
  padding: 8px;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 4px;
  margin-top: 8px;
}

.hidden {
  display: none;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn:hover {
  opacity: 0.9;
}

.btn.primary {
  background: var(--accent-color);
  color: white;
}

.btn.secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn.danger {
  background: var(--error-color);
  color: white;
}

.tree-panel {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.panel-header h2 {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.small-btn {
  padding: 4px 8px;
  font-size: 11px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
}

.tree-container {
  padding: 12px;
  max-height: 300px;
  overflow: auto;
  background: var(--bg-primary);
}

The CSS includes comprehensive theming support with CSS custom properties. The dark theme provides better visibility in low-light conditions, and the color scheme for JSON syntax elements makes it easy to distinguish between strings, numbers, booleans, and null values.

Step 4: Implementing the Tree Viewer

The tree viewer is the heart of our JSON editor extension. This JavaScript component transforms raw JSON into an interactive, collapsible tree structure that makes navigating complex data structures intuitive.

class JSONTreeViewer {
  constructor(container) {
    this.container = container;
    this.items = [];
  }

  render(json) {
    this.container.innerHTML = '';
    
    if (json === null || json === undefined) {
      this.container.innerHTML = '<span class="null">null</span>';
      return;
    }

    const root = this.createTreeItem('root', json, true);
    this.container.appendChild(root);
  }

  createTreeItem(key, value, isRoot = false) {
    const item = document.createElement('div');
    item.className = 'tree-item';

    const type = this.getType(value);
    
    // Create the key label
    if (!isRoot) {
      const keyLabel = document.createElement('span');
      keyLabel.className = 'key';
      keyLabel.textContent = `"${key}": `;
      item.appendChild(keyLabel);
    }

    // Handle different JSON types
    if (type === 'object' && value !== null) {
      item.appendChild(this.createObjectToggle(key, value));
    } else if (type === 'array') {
      item.appendChild(this.createArrayToggle(key, value));
    } else {
      item.appendChild(this.createValue(value, type));
    }

    return item;
  }

  getType(value) {
    if (value === null) return 'null';
    if (Array.isArray(value)) return 'array';
    return typeof value;
  }

  createObjectToggle(key, value) {
    const toggle = document.createElement('span');
    toggle.className = 'toggle expanded';
    toggle.textContent = '{';

    const children = document.createElement('div');
    children.className = 'children';

    const entries = Object.entries(value);
    entries.forEach(([k, v], index) => {
      const child = this.createTreeItem(k, v);
      const isLast = index === entries.length - 1;
      
      if (!isLast) {
        const comma = document.createElement('span');
        comma.className = 'comma';
        comma.textContent = ',';
        child.appendChild(comma);
      }
      
      children.appendChild(child);
    });

    const closingBracket = document.createElement('span');
    closingBracket.className = 'bracket';
    closingBracket.textContent = '}';
    children.appendChild(closingBracket);

    toggle.appendChild(children);
    
    toggle.addEventListener('click', (e) => {
      e.stopPropagation();
      toggle.classList.toggle('expanded');
      children.style.display = toggle.classList.contains('expanded') ? 'block' : 'none';
    });

    return toggle;
  }

  createArrayToggle(key, value) {
    const toggle = document.createElement('span');
    toggle.className = 'toggle expanded';
    toggle.textContent = '[';

    const children = document.createElement('div');
    children.className = 'children';

    value.forEach((item, index) => {
      const child = this.createTreeItem(index.toString(), item);
      const isLast = index === value.length - 1;
      
      if (!isLast) {
        const comma = document.createElement('span');
        comma.className = 'comma';
        comma.textContent = ',';
        child.appendChild(comma);
      }
      
      children.appendChild(child);
    });

    const closingBracket = document.createElement('span');
    closingBracket.className = 'bracket';
    closingBracket.textContent = ']';
    children.appendChild(closingBracket);

    toggle.appendChild(children);
    
    toggle.addEventListener('click', (e) => {
      e.stopPropagation();
      toggle.classList.toggle('expanded');
      children.style.display = toggle.classList.contains('expanded') ? 'block' : 'none';
    });

    return toggle;
  }

  createValue(value, type) {
    const span = document.createElement('span');
    span.className = type;
    
    switch (type) {
      case 'string':
        span.textContent = `"${value}"`;
        break;
      case 'number':
        span.textContent = value;
        break;
      case 'boolean':
        span.textContent = value;
        break;
      case 'null':
        span.textContent = 'null';
        break;
      default:
        span.textContent = String(value);
    }
    
    return span;
  }

  expandAll() {
    const toggles = this.container.querySelectorAll('.toggle');
    toggles.forEach(toggle => {
      toggle.classList.add('expanded');
      const children = toggle.querySelector('.children');
      if (children) {
        children.style.display = 'block';
      }
    });
  }

  collapseAll() {
    const toggles = this.container.querySelectorAll('.toggle');
    toggles.forEach(toggle => {
      toggle.classList.remove('expanded');
      const children = toggle.querySelector('.children');
      if (children) {
        children.style.display = 'none';
      }
    });
  }
}

window.JSONTreeViewer = JSONTreeViewer;

This tree viewer component handles nested objects and arrays recursively, creating expandable/collapsible nodes. Each node is color-coded based on its type, making it easy to scan through complex JSON structures. The expandAll and collapseAll methods provide convenient navigation for large JSON documents.

The popup.js file ties everything together, handling user interactions and JSON processing.

document.addEventListener('DOMContentLoaded', () => {
  const jsonInput = document.getElementById('json-input');
  const errorMessage = document.getElementById('error-message');
  const treeContainer = document.getElementById('tree-container');
  const formatBtn = document.getElementById('format-btn');
  const minifyBtn = document.getElementById('minify-btn');
  const copyBtn = document.getElementById('copy-btn');
  const clearBtn = document.getElementById('clear-btn');
  const themeToggle = document.getElementById('theme-toggle');
  const expandAllBtn = document.getElementById('expand-all');
  const collapseAllBtn = document.getElementById('collapse-all');

  // Initialize tree viewer
  const treeViewer = new JSONTreeViewer(treeContainer);

  // Load saved data
  chrome.storage.local.get(['jsonContent', 'theme'], (result) => {
    if (result.jsonContent) {
      jsonInput.value = result.jsonContent;
      validateAndRender(result.jsonContent);
    }
    if (result.theme === 'dark') {
      document.body.classList.add('dark-theme');
      themeToggle.textContent = '☀️';
    }
  });

  // Theme toggle
  themeToggle.addEventListener('click', () => {
    document.body.classList.toggle('dark-theme');
    const isDark = document.body.classList.contains('dark-theme');
    themeToggle.textContent = isDark ? '☀️' : '🌙';
    chrome.storage.local.set({ theme: isDark ? 'dark' : 'light' });
  });

  // Real-time validation
  jsonInput.addEventListener('input', () => {
    const value = jsonInput.value.trim();
    chrome.storage.local.set({ jsonContent: value });
    validateAndRender(value);
  });

  function validateAndRender(value) {
    if (!value) {
      errorMessage.classList.add('hidden');
      treeContainer.innerHTML = '';
      return;
    }

    try {
      const parsed = JSON.parse(value);
      errorMessage.classList.add('hidden');
      treeViewer.render(parsed);
    } catch (e) {
      errorMessage.textContent = `Error: ${e.message}`;
      errorMessage.classList.remove('hidden');
    }
  }

  // Format JSON
  formatBtn.addEventListener('click', () => {
    try {
      const parsed = JSON.parse(jsonInput.value);
      jsonInput.value = JSON.stringify(parsed, null, 2);
      validateAndRender(jsonInput.value);
      chrome.storage.local.set({ jsonContent: jsonInput.value });
    } catch (e) {
      errorMessage.textContent = `Cannot format: ${e.message}`;
      errorMessage.classList.remove('hidden');
    }
  });

  // Minify JSON
  minifyBtn.addEventListener('click', () => {
    try {
      const parsed = JSON.parse(jsonInput.value);
      jsonInput.value = JSON.stringify(parsed);
      validateAndRender(jsonInput.value);
      chrome.storage.local.set({ jsonContent: jsonInput.value });
    } catch (e) {
      errorMessage.textContent = `Cannot minify: ${e.message}`;
      errorMessage.classList.remove('hidden');
    }
  });

  // Copy to clipboard
  copyBtn.addEventListener('click', async () => {
    try {
      await navigator.clipboard.writeText(jsonInput.value);
      const originalText = copyBtn.textContent;
      copyBtn.textContent = 'Copied!';
      setTimeout(() => {
        copyBtn.textContent = originalText;
      }, 1500);
    } catch (e) {
      console.error('Failed to copy:', e);
    }
  });

  // Clear input
  clearBtn.addEventListener('click', () => {
    jsonInput.value = '';
    treeContainer.innerHTML = '';
    errorMessage.classList.add('hidden');
    chrome.storage.local.set({ jsonContent: '' });
  });

  // Expand/Collapse all
  expandAllBtn.addEventListener('click', () => {
    treeViewer.expandAll();
  });

  collapseAllBtn.addEventListener('click', () => {
    treeViewer.collapseAll();
  });
});

This popup script manages all user interactions: formatting, minifying, copying, clearing, and theme toggling. It uses Chrome’s storage API to persist user data across sessions, so users don’t lose their work when closing the popup.

Step 6: Creating Extension Icons

Every Chrome extension needs icons at various sizes. For a production extension, you’d create professional icons. For development purposes, you can create simple placeholder icons or use a tool to generate them.

To create basic icons, you can use an online icon generator or create simple colored squares with the extension name. Place these in the root directory of your extension.

Step 7: Testing Your Extension

Before publishing, thoroughly test your extension:

  1. Load the extension:
    • Open Chrome and navigate to chrome://extensions/
    • Enable “Developer mode” in the top right
    • Click “Load unpacked” and select your extension folder
  2. Test all features:
    • Paste JSON and verify tree rendering
    • Test formatting and minification
    • Verify error handling for invalid JSON
    • Test theme switching
    • Check that data persists after closing popup
  3. Edge cases to test:
    • Empty input
    • Extremely large JSON files
    • Deeply nested structures
    • Special characters in strings
    • Unicode characters
    • JSON with only arrays or only objects

Step 8: Publishing to Chrome Web Store

Once your extension is working correctly, follow these steps to publish:

  1. Prepare for release:
    • Create a zip file of your extension (excluding source files if needed)
    • Write a compelling description targeting your keywords
    • Take screenshots showing the extension in action
  2. Create developer account:
  3. Submit your extension:
    • Upload your zip file
    • Fill in all required information
    • Submit for review (usually takes a few hours to a few days)
  4. Optimize for SEO:
    • Use your target keywords naturally in the title and description
    • Include “json editor extension”, “edit json chrome”, and “json tree viewer” strategically
    • Add relevant screenshots and a compelling icon

Conclusion

Congratulations! You’ve now built a complete JSON Editor Chrome Extension with all the features users expect from a professional tool. The extension includes a robust JSON tree viewer, formatting capabilities, validation, theme support, and persistent storage.

This project demonstrates your ability to:

  • Build a complete Chrome extension from scratch using Manifest V3
  • Implement complex DOM manipulation for interactive UI components
  • Handle JSON parsing, validation, and visualization
  • Manage browser storage for user preferences
  • Design user-friendly interfaces with theming support

The skills you gained from this project transfer directly to building other types of Chrome extensions and web applications. The JSON editor extension you built is not only a useful tool for developers but also a strong portfolio piece that showcases your full-stack JavaScript capabilities.

Remember to continue improving your extension based on user feedback. Consider adding features like JSON schema validation, JSON comparison, or integration with popular developer tools. With a solid foundation, you can easily expand and enhance your extension to meet evolving user needs.

Now that you have the knowledge and code, go forth and build amazing Chrome extensions!

Turn Your Extension Into a Business

Ready to monetize? The Extension Monetization Playbook covers freemium models, Stripe integration, subscription architecture, and growth strategies for Chrome extension developers.

No previous article
No next article