How to Compare Sources Side by Side in Chrome Extensions

Comparing two sources side by side is a common task for developers reviewing code changes, writers checking document revisions, or anyone needing to spot differences between two pieces of text. Chrome extensions offer powerful ways to bring this capability directly into your browser, eliminating the need to copy-paste content into external tools.

This guide covers how to build a Chrome extension that compares sources side by side, existing extensions you can use today, and practical implementation details for developers.

Why Compare Sources in Your Browser

Browser-based comparison tools save time when working with web content. Instead of downloading files or opening separate applications, you can compare sources while browsing documentation, reviewing pull requests, or analyzing competing websites.

The side-by-side view presents two panels showing the original and modified content, making it easy to spot additions, deletions, and modifications at a glance. This approach works particularly well for:

Code reviews on platforms without built-in diff views
Comparing API documentation versions
Checking email templates or HTML content
Analyzing竞争对手网站 content

Building a Basic Comparison Extension

Creating a Chrome extension for side-by-side comparison involves three main components: a popup for user input, a content script for page interaction, and a diff library for the comparison logic.

Project Structure

compare-sources/
├── manifest.json
├── popup.html
├── popup.js
├── diff-worker.js
└── icon.png

manifest.json

{
  "manifest_version": 3,
  "name": "Compare Sources Side by Side",
  "version": "1.0",
  "description": "Compare two sources side by side in your browser",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 400px; padding: 16px; font-family: system-ui; }
    textarea { width: 100%; height: 80px; margin-bottom: 8px; }
    button { background: #4285f4; color: white; border: none; padding: 8px 16px; cursor: pointer; }
    button:hover { background: #3367d6; }
  </style>
</head>
<body>
  <h3>Compare Sources</h3>
  <textarea id="source1" placeholder="First source..."></textarea>
  <textarea id="source2" placeholder="Second source..."></textarea>
  <button id="compareBtn">Compare Side by Side</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById('compareBtn').addEventListener('click', async () => {
  const source1 = document.getElementById('source1').value;
  const source2 = document.getElementById('source2').value;
  
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  chrome.tabs.sendMessage(tab.id, {
    action: 'openComparison',
    source1,
    source2
  });
});

Content Script for Display

// content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'openComparison') {
    createComparisonView(message.source1, message.source2);
  }
});

function createComparisonView(source1, source2) {
  // Remove existing comparison if any
  const existing = document.getElementById('side-by-side-compare');
  if (existing) existing.remove();

  const container = document.createElement('div');
  container.id = 'side-by-side-compare';
  container.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:white;z-index:999999;display:flex;';

  const panel1 = document.createElement('div');
  panel1.style.cssText = 'flex:1;padding:20px;overflow:auto;border-right:1px solid #ccc;';
  panel1.textContent = source1;

  const panel2 = document.createElement('div');
  panel2.style.cssText = 'flex:1;padding:20px;overflow:auto;';
  panel2.textContent = source2;

  const closeBtn = document.createElement('button');
  closeBtn.textContent = 'Close';
  closeBtn.style.cssText = 'position:absolute;top:10px;right:10px;';
  closeBtn.onclick = () => container.remove();

  container.append(panel1, panel2, closeBtn);
  document.body.appendChild(container);
}

This basic implementation creates a full-screen overlay with two panels showing your sources. For production use, you’d integrate a proper diff library like diff or diff-match-patch to highlight specific changes.

Using Existing Comparison Extensions

Several established extensions handle side-by-side comparison without requiring custom development:

Diff Checker offers a straightforward interface where you paste or load content from URLs. It highlights additions in green and deletions in red, with options for character-level or word-level comparison.

Text Compare works well for comparing selected text from any webpage. Right-click to select “Compare Selected Text” and it opens a comparison view with the selections.

CodeMirror-based extensions provide syntax highlighting during comparison, essential when reviewing code changes. These preserve formatting and indentation, making them suitable for developers.

Advanced: Integrating Diff Libraries

For more sophisticated comparison, integrate a diff library into your extension. The diff package provides various diff algorithms:

import * as Diff from 'diff';

function computeDiff(oldText, newText) {
  const changes = Diff.diffLines(oldText, newText);
  return changes.map(part => ({
    value: part.value,
    added: part.added || false,
    removed: part.removed || false
  }));
}

Display the diff results with appropriate highlighting:

function renderDiff(changes) {
  const container = document.getElementById('diff-output');
  changes.forEach(part => {
    const span = document.createElement('span');
    span.textContent = part.value;
    if (part.added) span.style.background = '#e6ffed';
    if (part.removed) span.style.background = '#ffeef0';
    container.appendChild(span);
  });
}

Performance Considerations

When comparing large sources, consider these optimizations:

Use Web Workers for diff computation to avoid blocking the main thread
Implement virtual scrolling for very long documents
Debounce comparison when processing real-time input
Consider lazy loading of diff libraries only when needed

Security and Privacy

When building comparison extensions that handle sensitive content:

Process everything client-side; avoid sending data to external servers
Use Chrome’s storage APIs carefully if caching comparison results
Be transparent about what data your extension accesses
Request only necessary permissions in your manifest

Conclusion

Chrome extensions provide a flexible way to compare sources side by side without leaving your browser. Whether you build a custom solution or use existing tools, the key is choosing an approach that fits your specific workflow. For simple text comparisons, basic implementations work well. For code review or detailed analysis, integrate proper diff libraries with syntax highlighting.

The ability to compare sources directly in Chrome streamlines many development and content review tasks. Start with a basic implementation and extend it based on your actual needs.

Built by theluckystrike — More at zovo.one