I recently built a small tool called SlideNote — a Chrome extension that lives in your browser's side panel, letting you take notes without leaving your current page.
The Problem
As a developer, I constantly need to jot down quick bits of information: terminal commands, API keys, server IPs, random config details.
I tried storing these in various places — system notes, dedicated note apps — but nothing stuck. The reality is, I spend 80% of my workday in the browser. I needed the shortest possible path between "I need to save this" and "it's saved."
So I used a browser note-taking extension for over two years. It was simple and stable.
But last week, it started driving me crazy.
Here's why: the extension was "blocking" — when opened, it covered the entire webpage. To copy something, I had to: open extension → copy → close extension → paste. Need another piece? Repeat the whole dance.
Back and forth, interrupting my flow.
The Solution
Around the same time, I discovered that Chrome added a Side Panel API last year. Extensions can now live in a dedicated sidebar panel instead of taking over the entire viewport.
Some AI assistants already use this feature. Why not a note-taking tool?
So I built it. With Claude Code's help, SlideNote was born in two days.
What is SlideNote?
SlideNote is a Chrome extension that puts a note-taking panel in your browser's sidebar.
Click the icon, the panel slides out. Left side: note list. Right side: note content. Copy, paste, repeat — without ever leaving your page.
Two key features:
1. Extremely Lightweight
The bundled extension is only 24KB. No framework dependencies. Loads in under 100ms. Install and use — no account required.
2. Cloud Sync
Data is stored via Chrome Storage API under your Google account. Switch computers, log in with the same Google account, and your notes are there.
Everything stays local and in Google's cloud. No third-party servers.
A Promise: Keeping It Simple
SlideNote is a sticky note, not a notebook.
So it won't have:
- ❌ Complex tagging systems
- ❌ Knowledge graphs, bi-directional links
- ❌ Collaboration, version history
- ❌ Cross-platform desktop apps
It does one thing: let you quickly store and retrieve fragments of information while browsing.
If you need to write long articles or manage a knowledge base, use Notion or Obsidian.
Use Cases
Beyond my developer scenario, there are many use cases:
AI Prompt Management
If you use Claude, ChatGPT, or other AI tools, you probably have prompt templates. Keep them in SlideNote — copy, tweak the topic, send.
Taking Notes While Learning
Watch a tutorial video on YouTube while taking notes in the side panel. Video on the left, notes on the right.
Information Management for Marketers/Operators
Customer info, account credentials, copy templates, asset links — keep them all in SlideNote for quick access.
Additional Features
I also added a few small touches:
- Markdown support — real-time preview
- Rich text copy — copy styled text directly into other apps
- Search — filter titles and content in real-time
- Auto-save — saves 1 second after you stop typing
Current version is v0.0.5. I'll keep optimizing based on my needs, but it will stay simple.
How to Install
Option 1: Chrome Web Store (Recommended)
Install SlideNote from Chrome Web Store
Option 2: Download & Install Manually
Download the zip or get it from GitHub Releases. Extract, then load in chrome://extensions/ with Developer Mode enabled.
Option 3: Build from Source
git clone https://github.com/maoruibin/SlideNote.git
cd SlideNote
npm install
npm run build:prod
Load the dist folder as an unpacked extension.
Final Thoughts
SlideNote's slogan: "Slide notes, always by your side."
It solved a small pain point of mine, but it might help others too. If you need to quickly capture and access information while browsing, give it a try.
Works on Chrome. Edge should work too (not tested with other browsers).
The project is open source. If you find it useful, a star would be appreciated.
I'm Gudong. Good tools deserve to be seen.
About Gudong
inBox Notes Author | Indie Developer | AI Programming Practitioner
Love development, love sharing.
Continuously sharing valuable AI practices and development insights.
Follow me to explore "Conversational Programming" practices and reflections.
Top comments (0)