A browser extension that pulls the recipe off a hostile, ad-choked page and renders it in a clean reader view. Built as a pnpm monorepo: a platform-agnostic, well-tested TypeScript extraction engine (JSON-LD, microdata, and the mess in between) feeding a WXT + Vue 3 app for Chrome and Firefox. This series walks through the architecture — format-agnostic extraction, detection-over-correction quality scoring, occluding ads instead of fighting them, a real testing pyramid, the production concerns WXT leaves to you, and collecting an anonymous recipe dataset.
Articles
Extracting Clean Recipes from Messy Pages
How Readable Recipes turns JSON-LD, microdata, and the mess in between into one canonical recipe.
Detection Over Correction
Why a recipe extractor should measure bad data instead of heroically fixing it — and how a deterministic quality scorer became the instrument the whole engine reads.
Fighting Recipe-Site Ads Without Fighting the Page
How the reader paints a clean view over some of the most hostile pages on the web by occluding them instead of fighting them — and the one ceiling no overlay can beat.
Testing as a First-Class Citizen
A real testing pyramid for a browser extension — pure-function unit tests, golden-master site snapshots, and Playwright e2e that loads a real MV3 build — and how testability quietly shaped the architecture.
What a Production WXT Extension Still Needs
WXT scaffolds the build, the manifest, and cross-browser packaging. The hard parts — service-worker lifecycle, single-writer concurrency, durable queues, and the storage-vs-messaging split — are still yours to build.
Collecting a Dataset Without Collecting People
The recipe dataset is the product — so it's collected anonymously, sends only the non-copyrightable facts, and is gated behind real consent. The reasoning, and the code that enforces it.