This is a submission for the DEV April Fools Challenge
What I Built
SnapNote is a lightweight Chrome Extension that lets you save any ChatGPT or Claude response as a study note in one click. Instead of losing valuable AI-generated answers in an endless chat history, SnapNote injects a "Save as Note" button directly into the AI chat interface. You can tag notes by subject, search through them instantly, and access everything from a clean popup dashboard β all without leaving your browser.
Demo
π Pin the SnapNote extension to your Chrome toolbar, head to ChatGPT or Claude, ask any question, and click the "Save as Note" button that appears below the response. Open the popup to browse, search, and manage all your saved notes.
π SnapNote β AI Study Notes
Save any ChatGPT or Claude answer as a study note in one click. Search, tag, and export your notes.
β¨ Features
- π€ One-Click Save: Instantly save any response from ChatGPT or Claude directly from the chat interface.
- π·οΈ Smart Tagging: Categorize your notes by subject (e.g., English, Coding, or Custom tags).
- π Search & Filter: Quickly find exactly what you're looking for through the intuitive extension popup.
- πΎ Local Storage: Notes are safely and securely saved in your browser's local storage.
- β‘ Seamless UI: Clean, lightweight pop-up and minimally intrusive on-page buttons.
π οΈ Project Structure
The project follows a standard Manifest V3 Chrome Extension architecture:
SnapNote/
βββ π manifest.json # Extension configuration
βββ π content.js # Injects "Save" button into ChatGPT/Claude
βββ π¨ content.css # Styles for the Save button and tag picker
βββ πΌοΈ popup.html # Extension popup UI structureβ¦Code
The project is a vanilla JavaScript Chrome Extension built on Manifest V3 β no frameworks, no dependencies, just clean and minimal code.
π SnapNote β AI Study Notes
Save any ChatGPT or Claude answer as a study note in one click. Search, tag, and export your notes.
β¨ Features
- π€ One-Click Save: Instantly save any response from ChatGPT or Claude directly from the chat interface.
- π·οΈ Smart Tagging: Categorize your notes by subject (e.g., English, Coding, or Custom tags).
- π Search & Filter: Quickly find exactly what you're looking for through the intuitive extension popup.
- πΎ Local Storage: Notes are safely and securely saved in your browser's local storage.
- β‘ Seamless UI: Clean, lightweight pop-up and minimally intrusive on-page buttons.
π οΈ Project Structure
The project follows a standard Manifest V3 Chrome Extension architecture:
SnapNote/
βββ π manifest.json # Extension configuration
βββ π content.js # Injects "Save" button into ChatGPT/Claude
βββ π¨ content.css # Styles for the Save button and tag picker
βββ πΌοΈ popup.html # Extension popup UI structureβ¦How I Built It
SnapNote is built entirely with vanilla JavaScript, HTML, and CSS following the Chrome Extension Manifest V3 architecture. A content script (content.js) observes the DOM of ChatGPT and Claude using a MutationObserver, detects when a new AI response is rendered, and injects a Save button below it. Clicking the button captures the question and answer, attaches a user-defined tag, and stores everything using the Chrome Storage API. The popup (popup.html + popup.js) then reads from storage and renders all saved notes with live search and delete functionality.
Prize Category
Submitting for Community Favorite β SnapNote solves a real everyday problem for students, developers, and researchers who use AI tools to learn. Instead of re-asking the same questions or digging through old chats, your best AI answers are saved, tagged, and searchable forever. It's simple, it's useful, and it fits naturally into how people already use ChatGPT and Claude daily.
Team Size: Individual
DEV USERNAME: @hello_shubham
Top comments (2)
This sounds actually useful
@citronbrick Thank you so much! That really means a lot π
Iβm glad you found it usefulβstill working on improving it further!