Frosty | Devpost

Inspiration

We realized that there is a 30% gap between interest and action of the general public when it comes to sustainability - many are interested in it but few take action. Furthermore, individuals tend to forget topics they may initially care a lot about, such as the severity of the Amazon rainforest burning due to rapid news cycles that report and move on quickly.
We wish to build a virtual assistant that actively provides sustainability-related information, promotes eco-awareness, and helps users make informed, conscious decisions about their online interactions.

A google extension that suggests and arranges sustainability-related informative articles, reports, and websites, based on hot words in the current article or previous website browsing preferences.
Frosty, the virtual assistant, presents a calculated sustainability score for companies mentioned or official websites visited contingent on industry similars and a variety of rating sources.
Frosty also highlights the environmental focus of companies and compiles 5 relevant articles, including about two less-recent articles to reemphasize issues one used to be passionate about.
Lastly, when browsing different news articles, Frosty scans the article title to evaluate claim credibility and flag any potential false information.

We use two iframes to construct the minimization effect of the Frosty pop-up window as well as including transition effects and bottoms.
Update icon and bottom coordinates simultaneously to produce the drag effect.
Incorporated graphics and animations through hand-drawn motions of frosty and setInterval delay function.
There’s a persistent background script used to identify company names and return their ESG ratings. The script communicates with the content scripts for each of the pages via message passing.
Fact-checking is done using the Google Fact Check API. The title of the page is supplied as the query and the resultant data is parsed and displayed to the user.

Difficult to pass information between different js runtime contexts (background, page, content, etc). We frequently ran into issues with website CSP.
The mouse click and moving of events can get trapped in cross-origin iframes and lead to bugs.
Hard to find accurate, reliable ESG ratings and fact-checking sources due to variability in methodology from agency to agency.

Successfully managed the various js runtime contexts correctly and handled communication between them using message passing.
Devised a standard method of propagating events from an iframe to its parent and achieved smooth drag interactions with the pop-up window.
Analyzed and extracted ESG ratings from various websites and made use of the google fact-checking API.

Explored a variety of ways in which the javascript in iframe interacts with the main window.
Designed and constructed animations from scratch by drawing each motion and using javascript to allow continuous graphics motion.
How to collaborate and communicate effectively with teammates in different time zones to implement a cohesive project.
Courage and perseverance are vital to helping progress towards solving urgent real-world problems.

Expand to encompass the 'S' component or even the "G" component with more goals (e.g. company's ethical sourcing of materials, labor practices).
Improve algorithm to generate more accurate article suggestions based on browser history.
Level up Frosty by opening up more interactive options and looks as the user achieves personalized goals.
Relate to real-life channels where feeding or interacting with Frosty yields opportunities to feed and protect endangered animals