Esmarty

Inspiration

While browsing and studying online, I realized how often we switch between tabs — from reading an article to opening ChatGPT or Gemini just to understand a paragraph or debug a small code snippet. That constant context switching breaks focus and wastes time.

I wanted a solution that brings AI assistance into the browser itself — something that feels natural, fast, and helpful for students, developers, and lifelong learners. That’s how Esmarty was born — a Chrome extension that makes your browser smarter, not heavier.

What it does

Esmarty is an AI-powered Chrome extension that turns any webpage into an interactive learning space.

Key features:

🪄 Highlight & Ask — Select any text or code, right-click or use the floating button to ask questions or get explanations. 💬 Smart Chat Window — Interact with AI directly on the page without leaving your workflow. 🧩 Summarization & Debugging — Quickly summarize long articles or understand code snippets. 🧠 Short-Term Memory — Continue conversations naturally with follow-up questions. 🔒 Privacy-First Design — Uses the user’s own API key; no external data storage.

During this hackathon, I focused on improving Esmarty’s learning experience, experimenting with memory handling, UI responsiveness, and exploring new potential features like multilingual support and voice input.

How I built it

Esmarty is built as a Chrome Extension using:

• Frontend: HTML, CSS, JavaScript (ES6+)
• AI Integration: Google Gemini API Architecture:
• content.js for interacting with web pages
• background.js for service worker and API handling
• popup.js for chat UI
• Utility modules for API calls and in-memory context handling

I designed the UI to be minimal, distraction-free, and responsive. The goal was to make AI assistance feel like a built-in browser feature rather than a separate app.

Challenges we ran into

• Managing AI API calls efficiently inside Chrome’s extension environment.
• Handling context and conversation memory without backend servers.
• UI responsiveness issues when embedding the chat window into complex web pages.
• Maintaining user privacy while allowing personalization (like using the user’s own API key).
• Debugging Chrome’s extension permissions and manifest configurations.
• Each challenge taught me something new about real-world product building, browser APIs, and asynchronous JS programming.

Accomplishments that I'm proud of

• Built a functional AI Chrome extension completely from scratch.
• Created a smooth, non-intrusive UI that blends naturally with web pages.
• Successfully connected a powerful AI model (Gemini) with in-browser context understanding.
• Achieved memory-based conversations without needing backend infrastructure.
• Most importantly, stayed consistent and curious — focusing on learning and experimentation instead of perfection .

## What I learned

• How Chrome extension architecture works (background scripts, content scripts, message passing).
• How to integrate AI models safely inside browser environments.
• Importance of UX in AI tools — simplicity matters more than complexity.
• The power of experimentation — even unfinished ideas can inspire future innovations.
• How hackathons encourage creative problem-solving, not just coding.

What's next for Esmarty

I plan to:

• Add support for multiple AI models (OpenAI, Claude, Gemini).
• Introduce voice input/output and multilingual explanations.
• Enable long-term memory and user history across pages.
• Build a web dashboard to track user prompts and insights.
• Publish Esmarty on the Chrome Web Store for public use. This hackathon was the first step in turning a personal side project into something that could genuinely help learners and

Built With

• gemini
• javascript
• langchain