DEV Community

Cover image for SnapNote
Shubham Bawari
Shubham Bawari

Posted on

SnapNote

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.

Chrome Extension Version Manifest


✨ 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.

Chrome Extension Version Manifest


✨ 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)

Collapse
 
citronbrick profile image
CitronBrick

This sounds actually useful

Collapse
 
hello_shubham profile image
Shubham Bawari

@citronbrick Thank you so much! That really means a lot 😊
I’m glad you found it usefulβ€”still working on improving it further!