That Vegan Friend strikes (check out the tab's new name)
That Vegan Friend is oh so passive aggressive
Firebase stores user-personalized data and visualizations
Chrome extension exploration
That Vegan Friend's MO
User's overall meat trends
User's reduced carbon emissions data
User's potential savings by eating less meat
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
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!