EcoLens

EcoLens: Because every purchase comes with a footprint.

Comment

Inspiration

We wanted to empower everyday consumers to make more sustainable choices without having to do extra research, which is more often than not painstakingly manual. Shopping online is incredibly convenient, but understanding the environmental impact of what we buy is often difficult and time-consuming.

EcoLens was built to bridge that gap, bringing sustainability insights directly into the online shopping experience.

What it does

EcoLens is a Chrome Extension that can be activated when users are browsing online e-commerce sites like Amazon, Shopee, or Lazada. It automatically extracts product details (e.g., title, materials, description) and feeds them into a Large Language Model (LLM) that assesses key sustainability factors.

The result is instant, AI-generated sustainability insights presented right on the extension popup, which users can use to decide if the product or brand aligns with their values of sustainability.

How we built it

EcoLens is composed of multiple interconnected components that work together to deliver real-time sustainability insights directly in the user's shopping experience.

Chrome Extension Frontend

We built the extension’s popup and in-page overlay using:

  • React for building modular, responsive UI components
  • Vite as the build tool for fast development and bundling
  • Manifest V3 for modern Chrome extension capabilities (like service workers and improved security)
  • HTML/CSS for layout and styling

This allowed us to deliver a clean, minimal interface that integrates seamlessly with the shopping site without disrupting the user experience.

Express.js Backend

We developed a lightweight Express.js server, which serves as the middleware between the extension and external services (like the LLM API or third-party sustainability data sources). This backend handles:

  • Our own API key protection and rate-limiting
  • Preprocessing of scraped data
  • Sending structured prompts to the LLM
  • Returning formatted sustainability insights to the frontend

Product Data Extraction

We implemented a hybrid data scraping approach:

  • On-site scraping (JavaScript): Content scripts within the extension extract live product details (title, materials, brand, price, etc.) directly from the DOM on sites like Amazon, Shopee, and Lazada. This allows real-time interaction without needing API access to those platforms.
  • External source scraping (Python): In the case of insufficient sustainability context on product pages, such as brand reputation or ethical sourcing info, we use Python scripts to periodically crawl trusted platforms like Good On You. These are stored and accessed by our backend to enrich LLM analysis.

LLM Integration

The extracted and preprocessed product data is sent to a Large Language Model (via OpenAI API) using carefully designed prompts that evaluate:

  1. Carbon Footprint - Measures total greenhouse gas emissions over the product’s lifecycle.
  2. Material Sustainability - Evaluates the use of renewable, recycled, or biodegradable materials.
  3. Energy Efficiency - Assesses the energy used during production and product usage.
  4. Packaging Waste - Looks at the sustainability of packaging materials and waste generated.
  5. Labor Practices - Checks for ethical and fair labor practices.
  6. Water Usage - Measures the amount of water used in production.
  7. End-of-Life Disposal - Considers ease of recycling, biodegradability, or reuse potential.

The LLM's response is parsed and formatted for user-friendly display in the browser.

Challenges we ran into

1. On-site Scraping Scraping product details from Shopee and Lazada proved to be difficult, primarily due to the varied and dynamic site layouts on said websites, together with obfuscated class names in HTML elements, which made it difficult to spot a proper pattern for our scraping algorithm to follow to retrieve the relevant information

2. Crafting of LLM prompts and responses Crafting LLM prompts that provided insightful yet concise sustainability assessments took multiple iterations.

3. UI/UX Development It was rather difficult to balance the richness of sustainability insight information with user-friendliness in the UI. We didn't want to overwhelm shoppers with a barrage of information extracted straight from the LLM response

Accomplishments that we're proud of

In just 2-3 days, we’re proud to have built a fully functional extension capable of real-time product evaluation despite our inexperience with parts of the tech stack.

What we learned

Through this project, we've learned:

  • How to build a functional Chrome Extension
  • That small UX decisions can make a big difference in the clarity of displayed information

What's next for EcoLens

Moving forward, we believe there's much more to be explored when it comes to sustainable shopping, as well as what EcoLens can provide for the users.

1. Greater Support for More Shopping Sites

We chose Amazon, Shopee, and Lazada as 3 of the sites to base EcoLens on, as these were the sites we, as well as some of our close friends or family members, usually use when shopping online. They also happen to be the Top 3 most frequently visited e-commerce sites. In the near future, EcoLens could be expanded to support an increasing number of sites like eBay or Taobao

2. Sustainability Practices Tracking

Sustainable shopping does not just depend on the product and its brand practices, but also on the user's shopping habits. Given the short amount of time to develop this project, we decided to not include this in our final submission, though it is an area that we can eventually explore, to enrich the sustainable shopping experience

Built With

Share this project:

Updates