Inspiration

We started with the simple question: What does it actually cost the planet when you spend an hour on YouTube? When you use ChatGPT? Doomscroll on Instagram? The data exists, but it's always buried in academic papers, expressed in units nobody relates to, and never shown to you at the moment it matters. The insight that drove the whole project was that the internet has a massive and invisible environmental footprint, and using AI in particular is one of the most energy intensive things a person can do online. We wanted to make that cost visible, relatable, and real.

What it does

TruePrice is a Chrome extension that silently tracks the environmental cost of every website you visit and makes that cost legible. Floating Badge: a small pill sits in the corner of every page, showing the live resource cost of that site as you browse, color coded by intensity. The popup: shows everything from hour, day, week, and month across four metrics: energy (kWh), CO₂ (grams), water (liters), and land (m²). It also breaks down your footprint by category (Video, AI, Social, Search, Shopping) and shows your top sites by impact. Smart estimates: Unknown domains are profiled once by AI via a Next.js API route backed by Claude, then cached globally in Supabase, so the domain never costs an AI call twice for any user. Web app: serves as the marketing and methodology site, explaining how the calculations work, what the data sources are, and linking to the extension install. Numbers are translated into something human: Things like kWh become phone charges, CO₂ becomes kilometers driven, water becomes water bottles. The math is based in peer reviewed models (Sustainable Web Design, IEA grid intensity data) with regional multipliers for US, EU, India, and China.

How we built it

Extension: Chrome Manifest V3 extension built with Vite and React. Tracks active time per domain, computes impact, batches unknown domains to the AI profiler, syncs to Supabase when enabled. Mounts a floating badge in a shadow DOM to every page. Popup is a React app showing totals, breakdowns, and top usage sites. Web: a Next.js 14 app that serves as the landing and methodology site. The one active API route receives batches of unknown domains from the extension, checks Supabase global cache, profiles misses using Claude via Anthropic API, and returns profiles. Keeps API keys off extension. Supabase: a schema for the domain_profiles table that acts as a shared global cache, AI profiling cost is amortized across all users.

Challenges we ran into

Getting active time tracking right in Manifest V3 - we had to build a reliable system that persists accumulated time to chrome.storage.local before the worker sleeps, and reconstruct state on wake. We also found that choosing the right unit of impact for websites required more research than expected. The different site categories have extremely different profiles, so getting that difference down took lots of iteration. Maintaining the DOM badge across many different page layouts without breaking also took careful execution.

Accomplishments that we're proud of

Creating a fully working Chrome extension with a badge, popup, options, and background tracking. Making a manual profiling system with the top domains while utilizing a Claude backed AI profiling for anything unknown. Maintaing clear and transparent methodology. Getting the extension and the web app to work together as an actual system.

What we learned

The problem of invisible environmental cost applies just as much to digital behavior as it does to physical consumption. We also learned that AI as infrastructure is powerful, as it works in the background profiling domains to keep the tool functional for the user.

What's next for TruePrice

Move towards cross-browser compatability, show how the user's footprint changes week by week, expand to mobile applications, and be able to scan barcodes to see product footprints.

Built With

Share this project:

Updates