Inspiration

Researchers, students, and professionals constantly interact with large volumes of text online. The process of manually summarizing lengthy articles, translating foreign-language content, and proofreading notes or drafts is time-consuming and inefficient. This friction breaks concentration and slows down the research and writing workflow.

I was inspired to solve this problem by providing an "AI Research Assistant" that lives directly in the Chrome toolbar. The goal was to eliminate the need to switch tabs or use multiple external tools, allowing users to comprehend information and produce high-quality work faster.

How I built it

ScholarMate is a Manifest V3 Chrome Extension built with HTML, CSS, and JavaScript.

The architecture is split into two main parts:

  1. The Popup (popup.html, popup.js): This is the user interface. It handles button clicks, manages the text areas, and saves user preferences (like theme and AI mode) using the chrome.storage API. It also uses chrome.scripting to inject a function into the active tab to "Grab selection".
  2. The Service Worker (background.js): This is the "brain" of the extension. It listens for messages from the popup and handles all API calls.

The core feature is the hybrid AI system. I implemented three modes the user can select:

  • Built-in: Uses the new chrome.ai.LanguageModel (Gemini Nano) for fast, on-device processing.
  • Cloud: Uses the external Google Gemini 2.5 Flash API as a powerful alternative.
  • Hybrid (Default): This is the default mode. It first tries to use the built-in chrome.ai API. If it fails (e.g., the user doesn't have the feature enabled), it automatically falls back to the Cloud AI. This provides the best of both worlds: speed/privacy when available, and robust functionality when not.

Challenges I ran into

The main challenge was working with the experimental chrome.ai.LanguageModel API. Because it's new and requires specific Chrome versions and flags, I couldn't guarantee it would work for all users.

This led to the "Hybrid" mode, which was my solution to the challenge. Building the logic to gracefully fail over from the built-in API to the cloud API was complex but resulted in a much more reliable and user-friendly extension. I also had to build a user-friendly error-handling system in the popup that could parse the error from the background and provide clear, actionable steps for the user (e.g., "Go to chrome://flags...").

What I learned

I learned a great deal about the new chrome.ai on-device API and its potential for building fast, privacy-focused extensions. I also learned how to create a robust fallback system that calls an external cloud API (Gemini 2.5 Flash). This project was a deep dive into modern Chrome Extension development, covering chrome.storage for settings, chrome.scripting for page interaction, and managing asynchronous communication between the popup and the service worker.

Built With

  • chrome-extensions-(manifest-v3)
  • chrome.ai.languagemodel-api-(gemini-nano)
  • chrome.scripting
  • chrome.storage-api
  • css
  • google-gemini-2.5-flash-api
  • html
  • javascript
Share this project:

Updates