Sustainable Browser Tracker

Inspiration

It's kinda crazy when you think about it, but the internet has a physical footprint. Every website we visit, every video we stream, it all runs on servers in data centers that use a ton of electricity. Most of us never see it, so we don't think about it. I wanted to change that.

The idea for the Sustainable Browser Tracker came from a simple question: "Can we make this invisible environmental cost... visible?" I wanted to build a tool that wasn't preachy or complicated, but just a simple, friendly nudge. Something that could show you your impact in real-time and help you make slightly better choices without having to think too hard. The goal was to make sustainable browsing easy and maybe even a little bit fun.

What it does

The Sustainable Browser Tracker is a Chrome extension that helps you see and reduce your digital carbon footprint. As you browse, it works quietly in the background to:

Check Websites: It instantly checks if the site you're visiting is hosted on servers powered by renewable energy.
Track Your Impact: It keeps a running tally of your estimated CO2 emissions and shows you how many "green" vs. "non-green" sites you've visited.
Suggest Better Alternatives: If you land on a site that isn't eco-friendly, it uses AI to suggest a greener alternative.
Make it Fun: It turns sustainable browsing into a game. You earn points and unlock badges for making eco-conscious choices.
Save Energy: It includes a "Low Power Mode" that turns the page grayscale, which can help reduce your screen's energy use.

All this info is displayed in a simple, clean dashboard when you click the extension icon.

How we built it

I started with the core of the project: the browser extension. The first piece of the puzzle was tracking the websites people visit. I used the Chrome Extension APIs (tabs and webNavigation) to listen for when a new page loads.

Once I could see what site a user was on, I needed to know if it was "green." For that, I hooked into The Green Web Foundation's API. It's an awesome resource that tells you if a website is hosted on servers powered by renewable energy. I had the background.js script call this API for every new domain.

To make the data more meaningful, I used the @tgwf/co2 library to estimate the CO2 emissions for each page visit. This gave me the core stats for the dashboard. For the popup UI itself, I used Tailwind CSS to build it out quickly and keep it looking clean and modern, with some nice Lucide Icons.

But just showing data felt a bit flat. What if a site isn't green? I wanted to offer a solution. So, I built a small backend server using Python and Flask. This server has one simple job: it takes a domain name and asks the Google Gemini API to suggest a popular, green-hosted alternative. This AI piece was a game-changer and made the extension feel much more helpful.

Finally, to make it more engaging, I added a simple gamification system. You get points for visiting green sites and lose a few for non-green ones. Hitting certain scores unlocks badges. It’s a simple loop, but it makes doing good feel good.

Challenges we ran into

My biggest headache was dealing with external API calls. The Green Web Foundation API is solid, but networks can be unreliable. The extension would sometimes fail to get a response, leaving the user with an error. To fix this, I wrote a fetchWithRetry function. If an API call fails, it just tries again a couple of times before showing an error. It made the whole thing way more robust.

Another tricky part was getting the AI to behave. Gemini is incredibly powerful, but getting it to only return a domain name and nothing else took a lot of trial and error with the prompt. I had to be super specific: "Return only the domain name... and nothing else." I also added a simple check on my Flask server to make sure the AI's output looked like a valid domain before sending it back.

Accomplishments that we're proud of

Honestly, I'm just really proud that it works. Building a full-stack application with a browser extension frontend and an AI-powered backend was a huge learning experience. Seeing the AI successfully suggest a good alternative for the first time was a definite "Aha!" moment.

I'm also really happy with how the UI turned out. It's simple, it's clean, and it gives you all the key info without being overwhelming. It feels like a tool that people would actually want to use.

What we learned

This project was a deep dive into the world of browser extensions, especially the new Manifest V3 standard. I learned a ton about how service workers operate and how different parts of an extension (the background, the popup, and content scripts) communicate with each other.

More than the technical stuff, I learned how powerful it is to make data accessible. Turning an abstract problem like "the internet's carbon footprint" into a simple, personal number that you can see change based on your actions is a really effective way to drive change. It proved to me that you can use simple tools to help people connect with big, complex issues in a meaningful way.

What's next for Sustainable Browser Tracker

This is just the beginning! I've got a bunch of ideas for where to take this next:

More Granular Data: I want to go beyond just the hosting and look at other factors, like how well-optimized a page is. A bloated, slow website uses more energy, even if it's on a green server.
Historical Data: It would be cool to show users their progress over time with weekly or monthly reports.
Firefox and Safari Support: Right now it's just for Chrome, but I'd love to bring it to other browsers.
Smarter AI: I want to train the AI to give even better suggestions, maybe even based on the type of website you're on. For example, suggesting a green alternative to YouTube that's also a video platform.
Dynamic Rewards & Partnerships: The achievement system could be adjusted based on a user's actual CO2 emission savings. I'd also love to integrate with eco-friendly websites to provide greater, real-world rewards to the end-user for their sustainable habits.