Skip to content

PavlosDefoort/carbonprompt

Repository files navigation

CarbonPrompt – Chrome Extension Installation Guide

CarbonPrompt is a Chrome (MV3) extension that estimates the carbon emissions of your AI prompts on chatgpt.com and visualizes session usage, a dashboard, and simple predictions.

Prerequisites

  • Node.js 18+ and npm installed
  • Google Chrome (or Microsoft Edge)

Build the Extension

  1. Install dependencies:
npm install
  1. Build the extension bundle:
npm run build

This creates the dist/ folder with:

  • manifest.json and icons (copied via Vite static copy)
  • popup.html (extension UI)
  • background.js (service worker)
  • contentScript.js (injected into chatgpt.com)

Install in Chrome

  1. Open Chrome and go to: chrome://extensions
  2. Enable “Developer mode” (top-right toggle)
  3. Click “Load unpacked” and select the dist/ folder
  4. Pin the extension icon if desired (Extensions menu → pin CarbonPrompt)

Verify It Works

  1. Navigate to https://chatgpt.com/
  2. Start typing a prompt — you should see an on-page estimate overlay
  3. Submit a prompt (click Send or press Enter) — the Session tab in the popup should accumulate CO₂
  4. Open the popup to view:
    • Session bar (now uses 8g domain; target marker at 5g)
    • Dashboard (sample data only)
    • Predict tab (simple forecast and tips)

Updating / Rebuilding

After making code changes:

npm run build

Then return to chrome://extensions and click “Reload” on CarbonPrompt.

Troubleshooting

  • No overlay or accumulation:
    • Hard refresh ChatGPT (Ctrl+F5)
    • Ensure you’re on https://chatgpt.com/ (not openai.com). If needed, add host permissions for other domains in manifest.json.
  • Popup shows 0g after closing:
    • Session total is persisted; reopen the popup and it will read sessionTotal from storage.
  • Inspect logs:
    • Page console (ChatGPT tab) for CarbonPrompt:updateDailyEmissions messages
    • chrome://extensions → CarbonPrompt → “Service worker” → “Inspect views” for background/service logs

Edge (Optional)

In Microsoft Edge, visit edge://extensions, enable “Developer mode”, then “Load unpacked” → choose dist/.

Development Notes

  • Build uses Vite with React and TypeScript; output is in dist/ per vite.config.ts
  • Storage keys: dailyEmissions, totalEmissions, sessionTotal, tokens, model
  • Content script detects submits via click and Enter with a double-count guard

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors