We wanted to build something that would be subtle, yet persistent; smooth and suave; powerful or thought-provoking. So, naturally, we decided to go for a completely silly, absolutely fantastic Chrome web extension.

On a more serious note, we were inspired by the "Environmental" track and were hoping to put a unique spin on encouraging sustainable behavior, i.e., discouraging meat consumption to reduce meat-production related carbon emissions. And what better way to elicit behavior change than through a persistent (and very annoying) virtual vegan companion?

What it does

As you go about your routine internet browsing, That Vegan Friend quietly waits in the background. The moment you access a site that mentions a type of meat in any way, shape, or form, That Vegan Friend pounces! You're bombarded with passive aggressive insults and virtue signaling, while also experiencing changes in the page that you were viewing (read: red flashing background)!

Additionally, That Vegan Friend records your meat-related browsing habits. Clicking on the extension displays a number of informative visualizations, including rough estimates of money saved for avoiding meat and environmental impact as a measure of reduced carbon emissions. Through a combination of exploration and direct shaming, That Vegan Friend is guaranteed to produce environmentally-friendly results!

How we built it

Because That Vegan Friend seems outwardly very simple, you may be surprised to find that it is in fact quite sophisticated internally. The Chrome extension uses a background script to listen for web navigation. Once a user visits a new page, the background script pulls the URL of an accessed site and passes it to the Python back-end via a Flask API. Then, the back-end scripts scrape the site's HTML using BeautifulSoup, looking for mentions of any type of meat. Once found and tallied, a personalized roast using the site's number of meat mentions is chosen. Also, the user's meat-related browsing habits are pushed to Firebase for later use. Then, we head back to the extension's front-end, where the roast is passed from the background script to the content script via chrome tab's message passing and displayed in a pop-up modal. The page title and background are modified to maximize user shame.

When you click on the extension to see the personalized visualizations, the extension again requests via the Flask API to produce plots based on the most up to date data on the user (which sits in Firebase). After being produced, these plots are pushed up to Firebase, where the front-end uses returned image source URLs to pull them down to display them to the user. Additionally, added HTML formatting makes the extension visually pleasing and adds elements of user exploration.

Challenges we faced

JavaScript will be JavaScript. Async requests........ oof. Furthermore, we had never worked with Chrome extensions before and choosing which Chrome API functions to use was a challenge. A front-end is never easy to build and we certainly were quite ambitious with this project, tackling both a modal pop-up that need to interact with the existing webpage and a data visualization component. Still, the extension looks nice and works well, which was not without a good deal of troubleshooting.

On the back-end, Flask hates matplotlib? Some refactoring and a lot of StackOverflow did the trick here, but it would be an understatement to say that this was an absolute headache.

Accomplishments that we're proud of

The extension came together and roasts effectively! Given that we tackled a suite of things that we've never done before, this feels like quite an accomplishment. We've never completed a project with this many moving parts at a Hackathon before (with only 2 people!), so That Vegan Friend is a first in that regard as well!

What we learned

A lot of patience is required when there are so many things to connect up. While we've used Flask as a way to access our back-end before (check out our project autoGrocer!), we've never had such a fleshed out back-end. Getting things to work like you want them to work requires a lot of trial and error. But hey: it was a great learning experience! What more can you ask for out of a Hackathon?

Also, Chrome extensions!

What's next for That Vegan Friend

Currently, the API is served on localhost which is, of course, not useful if we were to want to actually deploy That Vegan Friend. Serving it on something more permanent like AWS would be a great first step. Also, we really only just scratched the surface when it comes to the realm of possibility with Firebase. A great next step would be to track more users and dynamically mine, store, and visualize data about these users. There's many more possibilities for That Vegan Friend, but we're very happy with what we were able to produce in such short time!

Share this project: