The script displaying carbon cost next to actual cost on Amazon product page
Carbon spending gauge in popup
Stages of the gauge, at beginning, within, and over budget
Our concept of accessible and understandable information
The user flow and architecture of the app
The two main factors of our carbon cost algorithm
Carbon Price Tag
Every product we purchase has some kind of cost to the environment, whether that be from the farms and factories that create them, or the complex supply chains that allow them to be delivered to your doorstep. We're always told that it is our responsibility to save the environment, but not everyone has the knowledge on how to do so. Our application allows consumers to be more aware of the effect that their purchases have on the environment, and take steps towards reducing their carbon footprint and saving the environment one footprint at a time.
Visual representation of how each food item impacts the greenhouse gas emissions.
Carbon Price Tag is a Chrome extension that displays the carbon cost of items purchased on an online store. When purchasing an item, a carbon price will be displayed alongside the real price of the item, calculated based on data on the average number of kilograms of carbon dioxide per kilogram of different types of products (currently, we're only limited to food from Amazon Whole Foods). We take into account the CO2 created during production, as well as the shipping process, converting to a price based on the amount of gasoline required to produce that same amount of CO2. The application also has a budgeting feature; users can track how much of these "carbon dollars" that they spend, and enter a budget of their choosing, and the extension will display how far they are under or over their budget.
Our extension keeps track of the amount of carbon you have emitted through your transactions.
There are three main parts to our application: that which runs on the webpage itself, the extension popup, and the Flask backend.
The extension is comprised of one script that runs on the main webpage and another that runs on the extension popup. The popup contains a username, their address, and their carbon budget, all of which the user can enter themselves. The popup also contains a visualization of how their current spending compares to their budget. On the webpage, assuming it is a product page on Amazon, a green box appears below the price displaying our calculated carbon cost and the equivalent mass of CO2. When a new user enters their name, their previous carbon budget and their address will appear on the extension popup. If they change their carbon budget, the visualization will change accordingly, depending on the proportions between the new budget and the user's current spending.
When the user visits any product page, the extension calls the Flask backend, which determines the carbon cost depending on the type of product it is and the user's address. Any time any user field is updated, the Flask backend will also be called to update that information in the user database.
One of the earliest difficulties we faced was figuring out how to calculate the "Carbon Price Tag" we were looking for. After hours of research reading research papers and articles, we were able to conclude on an equation which could be used for our tag. Furthermore, We had a lot of trouble figuring out how to work with Chrome extensions, as understanding how to interface between the web page and the pop-up window was difficult at first. We had one particular issue where the extension would only be able to work properly if the webpage was refreshed and the extension was open at the same time. We did eventually figure out the issue though, and now understand much more about how Chrome extensions work. We also had a lot of trouble with parsing product information from Amazon Whole Foods, as the descriptions were very inconsistent between different products. We resolved this issue by limiting the varied scope of items into a categories which could be accounted for dynamically.
Obviously, our extension could be used on sites other than Amazon Whole Foods, and with products that are not only limited to food. We also feel that finding better ways to parse information from product pages (potentially with NLP), as well as more information about the supply chain of a particular brand or product, would allow us to calculate a more accurate carbon cost.