The latest articles on DEV Community by Shubham Bawari (@hello_shubham). https://dev.to/hello_shubham https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1763453%2Ff0bdbdd8-442c-482f-a1ff-0ba5612b3b75.jpg https://dev.to/hello_shubham en Shubham Bawari Sat, 11 Apr 2026 11:10:58 +0000 https://dev.to/hello_shubham/snapnote-5ge7 https://dev.to/hello_shubham/snapnote-5ge7 <p><em>This is a submission for the <a href="https://dev.to/challenges/aprilfools-2026">DEV April Fools Challenge</a></em></p> <h2> What I Built </h2> <p>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.</p> <h2> Demo </h2> <p>📌 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.<br> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/shubsolos19" rel="noopener noreferrer"> shubsolos19 </a> / <a href="https://github.com/shubsolos19/snapnote" rel="noopener noreferrer"> snapnote </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div> <div class="markdown-heading"> <h1 class="heading-element">📝 SnapNote — AI Study Notes</h1> </div> <p><strong>Save any ChatGPT or Claude answer as a study note in one click. Search, tag, and export your notes.</strong></p> <p><a href="https://github.com/shubsolos19/snapnote#" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/bd8ef5daae014bbe0ceb571105f9fd72286087c21a53233a96d58cf4a8de5781/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4368726f6d652d457874656e73696f6e2d626c75652e737667" alt="Chrome Extension"></a> <a href="https://github.com/shubsolos19/snapnote#" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/f33f2574e51d00f5a5453bee4ce24cdd7fb6906065795a6d99f7cfb05d1d7cb3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f56657273696f6e2d312e302e302d627269676874677265656e2e737667" alt="Version"></a> <a href="https://github.com/shubsolos19/snapnote#" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/a815108833bf77d1c38c863c21bc305746becf1e730dc98cf1d84adb3ab35927/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d616e69666573742d56332d6f72616e67652e737667" alt="Manifest"></a></p> </div> <div class="markdown-heading"> <h2 class="heading-element">✨ Features</h2> </div> <ul> <li> <strong>🤖 One-Click Save:</strong> Instantly save any response from ChatGPT or Claude directly from the chat interface.</li> <li> <strong>🏷️ Smart Tagging:</strong> Categorize your notes by subject (e.g., <em>English</em>, <em>Coding</em>, or <em>Custom tags</em>).</li> <li> <strong>🔍 Search &amp; Filter:</strong> Quickly find exactly what you're looking for through the intuitive extension popup.</li> <li> <strong>💾 Local Storage:</strong> Notes are safely and securely saved in your browser's local storage.</li> <li> <strong>⚡ Seamless UI:</strong> Clean, lightweight pop-up and minimally intrusive on-page buttons.</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">🛠️ Project Structure</h2> </div> <p>The project follows a standard Manifest V3 Chrome Extension architecture:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto"> <pre class="notranslate"><code>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></pre>…</div> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/shubsolos19/snapnote" rel="noopener noreferrer">View on GitHub</a></div> </div> <h2> Code </h2> <p>The project is a vanilla JavaScript Chrome Extension built on Manifest V3 — no frameworks, no dependencies, just clean and minimal code.<br> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/shubsolos19" rel="noopener noreferrer"> shubsolos19 </a> / <a href="https://github.com/shubsolos19/snapnote" rel="noopener noreferrer"> snapnote </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div> <div class="markdown-heading"> <h1 class="heading-element">📝 SnapNote — AI Study Notes</h1> </div> <p><strong>Save any ChatGPT or Claude answer as a study note in one click. Search, tag, and export your notes.</strong></p> <p><a href="https://github.com/shubsolos19/snapnote#" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/bd8ef5daae014bbe0ceb571105f9fd72286087c21a53233a96d58cf4a8de5781/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4368726f6d652d457874656e73696f6e2d626c75652e737667" alt="Chrome Extension"></a> <a href="https://github.com/shubsolos19/snapnote#" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/f33f2574e51d00f5a5453bee4ce24cdd7fb6906065795a6d99f7cfb05d1d7cb3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f56657273696f6e2d312e302e302d627269676874677265656e2e737667" alt="Version"></a> <a href="https://github.com/shubsolos19/snapnote#" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/a815108833bf77d1c38c863c21bc305746becf1e730dc98cf1d84adb3ab35927/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d616e69666573742d56332d6f72616e67652e737667" alt="Manifest"></a></p> </div> <div class="markdown-heading"> <h2 class="heading-element">✨ Features</h2> </div> <ul> <li> <strong>🤖 One-Click Save:</strong> Instantly save any response from ChatGPT or Claude directly from the chat interface.</li> <li> <strong>🏷️ Smart Tagging:</strong> Categorize your notes by subject (e.g., <em>English</em>, <em>Coding</em>, or <em>Custom tags</em>).</li> <li> <strong>🔍 Search &amp; Filter:</strong> Quickly find exactly what you're looking for through the intuitive extension popup.</li> <li> <strong>💾 Local Storage:</strong> Notes are safely and securely saved in your browser's local storage.</li> <li> <strong>⚡ Seamless UI:</strong> Clean, lightweight pop-up and minimally intrusive on-page buttons.</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">🛠️ Project Structure</h2> </div> <p>The project follows a standard Manifest V3 Chrome Extension architecture:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto"> <pre class="notranslate"><code>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></pre>…</div> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/shubsolos19/snapnote" rel="noopener noreferrer">View on GitHub</a></div> </div> <h2> How I Built It </h2> <p>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.</p> <h2> Prize Category </h2> <p>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.</p> <p>Team Size: Individual<br> DEV USERNAME: <a class="mentioned-user" href="https://dev.to/hello_shubham">@hello_shubham</a></p> devchallenge 418challenge showdev