Context-Craft + LingoLens

• 

  Context-Craft+LingoLens

Inspiration:-

Reading online content can be overwhelming. Long articles, complex topics, and unfamiliar vocabulary make learning slow and inefficient. We wanted to create a tool that turns any webpage into an interactive learning experience — helping students, researchers, and lifelong learners summarize, understand, and retain knowledge faster.

I was inspired by my own struggle to read articles efficiently and the idea of using AI to generate summaries and study questions instantly.

What it does

ContextCraft + LingoLens is a Chrome extension that:

Summarizes any webpage in 5 concise bullet points.

Generates study questions to test comprehension.

Explains complex topics in simple, ELI5 language.

Lets you highlight words or phrases for instant AI-powered translations and examples.

Saves your vocabulary list locally, turning reading into active learning.

All results appear instantly in a popup, so users can focus on learning instead of searching or taking notes manually.

How we built it

Frontend: Popup UI using HTML, CSS, JavaScript

Backend / Background Script: Handles communication with Google Gemini AI

Content Script: Extracts webpage text and detects highlighted words

Storage: chrome.storage API for saving vocabulary locally

AI: Google Gemini API for summarization, study questions, and translations

Challenges included synchronizing the content script with the popup, managing asynchronous AI requests, and keeping the UI responsive and clean.

Lessons Learned

Learned how to integrate AI APIs in real-time within a browser extension.

Gained experience with Chrome extension architecture (background scripts, content scripts, popup scripts).

Learned the importance of UX design to make AI output readable and actionable.

Future Improvements

Add a backend proxy to secure API keys.

Support multi-language translations.

Add user accounts for syncing vocabulary across devices.

Implement gamified study modes to enhance engagement.

Built With

Languages: HTML, CSS, JavaScript

Platform: Chrome Extension

APIs: Google Gemini AI

Storage: chrome.storage

Built With

• chrome
• css
• geminiapi
• github
• html
• javascript