Measured

Problem

When shopping for clothing online, it can be difficult to determine if an item will fit properly without trying it on. Sizes vary significantly between brands, and measurement charts can be hard to interpret without a reference point.

Solution

Measured is a Chrome extension that automatically overlays measurement comparisons on supported e-commerce sites. Users can save their own clothing items with custom measurements, and the extension compares them side-by-side with items they’re browsing, showing differences in both inches and centimeters with color-coded results.

Implementation Highlights

• Built the popup UI with React because the extension needed a more app-like flow across multiple views for saved items, editing, and comparisons.
• Added Zod validation around stored clothing data so parsing errors and bad input were caught early.
• Created separate parsing strategies per retailer instead of forcing one brittle scraper to handle every DOM structure.

Technical Challenges

• Multi-Site Parsing: Different e-commerce sites have completely different DOM structures. Grailed provides measurement data in tables with data attributes, while SSENSE uses modal based size charts with measurement images. Created separate parsing strategies for each platform.
• Dynamic Content: Both sites use single page application architectures. Implemented MutationObservers to detect when measurement data loads dynamically.
• Measurement Mapping: SSense uses measurement guide images with overlay positions that vary by product category. Built a mapping system (ssenseData.js) that maps CSS positioning to specific measurement types (chest, waist, length, etc.).
• State Management: Managing data between the popup UI and content scripts required message passing through Chrome’s runtime API
• Cross-Site Compatibility: Each site uses different measurement formats (inches vs. centimeters and decimals). Implemented automatic unit conversion for accurate comparisons.