GreenTab

See the Hidden Environmental Cost of Your Browsing - A Chrome extension that tracks your digital carbon footprint in real-time with AI-powered insights.

Comment

What Problem You're Solving

Most people are unaware of the environmental impact of their digital activities. Every website visit, every minute spent browsing, consumes energy that contributes to carbon emissions, water usage, and climate change. While we track our physical carbon footprint, our digital footprint remains invisible. Users have no way to:

  • Understand which websites consume the most resources
  • See their cumulative environmental impact over time
  • Receive personalized recommendations to reduce their digital carbon footprint
  • Make informed choices about greener alternatives

GreenTab solves this by making the invisible visible, empowering users to understand and reduce their digital environmental impact.

How Your Solution Works

GreenTab is a comprehensive Chrome extension and dashboard system that tracks and visualizes your digital environmental impact:

Chrome Extension (Real-Time Tracking):

  • Monitors active browser tabs and tracks time spent on each domain
  • Calculates real-time environmental metrics (energy in Wh, water in liters, CO₂ in grams) using the Website Carbon API
  • Checks if websites use green hosting via the Green Web Foundation API
  • Displays live stats in the extension popup as you browse
  • Syncs data to Supabase backend every 30 seconds when authenticated
  • Provides one-click access to the full analytics dashboard

Dashboard Website (Analytics & Insights):

  • Interactive charts showing energy, water, and CO₂ usage over the last 30 days
  • Trend analysis comparing current usage to previous month with percentage changes
  • Top domains list identifying which websites consume the most resources
  • AI-generated personalized insights under each chart, providing:
    • Trend analysis and comparisons
    • Actionable recommendations
    • Greener alternatives to high-impact websites
  • Weekly "GreenTab Wrapped" email recaps (opt-in) with AI-generated summaries

Technical Architecture:

  • Frontend: Chrome Extension (Manifest V3) + Next.js 16 dashboard with React 19
  • Backend: Supabase (PostgreSQL + OAuth authentication)
  • APIs: Website Carbon API, Green Web Foundation API, Claude API (Anthropic), Resend (email)
  • Privacy-First: Only tracks domain names and time spent - no URLs, content, or personal data

Why It Matters

The internet accounts for approximately 3.7% of global carbon emissions - equivalent to the entire airline industry. As digital consumption grows, this impact will only increase. GreenTab matters because:

  1. Awareness: Most people don't realize browsing has an environmental cost. GreenTab makes this invisible impact visible and tangible.

  2. Behavioral Change: By showing real-time impact and identifying high-consumption websites, users can make informed choices about their browsing habits.

  3. Collective Impact: If millions of users reduce their digital carbon footprint by even 10%, the cumulative effect could be significant.

  4. Accessibility: Unlike complex carbon calculators, GreenTab works automatically in the background, requiring no user input or manual tracking.

  5. Actionable Insights: AI-powered recommendations help users understand not just what they're doing, but what they can do differently.

  6. Privacy-Preserving: Unlike other tracking tools, GreenTab only tracks domain names and time - no personal data, URLs, or content.

How You Used Claude

Claude API (Anthropic) is integrated throughout GreenTab to provide intelligent, personalized insights:

  1. Chart Insights (Primary Use):

    • Under each graph (Energy, Water, CO₂), Claude analyzes the user's data trends
    • Generates 1-2 sentence insights commenting on patterns, spikes, or improvements
    • Provides bulleted lists of actionable alternatives (e.g., "Consider using Ecosia instead of Google for searches")
    • Context-aware recommendations based on top domains and usage patterns
    • Uses claude-3-haiku-20240307 for fast, cost-effective generation

  2. Weekly Email Recaps ("GreenTab Wrapped"):

    • Claude generates personalized HTML email summaries of the user's weekly environmental impact
    • Creates engaging, narrative-style summaries (e.g., "This week, you spent 2.3 hours on YouTube, equivalent to...")
    • Includes comparisons, highlights, and motivational messaging
    • Suggests specific actions based on the week's data

  3. Intelligent Analysis:

    • Claude processes complex data patterns (daily aggregates, top domains, comparisons)
    • Identifies meaningful trends that simple calculations might miss
    • Provides human-readable explanations of technical metrics
    • Adapts recommendations based on user behavior patterns

Technical Implementation:

  • Server-side API routes (/api/insights) to keep Claude API keys secure
  • Prompt engineering for concise, actionable insights
  • Error handling and fallbacks when Claude API is unavailable
  • Efficient token usage with structured prompts and response parsing

Category Tags

  • Sustainability / Climate Tech
  • Browser Extension
  • Data Visualization
  • AI/ML (Claude Integration)
  • Environmental Impact
  • Carbon Footprint Tracking
  • Web Analytics
  • Privacy-First Technology
  • Real-Time Tracking
  • Personal Dashboard

Built With

Share this project:

Updates