MHTMLens

MHTML forensics toolkit for userscript and browser extension development — parse MHTML files, analyze DOM structure, score selector stability, extract themes, diff page versions, and export ready-to-install .user.js files. 100% client-side, single HTML file.

https://sysadmindoc.github.io/MHTMLens/

Why MHTMLens?

Building userscripts and browser extensions means fighting obfuscated class names, unstable selectors, and SPAs that mutate their DOM constantly. Save a page as MHTML, drop it into MHTMLens, and get:

• Every selector on the page scored for stability (0–100)
• Obfuscated classes flagged so you know what NOT to target
• Best-selector recommendations per element
• XPath alternatives and MutationObserver snippets auto-generated
• A complete .user.js file exported with one click
• Two-file comparison to see which selectors survived between page versions

Nothing else does this. The closest alternatives are browser DevTools (no scoring, no export, no diffing) and paid SIEM-style tools that don't speak userscript.

Quick Start

git clone https://github.com/SysAdminDoc/MHTMLens.git
cd MHTMLens
# Open mhtmlens.html in your browser — that's it

Or just download mhtmlens.html and double-click it. No server, no install, no dependencies.

Saving an MHTML File

1. Open the target page in Chrome/Edge
2. Press Ctrl+S (or Cmd+S on Mac)
3. Choose "Webpage, Single File (.mhtml)" as the format
4. Drop the saved .mhtml file into MHTMLens

Features

Tabs

Parts

Explodes the MHTML into its multipart MIME components. Each part shows:

Preview + Picker

Renders the page in a sandboxed iframe with resources reconstructed from MHTML parts (images and CSS resolved inline). The Element Picker mode lets you:

1. Click Element Picker to enable
2. Hover over the rendered page — elements highlight with tag/class/dimensions overlay
3. Click any element — the detail panel shows:
   • Best Selector with stability score
   • CSS Path (full > delimited path)
   • XPath equivalent
   • Class stability analysis (each class tagged STABLE or OBF)
   • All attributes with values
   • MutationObserver snippet ready to paste
   • Text content preview

DOM Tree

Interactive collapsible tree view of the full document. Color-coded: tags (red), IDs (peach), classes (green), data attributes (yellow), text content (gray). Click any node to see the same detail panel as the Element Picker.

CSS

All CSS rules extracted from <style> tags and external stylesheet parts, grouped by source file. Includes:

• Full property list per rule with color swatches
• Media query context shown per rule
• CSS custom properties listed separately with copy-all
• Click any rule to see selector + properties + source

Theme

Auto-extracted design tokens from CSS:

Selectors

The core analysis tab. Every selector on the page with:

Filters: All, High Score (70+), Stable, Obfuscated, or by type (id, class, data-attr, aria, semantic). Plus a search box.

Code Gen

Ready-to-paste code snippets generated from the analysis:

Compare

Drop a second MHTML save of the same page to diff selectors:

• Added (green) — selectors that exist in the new version but not the old
• Removed (red) — selectors that were in the old version but disappeared
• Unchanged — selectors that survived between versions, flagged as safe to target

This is the killer feature for userscript maintenance. Save a page before and after a site update, compare, and immediately know which selectors in your script broke and what the replacements are.

How It Works

┌──────────────────┐     ┌──────────────────┐     ┌──────────────────┐     ┌──────────────────┐
│   MHTML Parser    │────>│   DOM Analysis    │────>│  Selector Engine  │────>│   Code Generator  │
│                  │     │                  │     │                  │     │                  │
│ MIME boundary    │     │ DOMParser        │     │ Stability scoring│     │ .user.js export  │
│ Quoted-printable │     │ CSS extraction   │     │ Obfuscation det. │     │ Selector maps    │
│ Base64 decode    │     │ Theme extraction │     │ XPath generation │     │ Observer snippets│
│ Charset detect   │     │ Resource inline  │     │ Best-sel recomm. │     │ CSS overrides    │
│ Part inventory   │     │ Tree building    │     │ MutationObs gen  │     │ Settings panel   │
└──────────────────┘     └──────────────────┘     └──────────────────┘     └──────────────────┘
                                                          │
                                                          v
                                                  ┌──────────────────┐
                                                  │    Comparator     │
                                                  │                  │
                                                  │ Selector diff    │
                                                  │ Added / Removed  │
                                                  │ Survival analysis│
                                                  └──────────────────┘

Stability Scoring Algorithm

Each selector starts at a base score of 50 and is adjusted by signals:

Obfuscation Detection

Classes are flagged as obfuscated when they match any of:

