AI NoteTaker Chrome Extension

My AI Notetaker uses built-in Summarizer and Prompt API to fight text overload. Paste text for instant, private notes and reflections, sorted into tabs. Turn any article into insights fast.

Comment

What Inspired Me

I was inspired by the daily challenge of information overload. We all read so many articles, reports, and documents online, but it's hard to find the time to process and reflect on all that information. I wanted to create a tool that acts like a smart assistant, built directly into the browser, to solve this exact problem. The launch of the Google Chrome AI Challenge was the perfect opportunity to build my vision: a tool that doesn't just summarize, but helps you understand and reflect on content, instantly and privately.

What I Learned

This project was a deep dive into modern Chrome extension development and the future of on-device AI. My biggest takeaways were:

How to Use the Summarizer API: I learned how to initialize an on-device AI session with summarizer.createTextSession() and send complex instructions using session.prompt(). This is incredibly powerful because it's fast and completely private, as no data leaves the user's machine.

Manifest V3 Security is Strict: I learned (the hard way!) about Chrome's Content Security Policy (CSP). You can't use inline scripts or load external files from a CDN. This forced me to learn the correct, secure way to build an extension: moving all logic to a separate popup.js file and embedding all CSS directly into the HTML.

The Power of Prompt Engineering: Just calling the AI wasn't enough. I learned to write a highly specific system prompt that instructs the AI to return its answer in a pre-defined JSON format. This allowed my code to reliably parse the response and build the tabbed interface.

How I Built It

My AI Notetaker is built as a lightweight, secure Chrome Extension using three main files:

manifest.json: This file defines the extension, its permissions (like aiTextSession), and points to the popup file.

popup.html: This is the complete UI for the extension. It's written in simple HTML and includes all the necessary CSS in a tag to comply with the Content Security Policy. It has three main &quot;views&quot; (initial, loading, and results) that are shown or hidden as needed.</p> <p>popup.js: This is the brain of the operation.</p> <p>It listens for the &quot;Generate Notes&quot; button click.</p> <p>It grabs the text from the user.</p> <p>It calls the await summarizer.createTextSession() to start the on-device AI.</p> <p>It sends the text along with a detailed system prompt, asking the AI for a JSON object containing a list of notes (with titles) and an overall reflection.</p> <p>Once the AI responds, this script parses the JSON and dynamically builds the HTML for the tabs and content panels, presenting the notes in a clean, organized way.</p> <p>Challenges I Faced</p> <p>My main challenge was &quot;silent failures.&quot; At first, clicking the &quot;Generate Notes&quot; button did absolutely nothing.</p> <p>I discovered this was due to two separate issues:</p> <p>Content Security Policy (CSP): My initial code was trying to load external scripts and fonts, which Manifest V3 blocks. This caused the entire JavaScript file to fail silently. I fixed this by removing all external links and moving all my code into the popup.js file.</p> <p>Accessing the Experimental API: The APIs wasn&#39;t working, but it wasn&#39;t giving me an error. I learned that because this API is experimental, I had to be using Google Chrome Canary and, most importantly, I had to manually enable the Prompt API for Gemini Nano flag in chrome://flags before the API would even be recognized by the browser.</p> <p>To solve this, I added a proper error-handling section to the UI. This was the breakthrough, as it finally showed me an error, which led me to discover the feature flag solution.</p>

Built With

Share this project:

Updates