Verdi: Sustainable Shopping in One Click

Verdi is a browser extension that helps people make greener purchase decisions while they shop online.

Instead of forcing users to leave their shopping flow and research sustainability manually, Verdi analyzes product pages in place and surfaces clear environmental signals at decision time.

What Verdi Delivers

1. Estimated total product impact in kgCO2e.
2. Material-level carbon breakdown.
3. Country/countries of origin.
4. Real-world comparison using equivalent car miles driven.
5. 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 hard to interpret. Verdi closes that gap by turning climate impact into something understandable and actionable right in the browser popup.

Core Product Experience

1. User opens an ecommerce product page.
2. Verdi detects if the page is a buyable product page.
3. Verdi analyzes the page context in the background.
4. Popup shows total impact, material impacts, origin, and a car-mile equivalency.
5. User can explore similar products and eco alternatives instantly.

If the user is not on a product page, Verdi clearly states:

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 the page, including title, description, brand hints, price text, bullets, headings, and URL.

2) Product-Page Guarding

Verdi only runs extraction and analysis when the page has buyable-product signals such as:

1. Price indicators.
2. Add-to-cart or buy-now style CTAs.
3. Product metadata/schema hints.

3) AI Analysis Pipeline

The background worker sends context to Gemini for structured extraction:

1. Category.
2. Weight.
3. Materials and percentages.
4. Material-level CO2 factors.
5. Brand.
6. Country/countries of origin.

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

4) Insight Rendering

The popup computes and displays:

1. Total impact first.
2. Material-by-material impact next.
3. Country/countries of origin after that.
4. 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 a readable impact estimate.

1. Material impact:

$$ ext{materialImpactKgCO2e} = \left(\text{totalWeightKg} \times \frac{\text{materialPercent}}{100}\right) \times \text{materialFactorKgCO2ePerKg} $$

2. Total product impact:

$$ ext{totalImpactKgCO2e} = \sum \text{materialImpactKgCO2e} $$

3. Car miles equivalency:

$$ ext{equivalentMiles} = \frac{\text{totalImpactKgCO2e}}{0.404} $$

Where 0.404 kg CO2e/mile is from the U.S. EPA estimate for an average gasoline passenger vehicle.

Primary references used:

1. U.S. EPA, Greenhouse Gas Emissions from a Typical Passenger Vehicle (8,887 g CO2 per gallon gasoline; approximately 400 g CO2 per mile): https://www.epa.gov/greenvehicles/greenhouse-gas-emissions-typical-passenger-vehicle
2. U.S. EPA equivalency convention commonly used in calculators (0.404 kg CO2/mile): https://www.epa.gov/energy/greenhouse-gas-equivalencies-calculator
3. NIST SI conversions used for weight normalization logic (kg, g, lb): https://www.nist.gov/pml/owm/si-units-mass

Notes on factor provenance:

1. Material CO2 factors are model-assisted estimates inferred by Gemini from product context and common industry values.
2. These are directional estimates, not audited product life-cycle assessments.
3. Because factors may vary by supplier/process/region, Verdi presents results as practical guidance rather than certification-grade values.

5) Personalized UX

Settings include:

1. Dark/Light theme (Dark default).
2. Disable/enable auto-opening popup on product pages.

Privacy and Data

1. Verdi stores latest analysis and user settings in browser local storage.
2. API keys are local and not intended for source control.
3. No account required.

Demo Instructions

1. Visit a normal non-product page and see the guard message.
2. Visit a buyable product page and show automatic analysis.
3. Open popup and 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

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

Browser Availability and Compatibility

Verdi is currently built/tested primarily for Chrome-compatible browsers. To make it available broadly, we can use the same core codebase with browser-specific packaging, QA, and store submission.

Browser targets

1. Chrome: Chrome Web Store distribution.
2. Edge: Microsoft Edge Add-ons (same Chromium codebase, minimal changes).
3. Brave/Opera/Vivaldi: generally compatible with Chrome build and extension APIs.
4. Firefox: build and validate against Firefox WebExtensions requirements.
5. Safari: package as a Safari Web Extension using Apple's tooling and notarization flow.

Local Setup

Prerequisites

1. Node.js 18+.
2. npm.
3. 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

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

Limitations

1. Values are model-assisted estimates, not audited lifecycle assessments.
2. Accuracy depends on product-page data quality.
3. Some products may have missing supply-chain transparency.

Next Steps

1. Add source citations for each estimated field.
2. Add category-specific lifecycle models.
3. Add user impact history and savings dashboard.
4. Add confidence intervals for all outputs.