Quick Notes

A Chrome browser extension that adds a floating notepad to any website. Your notes persist per domain — write a note on GitHub, another on Stack Overflow, and they'll be there when you come back.

Features

• Floating notepad — Draggable widget that lives on top of any page
• Per-domain persistence — Notes are saved separately for each website
• Auto-save — Notes save automatically as you type (400ms debounce)
• Draggable — Move the notepad anywhere on screen
• Minimize/Hide — Collapse or dismiss the notepad when not needed
• Popup dashboard — Quick overview of your notes from the extension icon
• Clear per-site — Delete notes for individual domains
• Zero dependencies — Pure vanilla JS, no frameworks or build tools
• Privacy-first — All data stays in your browser's local storage. No accounts, no servers, no tracking.

Installation

From Source (Developer Mode)

1. Clone or download this repository

   git clone https://github.com/yourname/quick-notes-extension.git

2. Open Chrome and navigate to chrome://extensions/

3. Enable Developer mode (toggle in top-right corner)

4. Click Load unpacked and select the quick-notes-extension folder

5. The Quick Notes icon appears in your toolbar — you're done!

Usage

1. Navigate to any website (e.g., github.com)

2. Click the Quick Notes icon in the toolbar to open the popup, or use the floating notepad directly

3. Type your note — it saves automatically

4. Drag the notepad by its header to reposition it

5. Minimize or hide the notepad with the header buttons

6. Your note will be waiting for you next time you visit that domain

How It Works

• Notes are stored in chrome.storage.local — per-domain keys
• The floating notepad is injected via a content script on every page
• Communication between popup and content script uses Chrome messaging API
• No network requests are made — everything runs locally

Storage

Notes are stored in Chrome's local extension storage:

{
  "qn_notes": {
    "github.com": "TODO: Review PR #42",
    "stackoverflow.com": "CSS grid centering trick...",
    "docs.google.com": "Meeting notes from standup"
  }
}

Permissions

Permission	Reason
storage	Save notes locally in the browser
scripting	Inject notepad on-demand from popup
<all_urls>	Inject the notepad on any website

No data leaves your browser. No analytics, no servers, no tracking.

Development

This extension uses no build tools. Edit files directly and reload the extension:

1. Make changes to any .js, .css, or .html file
2. Go to chrome://extensions/
3. Click the refresh icon on the Quick Notes card
4. Reload any open tabs

Project Structure

quick-notes-extension/
├── manifest.json      # Extension manifest (V3)
├── background.js      # Service worker
├── content.js         # Content script (floating notepad)
├── content.css        # Notepad styles
├── popup.html         # Popup UI
├── popup.js           # Popup logic
├── popup.css          # Popup styles
├── icons/             # Extension icons
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── LICENSE
└── README.md

License

MIT License — see LICENSE for details.

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request