Esmarty

AI-Powered Chrome Extension

Comment

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 we 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 developers worldwide.

Built With

Share this project:

Updates