Price-to-hours browser extension

A browser extension that converts prices on any shopping or subscription page into equivalent hours of work at your configured wage, making the real cost of purchases visible at a glance.

The idea

A browser extension that intercepts product prices on any webpage and renders a secondary label beside them: "≈ 3.2 hrs at your wage." The user sets their after-tax hourly equivalent once in the popup; the extension then parses prices out of the DOM using currency-aware heuristics and injects the converted label as a subtle, dismissible badge.

The mental shift from dollars to hours of work is well-documented in behavioral economics. Framing a $200 gadget as 8.5 hours of your life changes the decision calculus in a way dollar amounts alone do not. This extension makes that reframe automatic.

Why build this

Impulse purchases happen fastest when the price feels abstract. Translating every price into your personal hourly wage makes the cost visceral without requiring any conscious math. The trend toward subscription-heavy pricing makes this especially useful — a $15/month SaaS is easy to sign up for; "that's 45 minutes of my time every single month, forever" lands differently.

The tech is straightforward: a MutationObserver for dynamic pages, a simple regex plus Intl.NumberFormat parse layer, and a lightweight content script with no external calls. No server, no account, no data leaving the device.

Stack sketch

Platform: Manifest V3 (Chrome/Edge), with Firefox support via the same codebase using polyfill wrappers
Content script: vanilla JS with a MutationObserver watching the DOM for injected or updated price nodes
Price detection: regex against common currency patterns, validated with Intl.NumberFormat for locale handling
Storage: chrome.storage.sync for the hourly wage setting so it follows the user across devices
Popup UI: plain HTML/CSS — no framework, keeps the extension under 50 KB unpacked

Scope for v1

User sets an after-tax hourly wage in the popup, persisted via chrome.storage.sync
Content script injects a small "≈ X hrs" badge next to detected prices on any page
Badge is styled to be readable but unobtrusive — grey, small font, dismissible per-page via a click
Works on Amazon, Etsy, most Shopify stores, and any page where prices appear in plain text nodes
Toggle on/off via the toolbar icon; state persists across browser sessions
Deliberately out: multi-currency conversion, subscription annualization, historical wage tracking

Where it could go

The natural next step is annualizing subscription prices automatically — detecting monthly vs. yearly billing copy and showing both the monthly hours and the annual total alongside. A known-storefront pattern library (Shopify, WooCommerce, common checkout libraries) could extend reliable coverage beyond regex guessing.

A soft-budget feature could let users flag purchases above a personal threshold — e.g., shade the badge red for anything over 4 hours — keeping it opt-in so the extension stays informative rather than punitive.

Watch out for

Price detection on heavily dynamic SPAs with obfuscated class names breaks class- and ID-based selectors quickly — anchor the detection on text-node content patterns and currency symbols rather than site structure to stay resilient across redesigns.