Skip to content

README.en.md

Latest commit

 

History

History
208 lines (150 loc) · 5.52 KB

README.en.md

File metadata and controls

208 lines (150 loc) · 5.52 KB

SlideNote

SlideNote

Slide notes, always by your side

Chrome Sidebar Note Extension | Cross-device Sync | Minimal Design

GitHub version License Chrome Web Store

Features

  • Sidebar Display — Fixed in browser sidebar, always accessible
  • Markdown Editor — Preview/edit mode toggle with real-time rendering
  • Rich Text Copy — Copy with styling, paste directly into other apps
  • Auto Save — Automatically saves 1 second after you stop typing
  • Cross-device Sync — Cloud sync via Chrome Storage API
  • Search Filter — Real-time search through titles and content
  • Navigation Arrows — Quickly switch between notes with up/down arrows
  • Ultra Lightweight — No framework dependencies, bundle size only 24KB

Use Cases

Scenario Description
Multi-device Workers Take notes at work, continue at home
Developers Store API keys, server addresses, config info
Content Creators Manage multiple account passwords, copy templates, asset links
Quick Notes Fast capture of ideas, to-dos, clipboard content

Installation

Option 1: Chrome Web Store (Recommended)

Install from Chrome Web Store

Click here to install from Chrome Web Store

Option 2: Download Local Package

Download the latest release from GitHub Releases and install manually:

  1. Download and unzip the package
  2. Open Chrome browser
  3. Navigate to chrome://extensions/
  4. Enable "Developer mode" in the top right
  5. Click "Load unpacked"
  6. Select the unzipped folder

Option 3: Build from Source

# Clone repository
git clone https://github.com/maoruibin/SlideNote.git
cd SlideNote

# Install dependencies
npm install

# Build for production
npm run build:prod
  1. Open Chrome browser
  2. Navigate to chrome://extensions/
  3. Enable "Developer mode" in the top right
  4. Click "Load unpacked"
  5. Select the dist folder in the project root

Usage

  1. Click the SlideNote icon in Chrome toolbar
  2. The sidebar opens, ready to use
  3. Click "New Note" to create your first note
  4. Click on a note to select and start editing
  5. Right-click a note to reorder or delete
  6. Auto-saves 1 second after you stop typing

Tech Stack

Vanilla JS (ES6+)  →  No framework, ultra lightweight
Vite               →  Fast build
Chrome Storage     →  Free cloud sync
CSS Variables      →  Design system

Why no framework?

Reason Description
Performance Load time < 100ms, no 100KB+ framework overhead
Simplicity CRUD doesn't need complex state management
Stability No framework upgrade risks, code works long-term

Project Structure

slidenote/
├── src/sidepanel/
│   ├── core/           # Data layer (Store, EventBus, SyncManager)
│   ├── components/     # UI components
│   └── utils/          # Utility functions
├── docs/               # Design documents
└── public/icons/       # Icon resources

Design Philosophy

Restrained colors  →  Monochrome main tone, doesn't distract
Clear hierarchy   →  List vs content, clear at a glance
Comfortable spacing →  Breathing room, not cramped
Consistent border radius →  Gentle, not sharp

Roadmap

v0.0.3 (Current)

  • Markdown editor with preview/edit mode toggle
  • Copy as rich text (with styling)
  • Copy as Markdown source
  • Navigation arrows (prev/next note)
  • Per-note view mode memory
  • Markdown syntax help modal
  • All v0.0.1 features

v0.0.2

  • Basic CRUD
  • Auto save
  • Cross-device sync
  • Search filter
  • Note ordering (right-click menu)
  • UI optimization (adaptive width, remove focus borders)

v0.0.4 (Planned)

  • Note grouping/tags
  • Data export (JSON/Markdown)
  • Keyboard shortcuts

Support

If this project helps you, consider buying me a coffee ☕️

WeChat Pay Alipay

More Projects

Check out more of my projects and articles: doc.gudong.site

License

MIT License

Author

Gudong | Blog: https://blog.gudong.site/

Slide notes, always by your side

If this project helps you, please give it a ⭐ Star!