Project overview
EC Diag is a Chrome extension built to silently observe a user's journey on an e-commerce storefront and produce a structured per-session JSON for tracking diagnosis. Capture is 100% local, enabled only per site, and masks PII before persistence. The side panel shows a GA4 checklist, funnel, diagnostics, and realtime log, helping marketing, data, and engineering teams understand whether events, payloads, and critical journey steps are working correctly.
Challenge
Validate e-commerce instrumentation on real stores without breaking the site, sending sensitive data to third parties, or relying on a single implementation pattern, since each storefront may use Shopify, VTEX, WooCommerce, Magento, GTM, GA4, proxies, or different pixels.
Solution
Layered Manifest V3 architecture with pure logic in src/lib, safe MAIN-world interceptors for dataLayer, gtag, ga, fetch, XHR, sendBeacon, and pixels, passive content-script observers, recursive PII masking, IndexedDB for raw events, chrome.storage for aggregate state, and rule-based inferences with evidence and confidence.
Tech Stack
- Chrome Extension
- JavaScript
- GA4
- Event Tracking
- Data Quality
Technical scope
- Local, per-site opt-in and read-only capture
- GA4 checklist, funnel, diagnostics, and realtime log
- PII masking before event persistence
- JSON export and LLM-ready prompt export