Project Showcase

Verdi: Sustainable Shopping in One Click

Verdi is a browser extension that helps people make greener purchase decisions while they shop online. It keeps users in their shopping flow, analyzes product pages in place, and surfaces clear environmental signals at decision time.

Explore Product FlowLocal SetupGitHub Repo

What Verdi Delivers

  • Estimated total product impact in kgCO2e
  • Material-level carbon breakdown
  • Country/countries of origin
  • Equivalent gasoline-car miles comparison
  • Similar item and ecological alternative suggestions

Why This Is Valuable

Shoppers can compare price, delivery, and reviews in seconds, but environmental impact is usually hidden or difficult to interpret. Verdi closes that gap by translating climate impact into practical guidance directly inside the popup.

Core Product Experience

  1. User opens an ecommerce product page
  2. Verdi detects whether the page is buyable
  3. Verdi analyzes product context in the background
  4. Popup shows total impact, material impacts, origin, and car-mile equivalency
  5. User reviews similar products and eco alternatives instantly
Guard message on unsupported pages:

Please go on a product page for the extension to work

How It Works Under the Hood

1) Product Context Extraction

The content script gathers structured context from title, description, brand hints, price text, bullets, headings, and URL.

2) Product-Page Guarding

Verdi only runs when buyable-product signals exist:

  • Price indicators
  • Add-to-cart or buy-now CTAs
  • Product metadata/schema hints

3) AI Analysis Pipeline

Background worker sends extracted context to Gemini for structured inference:

  • Category
  • Weight
  • Materials and percentages
  • Material-level CO2 factors
  • Brand
  • Country/countries of origin

When key fields are uncertain, Verdi can run a search-enriched pass and merge results.

4) Insight Rendering

Popup displays:

  • Total impact first
  • Material-by-material impact next
  • Country/countries of origin after that
  • Equivalent gasoline-car miles to make impact intuitive

4.1) Calculation Methodology and Sources

Verdi uses deterministic math in the popup to convert extracted material data into readable impact estimates.

1) Material impact

materialImpactKgCO2e = (totalWeightKg * (materialPercent / 100)) * materialFactorKgCO2ePerKg

2) Total product impact

totalImpactKgCO2e = sum(materialImpactKgCO2e)

3) Car miles equivalency

equivalentMiles = totalImpactKgCO2e / 0.404

where 0.404 kg CO2e/mile comes from U.S. EPA equivalency estimates for an average gasoline passenger vehicle.

Primary references

  1. U.S. EPA: Greenhouse Gas Emissions from a Typical Passenger Vehicle
  2. U.S. EPA: Greenhouse Gas Equivalencies Calculator
  3. NIST: SI Units Mass Conversions

Notes on factor provenance

  • Material CO2 factors are model-assisted estimates inferred by Gemini.
  • Values are directional estimates, not audited product life-cycle assessments.
  • Factors vary by supplier, process, and region, so Verdi presents practical guidance rather than certification-grade values.

Personalized UX

  • Dark/Light theme support (Dark default)
  • Toggle to disable or enable popup auto-open on product pages

Privacy and Data

  • Latest analysis and settings stored in browser local storage
  • API keys remain local and are not intended for source control
  • No account required

Demo Instructions

  1. Open a normal non-product page and verify the guard message
  2. Open a buyable product page and show automatic analysis
  3. In popup, highlight Total Impact plus car-mile comparison
  4. Show material-level impact and origin fields
  5. Open Settings and toggle theme and auto-open behavior
  6. Show similar items and ecological alternatives

Tech Stack

  • Plasmo (Manifest V3 extension framework)
  • React + TypeScript popup UI
  • Chrome Extension APIs (runtime, tabs, storage, action)
  • Gemini API for structured sustainability inference and suggestions

Browser Availability and Compatibility

  • Chrome: Chrome Web Store distribution
  • Edge: Microsoft Edge Add-ons with minimal changes
  • Brave/Opera/Vivaldi: generally compatible with Chrome build
  • Firefox: validate against Firefox WebExtensions requirements
  • Safari: package as a Safari Web Extension with Apple's tooling

Local Setup

Prerequisites

  • Node.js 18+
  • npm
  • Gemini API key

Install dependencies

npm install

Configure Gemini key

Create or edit gemini-key.ts:

export const GEMINI_API_KEY = "YOUR_KEY_HERE"

Run development build

npm run dev

Run production build

npm run build

Load extension in Chrome

  1. Open chrome://extensions
  2. Enable Developer mode
  3. Click Load unpacked
  4. Select build/chrome-mv3-dev or build/chrome-mv3-prod

Key Files

  • content.ts: product-page guard, extraction, and auto-trigger
  • background.ts: Gemini analysis pipeline, storage, and auto-open control
  • popup.tsx: UI rendering, settings, and impact comparisons

Limitations

  • Values are model-assisted estimates, not audited LCAs
  • Accuracy depends on product-page data quality
  • Some products may have missing supply-chain transparency
Back to Projects