Credits: This browser extension was inspired by Adebola Adeniran who built a very usefulextensionfor Chrome and Edge to track COVID country by country via API calls. He wrote an excellentarticleabout it. Thanks also to Asim Hussain who told me about these APIs as well. And thanks to theEnergy Lollipop extensionfor California emissions for their 'dot' color extension marker idea.
If you've never built a browser extension, it's surprisingly fun and addictive. Have little repetitive tasks that could be helped by having something right at your fingertips, pinned to your browser bar? How about a little dot that can tell you, at a glance, whether your geographic region is undergoing a moment of heavy C02 usage on the electric grid? Would it help you make a decision on whether or not to run your clothes dryer?
According to Asim Hussain's8 Principles of Sustainable Software Development, one of the goals of a 'Green Developer' is to help users make decisions that can have a meaningful impact on carbon impact. In addition, a Green Developer should be mindful of the carbon impact of their software itself. A carbon extension, hosted locally and only making ad-hoc API calls might be a particularly sustainable idea, and it's just in time for Earth Day!
Beware! Not all browser extensions are 'green' by default. Some seem to consume a lot of resources.
Let's build a small 'green' browser extension! We will be inspired by Adebola's extension to calltmrow'selectricityMap APIto track regional electricity usage, so that you can have a reminder right in your browser about how heavy your region's electricity usage is so that you can make educated judgement calls on your activities based on this information.
Curious about the potential environmental impact of your decisions? Takethis quiz
I've created some sample code to get you up and running quickly:
git clone https://github.com/jlooper/carbon-trigger-extension/tree/start && cd carbon-trigger-extension
Be sure to checkout thestartbranch (the main branch is the full code, in case you just want to take a look)
Navigate to the root and install the required packages
Explore the files:
dist/manifest.json (defaults are set here)
src/index.js (your JS code goes here)
dist/index.html (frontend HTML markup here)
dist/background.js (JS that runs in the background)
dist/index.js (built JS)
Get an API Key
You'll need an API key for CO2 Signal's API. Get onevia email; enter your email in the box on this page and it will be sent to you. Also grab the code for your region corresponding to theElectricity Map. In Boston, USA, for example, I use 'US-NEISO'.
Develop your Extension: Follow the Forest Trail
I've added :seedling: little leaf emoji :seedling: in the areas where you need to complete the code following the steps below. It's a nice way to tweak an almost-finished codebase and learn about the process.
If anything is in localStorage, pick it up
Add a check to the init() function to see if any API key or Region has been set in localStorage
Make the API call to get your region's usage, and display it
// src/index.jsusage.textContent=Math.round(response.data.data.carbonIntensity)+' grams (grams C02 emitted per kilowatt hour)';fossilfuel.textContent=response.data.data.fossilFuelPercentage.toFixed(2)+'% (percentage of fossil fuels used to generate electricity)';
Set icon to be a green color
Set the icon to a default; it will change when the API is called. This function uses the chrome runtime's built-in management methods
Install the extension in your browser from the code built in thedistfolder. This extension has been tested on Edge, Firefox and Chrome. The installation is basically the same for all these browsers, but here's how you install a test extension on Edge:
Use the 'three dot' menu on the top right corner of the browser to find the Extensions panel. From there, select 'Load Unpacked' to load a new extension. Open the 'dist' folder at the prompt and the extension will load.
Input your API key and region in the form and check your region's carbon intensity. Congratulations, now you know whether to run an errand or run the dryer!
Remember: the greenest web asset is the slimmest one, the one with the least overhead and the one that is only called ad hoc. You just built a slim, green extension!