Study Sidebar Notes-Extension banner

Study Sidebar Notes-Extension

1 devlog
39m 36s

I built Study Sidebar Notes to solve a problem I personally face while studying online — constantly switching between tabs just to take notes.

This Chrome extension adds a simple and clean sidebar to any website where I can quickly write import…

I built Study Sidebar Notes to solve a problem I personally face while studying online — constantly switching between tabs just to take notes.

This Chrome extension adds a simple and clean sidebar to any website where I can quickly write important points and even draw diagrams without leaving the page. It helps me stay focused and capture ideas instantly.

The extension automatically saves notes and drawings for each website, so everything stays organized based on what I’m studying. I also added useful tools like pen size control, color picker, eraser, and the ability to download notes.

My goal with this project was to create something lightweight, practical, and actually useful in real-life learning, not just a basic demo.

This project helped me learn how Chrome extensions work, how to inject UI into websites, and how to manage data using browser storage.

Overall, this is a simple but powerful productivity tool that improves the way I study online.

This project uses AI

Ai help in image generation and some error solving.

Demo Repository

Loading README...

Ankit Tripathi

Today I worked on building my Chrome extension Study Sidebar Notes, which helps me take notes and draw while browsing any website. I started by setting up the extension structure using Manifest V3 and created a sidebar that can be toggled on any page.

Then I implemented a notes section with auto-save using chrome storage, so all my notes are saved per website. After that, I added a drawing canvas with features like smooth drawing, color picker, pen size control, eraser, and clear option.

I also improved the UI to make it look clean and modern with a dark theme, and added a feature to download notes as a text file. Finally, I tested the extension on different websites to make sure everything works properly.

This project helped me understand how Chrome extensions work, how to inject UI into webpages, and how to manage user data efficiently.

Attachment
Attachment
Attachment
Attachment
Attachment
0