Sticky notes for the entire internet.
StudyFlow is a Chrome extension that lets you highlight text and create notes directly on any webpage, and then automatically brings everything back when you revisit that page.
I’ve always felt the need for something like this, especially during my college exams and while doing coding contests (LeetCode / Codeforces / CodeChef).
I studied from blogs, docs, PDFs, GFG, different sites, even ChatGPT and other LLMs - and I kept running into two annoying problems:
- I highlighted important lines, but later forgot where they were.
- I wrote notes, but they got scattered across apps, files, and tabs.
I just wanted one simple place where my highlights and notes live together - tied to the exact page I studied from.
So I built StudyFlow.
This is the first version of the project. I’ve tested it as best as I could, but since I’m building this alone, there might still be edge cases. If you find any bug or weird behavior, please open an issue or reach out - I’d genuinely appreciate it.
- Highlight important lines on any webpage
- Choose highlight color (Red / Orange / Yellow)
- Create notes linked to the same page
- Group highlights and notes inside files (subjects / topics)
- Automatically restore highlights when you revisit a page
- See everything inside a dedicated Notes UI
- Search inside the Notes Index
- Export notes + highlights as Markdown
- Export everything at once
- Or export file wise
- Open original source link from any item
- Store data locally and optionally sync to cloud
- Works great with ChatGPT, LeetCode, blogs, docs, and tutorials
- Mark formulas while reading OS / DBMS / CN blogs
- Highlight tricky explanations on GeeksForGeeks
- Save ChatGPT generated formulas or approaches (especially useful during exams)
- Store CP problem observations.
- Mark constraints and corner cases in problem statements
- Save interview preparation notes
- Revise highlights quickly before exams
- Keep subject wise files (OS, DBMS, CN, DSA, etc.)
- Highlight important paragraphs in research blogs
- Save definitions from Wikipedia
- Keep theory + practical examples together
- Create quick revision sheets
- Keep notes per chapter
- Study from multiple sites without losing context
-
Highlight on a webpage + color picker near text
-
Popup note editor
-
Notes Index Page
-
File Page
-
Item Page
-
ChatGPT example
-
LeetCode example
-
Codeforces example
-
Expanded Index Page + filter
-
Exported notes (Markdown)
This project may look simple on the surface, but handling reliable text highlighting across arbitrary webpages is surprisingly tricky.
Because of this:
- On some websites, highlights may not appear correctly
- On some pages, only certain sections may fail
- However, notes are always saved correctly
Even if a highlight fails to show on the page:
➡️ The note and metadata are still stored
➡️ You can always view and download them from Notes / Index / File pages
So think of it this way:
- Notes system = reliable
- Highlight rendering = will improve over time
I’m actively working on making highlighting more robust in future versions.
- Everything works without backend and cloud
- Internet is only needed if you want cloud sync
Your data lives in IndexedDB locally.
- Content script captures selected text
- Highlights & notes are stored in IndexedDB
- Items are grouped by (file + page URL)
- Background service worker handles syncing
- Backend stores user data in MongoDB
- Auth uses JWT (access token + refresh token)
- On login, cloud data is pulled into IndexedDB and cloud gets synced too.
Local DB = fast cache
Cloud DB = long-term persistence
Frontend (Extension UI):
- Vanilla JS
- React (Notes UI)
- TailwindCSS
Extension:
- Chrome Manifest V3
- Content Scripts
- Background Service Worker
Backend:
- Node.js
- Express
- MongoDB
- JWT Auth
You mainly need a MongoDB URI.
That’s it.
- Want only local usage → skip backend completely
- Want persistence + cloud backup → add Mongo URI
Running backend once every few days is usually enough for syncing.
Getting a Mongo URI from MongoDB Atlas usually takes ~2 minutes.
- Clone the repo
git clone https://github.com/guts-718/studyflow-extension.git- Install backend dependencies
cd backend
npm install- Create
.envin backend (similar to.env.sample)
MONGO_URI=your_mongodb_uri
JWT_SECRET=any_secret
PORT=4109- Start backend
npm run start- Build UI
cd ui
npm install
npm run start- Load extension
- Open Chrome
- Go to chrome://extensions
- Enable Developer Mode
- Click Load unpacked
- Select the extension root folder
- Open any webpage
- Select text
- Click a color
- Choose file (first time only)
- Open popup to write notes
- Click “All Notes” to browse everything
- Backend must be running:
npm run startHow sync works:
- While backend is running → extension syncs
- You don’t need backend 24/7
- Even if you run backend once every few days, your data will sync
If backend is not running:
- Everything still works locally
- Your MongoDB URI is your own
- Backend runs on your system
- Tokens stored locally
- I collect nothing
- No analytics
- No tracking
v0.1
- Core functionality works
- Some edge cases exist
- Highlighting reliability improvement planned
- UI improvements planned
- Export as PDF planned
Q: Do I need a real email to sign up?
No. Any username/email like string works.
Q: Does this work offline?
Yes. Fully offline first.
Q: Does this work on Firefox?
Not yet. Chrome only for now. Firefox support planned later.
Q: Is my data safe?
Yes. Your MongoDB URI is yours, backend runs locally, nothing is sent to me.
Q: Can I use this without backend?
Yes. Backend is only for sync/persistence.
During my exams, I struggled with:
- Scattered notes
- Forgotten highlights
- Re reading long pages
- Losing ChatGPT explanations
Instead of switching between tools, I wanted everything in one place.
StudyFlow is my attempt to solve that problem.
Bug reports and suggestions are welcome.
PRs are welcome too.
Great project to explore if you're interested in Chrome extensions, web dev, or system design ideas.
If you face any issue or have suggestions, feel free to reach out:
- Telegram: @cooked_i_am
- Or Reddit
If this helps you even a little in your studies, that’s a big win for me.
Consider giving the repo a star ⭐ if you genuinely found it useful