DOM Snapshot & Diff

Capture, compare, and manage DOM snapshots with encrypted storage

🎯 Overview DOM Snapshot & Diff is a powerful Chrome extension that enables you to capture DOM snapshots at any point in time and perform detailed structural comparisons. Whether you're debugging regressions after deployment, documenting DOM changes for bug reports, or ensuring visual consistency across releases, this tool provides comprehensive diff analysis with visual overlays and intelligent filtering. Key Benefits: - ✅ Zero Backend - 100% client-side, fully private and secure - ✅ Instant DOM Diff - Structural tree comparison with visual highlighting - ✅ Encrypted Storage - AES-256-GCM encryption for all snapshots - ✅ No Data Transmission - Everything stays on your machine - ✅ Professional Reports - Export to HTML, JSON, Markdown, and PDF --- 🚀 Core Features 1. DOM Snapshot Capture Capture complete DOM structures at any moment with a single click or keyboard shortcut. What Gets Captured: - Complete HTML structure (full DOM tree) - Computed CSS styles for each element - All element attributes (id, class, data-*, aria-*, etc.) - Text content and metadata - Page context (URL, timestamp, viewport, user agent) How to Use: 1. Navigate to any webpage 2. Click the extension icon and press "Capture Snapshot" button 3. Alternatively, use keyboard shortcut `Ctrl+Shift+S` (Windows/Linux) or `Cmd+Shift+S` (Mac) 4. Snapshot is saved instantly with encryption to local storage Storage Limits: - Free Tier: Up to 10 snapshots - Pro Package: Up to 100 snapshots Features: - Automatic metadata tagging (URL, timestamp, viewport dimensions) - Performance statistics (capture time, element count) - Size optimization for large DOM trees - Warning notifications for oversized snapshots (>50MB) --- 2. Snapshot Management Comprehensive CRUD interface for organizing and managing your captured snapshots. Management Features: - List View: All snapshots displayed with timestamp, URL, and size - Rename: Add custom labels for easy identification - Delete: Remove single or multiple snapshots - Duplicate: Clone existing snapshots for comparison templates - Search & Filter: Find snapshots by URL, label, or date range - Storage Monitor: Real-time storage usage indicator How to Use: 1. Open extension popup to view recent snapshots 2. Click "View All Snapshots" for full management interface 3. Select snapshots using checkboxes for bulk operations 4. Use search bar to filter by keywords 5. Monitor storage usage at the bottom of the panel Organization Tips: - Use descriptive labels like "Homepage - Before Deploy" - Group snapshots by date or feature - Regular cleanup to maintain storage quota --- 3. Structural Diff (Tree Diff) Powerful tree comparison algorithm that identifies every change between two DOM snapshots. Diff Categories: - 🟢 ADDED: New elements that appeared - 🔴 REMOVED: Elements that were deleted - 🟡 MODIFIED: Elements with changed attributes, styles, or text - 🔵 MOVED: Elements repositioned in the tree - ⚪ UNCHANGED: No modifications (dimmed or hidden) How to Use: 1. Select two snapshots from your list using checkboxes 2. Click "Diff Selected" button 3. Choose view mode: - Split View: Side-by-side comparison - Unified View: Merged tree with color-coded markers 4. Expand diff items to see detailed changes 5. Navigate through changes using Previous/Next buttons Diff Details Include: - Element path (full DOM selector) - Attribute changes (old value → new value) - CSS style modifications - Text content updates - Position changes in tree structure Limits: - Free Tier: 3 diff operations per day - Pro Package: Unlimited diff operations Example Output: ``` Element: div#header > h1.page-title Type: MODIFIED Changes: - textContent: "Welcome" → "Welcome Back" - class: "title" → "title updated dark-mode" - style.backgroundColor: "#ffffff" → "#1e1e1e" ``` --- 4. Visual Overlay Diff (Pro) Highlight changes directly on the live webpage with interactive overlays. How It Works: 1. Select a saved snapshot to compare with current page 2. Click "Toggle Overlay" or use `Ctrl+Shift+O` (Windows/Linux) / `Cmd+Shift+O` (Mac) 3. Changed elements are highlighted with colored borders 4. Hover over highlighted elements to see diff details 5. Click elements to view full change information Overlay Indicators: - Green Border: Added elements - Red Dashed Border: Removed elements (ghost view) - Yellow Border: Modified elements - Blue Border: Moved elements Interactive Controls: - Toggle overlay on/off - Filter by change type (show only additions, modifications, etc.) - Navigate between changes with arrow keys (← / →) - Adjust overlay opacity for better visibility - Close overlay with `Esc` key Use Cases: - Real-time validation during development - Visual QA testing before deployment - Identifying unintended side effects - Debugging CSS or layout issues Pro Feature Only --- 5. Noise Filter (Pro) Eliminate irrelevant changes from diff results using intelligent filtering rules. Default Noise Patterns: - Dynamic timestamps and datetime attributes - Advertisement containers and iframes - Analytics scripts (Google Analytics, Hotjar, etc.) - Random IDs (UUID, hash patterns) - CSRF tokens and nonce attributes - Session-specific data - Auto-generated tracking pixels How to Configure: 1. Open Settings from extension popup 2. Navigate to Noise Filter section 3. Toggle predefined rules on/off 4. Add custom ignore rules: - CSS Selectors: `#dynamic-banner, .ad-slot, .promo` - Attributes: `data-timestamp, data-session-*` - Regex Patterns: For attribute values 5. Save filter profiles per domain Example Custom Rules: ``` Ignore Selectors: - .ad-container - iframe[src*="doubleclick"] - [data-analytics] Ignore Attributes: - data-timestamp - data-session-id - nonce ``` Benefits: - Cleaner diff results focused on meaningful changes - Reduced false positives - Faster diff processing - Better signal-to-noise ratio Pro Feature Only --- 6. Export Reports (Pro) Generate shareable reports in multiple formats for documentation and collaboration. Supported Formats: | Format | Description | Use Case | |--------|-------------|----------| | HTML | Standalone interactive viewer | Share with team, attach to tickets | | JSON | Raw diff data structure | CI/CD integration, custom tools | | Markdown | Summary table + diff details | GitHub Issues, PRs, documentation | | PNG/PDF | Annotated screenshots | Bug reports, stakeholder presentations | How to Export: 1. Complete a diff comparison 2. Click "Export" button at top-right 3. Select desired format 4. Choose encryption option (recommended) 5. Download file HTML Report Features: - Fully self-contained (no internet required) - Interactive diff tree (expand/collapse) - Side-by-side element comparison - Summary statistics - All CSS/JS embedded inline Security: - Default: Encrypted exports (requires passphrase) - Optional: Unencrypted (shows warning dialog) - AES-256-GCM encryption standard Pro Feature Only --- 7. Selector Scoping Focus snapshot capture and diff on specific DOM sections for precision analysis. How to Use: 1. Option A - Manual Selector: - Enter CSS selector in "Scope" field (e.g., `#main-content`, `.product-grid`) - Click "Capture Snapshot" 2. Option B - Element Picker: - Click "🎯 Pick Element" button - Click on any element in the webpage - Selector is auto-generated - Click "Capture Snapshot" Benefits: - Reduced snapshot size and processing time - Eliminate irrelevant page sections - Focus on specific components or features - Faster diff operations Example Selectors: ```css #main-content /* Main content area only */ .product-card /* All product cards */ [data-testid="form"] /* Specific test component */ main > article /* Main articles only */ ``` Available in: Free & Pro tiers --- 8. Auto-Snapshot on URL Change (Pro) Automatically capture snapshots when navigating through pages or SPA routes. How to Configure: 1. Open Settings → Auto-Snapshot 2. Enable for specific domains 3. Configure URL pattern matching (glob or regex) 4. Set maximum auto-snapshots per session (default: 20) 5. Configure auto-cleanup period (e.g., delete after 7 days) Pattern Examples: ``` Glob: - https://example.com/* - https://app.example.com/dashboard/* Regex: - ^https://example\.com/(products|services)/.*$ ``` Use Cases: - Track DOM changes across SPA navigation - Monitor progressive enhancement - Detect route-specific regressions - Automated testing workflows Session Management: - Auto-snapshots tagged with "Auto" label - Grouped by session timestamp - Configurable retention policy - Storage-aware (stops when quota reached) Pro Feature Only --- 9. Snapshot Comparison Templates (Pro) Create reusable comparison workflows for repetitive testing scenarios. Template Structure: ```json { "name": "Pre/Post Deploy Check", "description": "Compare staging before and after deployment", "steps": [ { "label": "Before Deploy", "url": "https://staging.example.com", "selector": "#app" }, { "label": "After Deploy", "url": "https://staging.example.com", "selector": "#app" } ], "noiseFilter": "production-default", "autoExport": "html" } ``` How to Use: 1. Navigate to Templates section 2. Click "Create Template" 3. Define comparison steps: - URLs to capture - Selectors to scope - Noise filter profile - Auto-export settings 4. Save template 5. Execute with one click Template Examples: - Staging vs Production: Compare live environments - Before/After Feature: Track feature implementation - Cross-Browser: Compare rendering differences - Regression Suite: Automated pre-release checks Benefits: - Standardized QA workflows - Time-saving for repetitive tasks - Consistent comparison methodology - Shareable across team members Pro Feature Only --- 10. Keyboard Shortcuts Fast access to core features with customizable keyboard shortcuts. Default Shortcuts: | Shortcut | Action | Context | |----------|--------|---------| | `Ctrl+Shift+S` (Win/Linux)<br>`Cmd+Shift+S` (Mac) | Capture Snapshot | Any page | | `Ctrl+Shift+D` (Win/Linux)<br>`Cmd+Shift+D` (Mac) | Quick Diff (last 2 snapshots) | Any page | | `Ctrl+Shift+O` (Win/Linux)<br>`Cmd+Shift+O` (Mac) | Toggle Visual Overlay | Diff view | | `Ctrl+Shift+L` (Win/Linux)<br>`Cmd+Shift+L` (Mac) | Open Snapshot List | Any page | | `←` / `→` | Navigate between diff items | Overlay active | | `Esc` | Close overlay/panel | Overlay active | Customization: 1. Go to Settings → Keyboard Shortcuts 2. Click on any shortcut to edit 3. Press new key combination 4. Save changes Available in: Free & Pro tiers --- 11. Sensitive Data Redaction Automatic and manual protection for sensitive information in snapshots. Automatic Redaction: - Password fields: `input[type="password"]` → `*REDACTED*` - Tokens: `meta[name="csrf-token"]` → Content redacted - Sensitive attributes: `[data-sensitive]`, `[data-pii]` Custom Redaction Rules: 1. Open Settings → Security 2. Add custom selectors to redact 3. Examples: - `.credit-card-field` - `[data-payment-info]` - `#ssn-input` Warning System: - Warning dialog before capturing forms with sensitive inputs - Option to abort capture - Review snapshot before saving Encryption: - All snapshots encrypted with AES-256-GCM before storage - Encryption key derived from passphrase + extension ID - PBKDF2 with 100,000 iterations - Unique salt per snapshot Available in: - Free: Basic redaction - Pro: Advanced custom rules --- 📦 Free vs Pro Comparison | Feature | Free | Pro ($14.99 lifetime) | |---------|------|-----------------------| | Capture Snapshots | ✅ | ✅ | | Maximum Snapshots | 10 | 100 | | Structural Diff | 3 per day | ♾️ Unlimited | | Visual Overlay Diff | ❌ | ✅ | | Noise Filter | ❌ | ✅ | | Export Reports | ❌ | ✅ All formats | | Selector Scoping | ✅ | ✅ | | Auto-Snapshot | ❌ | ✅ | | Comparison Templates | ❌ | ✅ | | Keyboard Shortcuts | ✅ | ✅ | | Data Redaction | Basic | Advanced | | Priority Support | ❌ | ✅ Email | Pro Benefits: - One-time payment - lifetime access - No subscriptions or recurring fees - All future updates included - Professional-grade features - Priority bug fixes and support --- 🎓 User Guides For Frontend Developers Scenario: Verify CSS Changes Don't Break Layout 1. Before making changes: - Capture snapshot of target page - Label it: "Homepage - Before CSS Update" 2. Make your CSS changes 3. After changes: - Capture new snapshot - Label it: "Homepage - After CSS Update" 4. Run diff comparison: - Select both snapshots - Click "Diff Selected" - Review structural changes - Verify only intended elements changed 5. Visual validation: - Enable overlay on live page - Quickly spot unintended side effects - Document changes for PR description --- For QA Engineers Scenario: Regression Testing After Release 1. Before deployment: - Capture snapshots of critical pages on staging - Examples: homepage, product page, checkout flow - Label with version number: "v2.3.0 - Homepage" 2. After deployment: - Capture same pages on production - Label: "v2.3.1 - Homepage" 3. Comparison: - Run diff for each page pair - Enable noise filter to remove timestamps/ads - Export HTML reports for bug tickets 4. Evidence collection: - Screenshot overlay highlights - Export to PDF for stakeholders - Attach to JIRA/GitHub issues --- For Tech Leads Scenario: Code Review Impact Assessment 1. Set up comparison template: - Define "Before/After Feature" template - Include staging URLs - Apply production noise filter 2. Before approving PR: - Execute template to capture before state - Deploy feature to staging - Capture after state 3. Analysis: - Review structural diff summary - Verify DOM changes align with PR description - Check for unexpected modifications 4. Reporting: - Export Markdown report - Paste into PR comment - Document architectural decisions --- 🔒 Security & Privacy Zero Data Transmission - No backend servers - All processing happens locally - No network requests - Completely offline operation - No analytics - We don't track your usage - No third-party scripts - Pure client-side code Encryption Standard - Algorithm: AES-256-GCM via Web Crypto API - Key Derivation: PBKDF2 with 100,000 iterations - Storage: All snapshots encrypted before saving - Export: Optional passphrase protection Minimal Permissions - `activeTab` - Only access to current tab when you trigger action - `storage` - Local storage for encrypted snapshots - `scripting` - Inject content scripts on demand