GreenCheck - a browser extension that identifies websites powered by renewable energy and provides insights into their carbon emissions.
GreenCheck began as an idea while walking through Copenhagen in 2024, shortly after giving a talk for GlasgowJS on website carbon emissions. I’d been using The Green Web Foundation’s tool to check which sites were hosted on green energy, but the process was slow and manual.
I wanted a smoother, more cohesive experience - something that worked directly in the browser. GreenCheck was the result: a lightweight browser extension that instantly tells you whether a site is green-hosted and estimates its carbon footprint.
- 🌱 Instant Detection - adds a sprout icon beside green-hosted results in Google Search
- 🟢 Dynamic Extension Icon - turns green or red depending on the site’s sustainability
- ⚡ In-Extension Dashboard - shows current site data and emission estimates
- ♻️ Carbon Grading System - rates websites from A - F based on page size and green hosting
- 🚀 Edge-hosted API - uses Cloudflare Workers for lightning-fast responses
- Framework: SvelteKit
- Language: TypeScript
- Styling: TailwindCSS
- Extension Framework: Plasmo
- Hosting: Cloudflare Pages
- Node.js (LTS recommended)
- npm, pnpm, or yarn
- A Plasmo account (optional for dev tools)
- A Cloudflare account for deploying Pages
- Access to The Green Web Foundation API
git clone https://github.com/kelsiesmurphy/greencheck.git
cd greencheck
npm install
# or
yarn
# or
pnpm install
Create a .env file in the project root and add your environment values:
PUBLIC_ENV=dev
dev- Run the extension in development modebuild- Create a production buildpreview- Preview production build locally
Example usage:
pnpm run build
pnpm run dev
- Portfolio: https://kelsiesmurphy.com
- GitHub: https://github.com/kelsiesmurphy
Thanks for checking out GreenCheck!