Unicourse Helper

Inspiration

I found that researching universities is often an overwhelming task for students. Navigating dense university websites, finding scattered information on scholarships, student life, or application processes, and trying to determine the right "fit" can be incredibly time-consuming. I saw an opportunity to leverage modern AI directly within the browser to act as a research assistant, simplifying this journey. My goal was to create a tool that quickly extracts, summarizes, and contextualizes key information, making the research process more efficient and insightful.

How I Built It

UniCourse Helper is a Chrome Manifest V3 extension I built using a hybrid architecture, combining the power of Chrome's Built-in AI (Gemini Nano) with the flexibility of cloud services.

On-Device AI (LanguageModel API): I utilized Chrome's LanguageModel interface directly within the extension's service worker (background.js) for privacy-preserving and fast processing. This handles:

• Generating concise summaries of the currently viewed university course/program page.
• Crafting tailored application tips based on the page summary, external link context (titles), and the user's self-rated profile preferences (sociable, nature lover, study-focused).

Cloud Backend (Firebase Cloud Functions): To securely handle external API calls and overcome browser limitations, I implemented serverless functions:

• getExternalData: Takes a university name and user preferences and calls the Google Custom Search API to find relevant external links (Scholarships, Reviews, Location Info). It returns a clean JSON list of link titles and URLs.
• findUniversities: Takes a desired course and location, calls the Google Custom Search API, applies heuristics (filtering out listicles, homepages; prioritizing program-related paths), and returns a filtered JSON list of links.

Frontend & Workflow:

• The Popup (popup.html/.js) provides the main user interface with buttons to trigger analysis or discovery and open preferences.
• The Options Page (options.html/.js) allows users to configure discovery criteria and analysis preferences using chrome.storage.sync.
• A Content Script (content.js) scrapes the text content of the active university page upon request from the background script.
• Result Pages (results.html/.js, discovery_results.html/.js) display the generated AI content and fetched links loaded from chrome.storage.local in a new browser tab.

I adopted a "fire-and-forget" messaging pattern from the popup to the background script to handle potentially long-running AI and network tasks without timing out the user interface.

Challenges Faced

Developing UniCourse Helper involved several hurdles:

• Built-in AI Setup: Enabling and reliably accessing the LanguageModel API was initially challenging. It required specific Chrome flag combinations (#prompt-api-for-gemini-nano, #optimization-guide-on-device-model with BypassPerfRequirement), troubleshooting corrupted model downloads (identified via 0 Bytes file size in chrome://on-device-internals despite chrome://components showing "Updated"), and resolving GPU block errors (necessitating driver updates). The namespace shift to the global LanguageModel object also required code adaptation.
• Service Worker Lifecycle: Long-running tasks triggered the "message channel closed" error due to the service worker potentially shutting down. Refactoring the communication pattern to an immediate acknowledgment from the background script and handling results via storage/new tabs solved this.
• Data Fetching Strategy: An initial approach involving scraping external link content proved too slow and unreliable. I pivoted to fetching only link titles/URLs via the Google Custom Search API, significantly improving performance and robustness.
• API Key Security: Implementing the hybrid model required careful management to keep the Google Cloud API key secure within the Firebase function and only expose the function's public URL to the extension.
• Asynchronous Flow: Managing the complex asynchronous flow involving user interaction, content script messaging, multiple AI calls, external API calls (Firebase), and storage operations required careful use of async/await and robust error handling.

What I Learned

This project was a deep dive into building modern Chrome extensions with integrated AI. Key learnings include:

• Implementing a hybrid architecture combining on-device AI with serverless cloud functions.
• Working directly with Chrome's experimental LanguageModel API and troubleshooting its setup.
• Managing asynchronous operations and communication between different extension components (popup, service worker, content script, results tabs).
• The importance of robust error handling and secure API key management.
• Pivoting design decisions (like scraping vs. link fetching) based on performance and reliability constraints.

Built With

• bootstrap
• chrome-built-in-ai-(languagemodel-api)
• chrome-extensions-(manifest-v3)
• css
• firebase-cloud-functions
• google-custom-search-api
• html
• javascript