How I Built a 100% Local Chrome Extension That Turns Repeating DOM Cards into CSV & JSON

Yanqiang Yu — Sat, 14 Nov 2026 08:05:01 +0000

Most web scrapers make a strange trade-off: to grab a pricing table or a list of 40 items on a page you're already viewing, they upload your DOM to a remote server, charge a monthly subscription, and still fail whenever the data sits behind a login or uses <div> cards instead of <table>.

I wanted something much simpler—so I built SheetSnap (GitHub source): a 100% local-first Manifest V3 Chrome extension + live browser sandbox that turns messy HTML <table> elements and repeating DOM cards into clean, deduplicated CSV, JSON, and Markdown.

Try the live parser right in your browser with zero install:
👉 sheetsnap.joyflow.cloud

Why HTML `<table>` Parsers Miss Most of the Modern Web

Almost nobody builds directories, SaaS pricing matrices, product catalogs, or CRM views with semantic <table> tags anymore. They use Flex and Grid cards:

<div class="grid">
  <article class="card">
    <h3>Acme Payroll</h3>
    <span class="price">$49/mo</span>
    <span class="badge">SOC2</span>
  </article>
  <!-- repeated 30x -->
</div>

If an extension only checks document.querySelectorAll("table"), it finds 0 tables on most modern web apps.

How Local Repeating-Card Clustering Works

Instead of shipping raw HTML to an LLM or remote parser, SheetSnap runs three fast heuristics directly inside the active browser tab:

Semantic Table Extraction — Parses <thead> / <tbody> structures cleanly, handling multi-line cell text cleanly.
Sibling Cluster Detection — Walks visible containers with 3+ structurally similar direct children (matching tag signatures & normalized class patterns), then inspects repeated child positions (headings, links, prices, badges) to synthesize columns automatically.
Client-Side Deduplication + Excel-Safe Export — Drops duplicate rows, tracks duplicates removed, prepends a UTF-8 BOM (\uFEFF) so Excel renders currency & international text without garbling characters, and lets you export CSV, JSON, or Markdown.

Installing & Testing Locally (No Cloud Account Required)

You can test the parser immediately in the Web Sandbox by pasting any HTML snippet or loading the built-in presets (Repeating DOM Cards, Pricing Grid, Messy Directory Table), or load the Chrome Extension unpacked in 30 seconds:

Download sheetsnap-extension.zip (or grab v1.0.0 on GitHub)
Open chrome://extensions -> enable Developer mode
Click Load unpacked and select the unzipped folder

Free tier includes unlimited sandbox usage and up to 25 rows per extension export; a $9.90 one-time Pro license unlocks unlimited rows across 3 browsers.

And if you need a bespoke Chrome extension or paginated scraper built around a specific website in 48 hours, I also offer fixed-price builds on sheetsnap.joyflow.cloud.

Feedback on tricky DOM layouts or edge cases is very welcome in the comments!

DEV Community: Yanqiang Yu

How I Built a 100% Local Chrome Extension That Turns Repeating DOM Cards into CSV & JSON

Why HTML <table> Parsers Miss Most of the Modern Web

How Local Repeating-Card Clustering Works

Installing & Testing Locally (No Cloud Account Required)

Why HTML `<table>` Parsers Miss Most of the Modern Web