EcoLens

Project Title

EcoLens - Food Sustainability Browser Extension

Short Description

A browser extension that automatically detects food products while shopping online and provides environmental impact analysis, helping consumers make sustainable purchasing decisions with real-time sustainability scores and more sustainable recommendations.

Project Description

Chosen Problem Statement Theme 3: Consumption and Environment - Problem Statement 1 We addressed the challenge that consumers often unintentionally support unsustainable practices due to lack of clear information about environmental impacts of their purchases. While 68% of consumers want to make sustainable choices, they lack accessible and reliable information during their shopping experience.

Solution Overview EcoLens bridges the information gap by providing real-time sustainability analysis directly in the shopping experience. The extension operates in two modes: Automatic Detection: Scans web pages while browsing grocery stores and food retailers, using multi-strategy extraction (JSON-LD, meta tags, DOM analysis) to identify products Manual Search: Popup interface for searching any food product with comprehensive sustainability reports The solution provides a report with environmental scores, carbon footprint data, packaging analysis, and alternative eco-friendly recommendations, making sustainability data accessible at the point of purchase decision.

Technical Implementation Frontend

• React 19 + TypeScript for popup interface
• Chrome Extensions Manifest V3 architecture
• Tailwind CSS + Radix UI for modern, accessible design
• Content scripts for webpage product detection
• Vite for optimized builds

Backend

Key Technologies

• OpenFoodFacts API and database
• Central foundation food data from the U.S. Department of Agriculture's (USDA) FoodData Central system

Challenges

1. Multi-site Compatibility: Different websites structure product data differently, with different DOM hierarchies in place, which proves very difficult for us to scrape the product's name. To combat this challenge, we decided to use a multi-strategy approach using JSON-LD, meta tags, and DOM selectors with fallback mechanisms.

2. Product Name Normalization: Raw product names contain marketing noise, especially when it is scraped from a website that potentially has irrelevant content. To combat this, we decided to index a central foundation food data and fuzzy search it for keywords, in combination with blacklisting.

3. Manifest V3 Restrictions: The Chrome Manifest V3 introduced a lot of security improvements, which meant that there was a lot more restrictions that we had to deal with. There was only a certain way to inject an UI into the DOM and it was very annoying to deal with inlining functions.

4. Duplicate entries: The database had plenty of duplicate entries that have partial and conflicting data, so we had to find a way to pick the best product that can be displayed by the extension. We decided on a scoring system that will be attached to each entry that was queried, which will determine the information that will be used.

Future Improvements

1. Integrate with other types of products (not just food) - Currently food is the only product type that has a solid database for sustainability metrics. If we ever get the opportunity to build up a product database, it would definitely allow us to include more types of products

2. Improved product detection accuracy- We can perhaps use machine learning models to extract product names from websites and match keywords to get data.

3. Regional data - Currently the data used is worldwide data, but sustainability data may vary from region to region. So given the data and resources, we can perhaps localise the sustainability metrics for a more accurate report.

Built With

• chrome
• docker
• python
• react
• typescript
• vite