AI Study Side Panel — Project Story

Inspiration

We’ve all done the copy → paste → summarize → switch tabs dance. It’s slow, breaks focus, and loses context—especially when you’re juggling 5+ courses and dense readings. We wanted a tool that stays on the page, summarizes on-device for privacy, highlights key concepts you can click, and quizzes you—so the web itself becomes your tutor.

What We Built

A Chrome extension that opens a side panel next to any page and uses Chrome’s built-in AI:

** Summarizer API (Gemini Nano, on-device)** for TL;DR, key bullets, or study notes.
** Prompt API** for 4 MCQ quizzes with instant green/red feedback and explanations.
A content script that auto-highlights 6+ key concepts in the page; clicking a highlight opens a plain-language explanation with examples.

How We Built It

Chrome platform

Side Panel UI for summarize → concept explorer → quiz.
Content Scripts + Scripting to extract readable text and inject non-duplicated <mark> highlights.
Tabs + Runtime messaging to sync page ↔ side panel.
(Optional) Storage to save concept history and quiz attempts.

AI flows

Summarize current page or custom text with Summarizer API (styles: TL;DR / bullets / study notes).
Extract concepts from the summary (bold/code spans, title-case nouns, frequent bi/tri-grams), then cross-check they appear in the page; if fewer than 6, backfill with frequent in-page terms.
Explain on click: send the highlighted term to the Summarizer API with page context for a short, example-driven explanation.
Quiz: Prompt API returns structured JSON for 4× MCQ; we render and auto-grade inline.

Lightweight pre-condense

Before summarizing, we normalize whitespace, keep top headings + first sentences, and cap tokens to keep the panel fast on long articles.

What We Learned

On-device AI feels different: reuse a single Summarizer instance and pre-condense input to avoid cold starts and reduce latency.
UX beats raw summaries: clickable highlights + concept history turn a passive TL;DR into active learning.
Structured prompting with the Prompt API reduces parsing code and eliminates many UI edge cases.

Challenges

De-duplicating highlights across messy DOMs (ads, dynamic content, shadow roots). We solved this with deterministic range IDs and a “no re-wrap if normalized text already marked” rule.
Performance on long pages: we built an (O(n)) pass for extraction and graceful fallbacks when concept counts are low.
Context limits & timeouts: a timeout wrapper with a shorter-input fallback keeps interactions responsive.

A Peek at the Concept Scoring

We blend (n)-gram frequency with small penalties to avoid junk:

$$ \text{score}(g) = \text{base}(g) + \min(f_g, 3) - \text{penalty}(g), \qquad \text{base}(g) = \begin{cases} 3 & \text{if trigram} \ 2 & \text{if bigram} \end{cases} $$

with (\text{penalty}(g)=1) for verbs ending in -ing and (0) otherwise. Single-word concepts are allowed if they’re domain-bearing (length ( \ge 5), frequency ( \ge 2), not a stop-word).

Why It’s Useful & Scalable

Works on any readable webpage and across multiple audiences (students, journalists, policy analysts, engineers).
Multilingual via Summarizer’s outputLanguage → usable across regions and programs.
Prompt API is multimodal-ready, so quizzes/explanations can extend to images (diagrams) and audio (lecture clips) without changing the UX.

Tech Stack Snapshot

Chrome APIs: Side Panel, Tabs, Scripting, Runtime messaging, Content Scripts, (optional) Storage
Built-in AI: Summarizer API (Gemini Nano, on-device), Prompt API (structured outputs, multimodal-ready)
UI: compact HTML/CSS, accessible controls, deterministic highlight IDs