• Short prefix + camelCase hash: aB3kX9m, _a8f2d1
• CSS module pattern: Component__element--modifier, css-a1b2c3
• High entropy: character diversity > 70% with mixed case + digits in names > 6 chars
• Hash suffix: button-a8Kx2, header_f9d3e1

Exports

What It Does and Doesn't Do

Does:

• Parse MHTML files with full multipart MIME support including charset detection
• Render the page in a live preview with resource reconstruction
• Let you visually pick elements and get targeting recommendations
• Score every selector for resilience to site updates
• Detect obfuscated/generated class names from CSS modules, Tailwind, Emotion, etc.
• Generate XPath alongside CSS selectors
• Produce MutationObserver snippets for SPA-compatible targeting
• Extract the complete design system (colors, fonts, spacing, breakpoints)
• Diff two MHTML saves to show which selectors survived
• Export a complete working .user.js file
• Run 100% client-side with zero data transmission

Doesn't:

• Upload any data anywhere — fully offline after page load
• Execute JavaScript from the MHTML (preview is sandboxed)
• Handle Shadow DOM inspection (planned)
• Parse binary formats like .evtx or Chromium .snss sessions
• Detect CSS-in-JS runtime styles (only static CSS from the MHTML)
• Replace browser DevTools for live debugging — this is for static analysis of saved pages

Prerequisites

• Any modern browser (Chrome, Firefox, Edge, Safari)
• That's it

Typical Workflow

1. Save target page as MHTML in Chrome/Edge (Ctrl+S → Single File)
2. Drop into MHTMLens and go to the Preview + Picker tab
3. Pick elements you want to target — note the best selectors and scores
4. Check the Selectors tab — filter by "High Score (70+)" to see your safest targets
5. Go to Code Gen — copy the userscript template, selector map, and observer snippet
6. Export the .user.js — install in Tampermonkey to test immediately
7. After a site update — save the page again, use the Compare tab to diff selectors and update your script

FAQ / Troubleshooting

Q: The preview is blank or broken
A: The preview reconstructs resources from MHTML parts by replacing Content-Location URLs with data URIs. If the page used JavaScript rendering (React, Vue, Angular SPAs), the static HTML capture may not include the rendered DOM. Try saving the page after it fully loads. Chrome's "Save as MHTML" captures the current DOM state including SPA-rendered content.

Q: Some images don't show in the preview
A: Images must be included as MHTML parts with matching Content-Location URLs. If the page loaded images lazily or from a different CDN domain, they may not be captured. The parts list will show which images were included.

Q: The Element Picker doesn't highlight anything
A: Make sure Element Picker mode is toggled on (button should have a teal border). The picker requires the iframe to have loaded the preview content. If the preview is blank, there's nothing to pick.

Q: My class name is flagged as obfuscated but it's not
A: The obfuscation detector uses heuristics. Class names with high character entropy, mixed case + digits, or common hash patterns get flagged. This is conservative by design — it's better to flag a stable class as suspicious than to miss an obfuscated one. Check the stability score — a truly stable class with other positive signals (semantic tag, data attributes nearby) will still score well overall.

Q: Can I use this with regular HTML files, not just MHTML?
A: Yes. Drop any .html or .htm file and MHTMLens will parse it as a single part. You'll get full DOM analysis, selector scoring, and code generation. The MHTML-specific features (parts explorer, resource reconstruction, charset detection) will be simpler since there's only one part.

Q: How does the comparison know which selectors match across files?
A: Comparison is string-based — it compares the exact CSS selector strings generated from both documents. A selector like [data-testid="login-button"] will match if it exists in both. Class selectors like .header will match if the same class name appears in both. This means obfuscated classes that changed between versions will correctly show as removed + added (different hash = different selector).

Q: The exported .user.js doesn't work on the target site
A: Common issues: the @match pattern may need adjustment (check the domain in the userscript header matches the actual site URL), the page may load content dynamically after the initial DOM (the MutationObserver in the template handles this), or the selectors may have changed since you saved the MHTML. Re-save and re-analyze if the site updated.

Q: Can I compare more than two files?
A: Currently supports two-file comparison (A vs B). For tracking changes over multiple versions, export the selectors JSON from each version and diff them externally.

Contributing

Issues and PRs welcome. Areas that could use help:

• Shadow DOM detection and inspection
• CSS-in-JS runtime style extraction
• Computed style viewer (post-cascade resolution)
• CSS variable dependency graph
• Multi-file comparison (3+ versions)
• Iframe inventory and cross-origin detection
• Custom format builder for non-standard MHTML variants

License

MIT License — see LICENSE for details.