Universal Scratchpad Browser Extension

A simple, elegant browser extension for Chromium-based browsers (Chrome, Edge, Brave, Opera, etc.) that allows you to write and store notes with automatic debounced saving.

Features

• ✨ Auto-save: Automatically saves your content after you stop typing (500ms debounce)
• 💾 Persistent Storage: Content is saved locally using Chrome Storage API
• 🎨 Modern UI: Clean, minimal interface with status indicators
• ⚡ Fast & Lightweight: Minimal resource usage
• 🔒 Privacy: All data stored locally, never sent to external servers
• 📑 Tab Support: Open scratchpad in a full browser tab for extended writing sessions
• 📝 Multiple Scratchpads: Create, switch between, rename, and delete multiple scratchpads

Installation

1. Download or clone this repository
2. Open your browser and navigate to chrome://extensions/ (or edge://extensions/ for Edge)
3. Enable "Developer mode" (toggle in top-right corner)
4. Click "Load unpacked"
5. Select the folder containing this extension

For Development:

1. Make changes to the files
2. Go to chrome://extensions/
3. Click the refresh icon on the extension card to reload changes

Usage

1. Click the extension icon in your browser toolbar
2. Start typing in the textarea
3. Content automatically saves after you stop typing for 500ms
4. Status indicator shows current state:
   • 🟢 Green: Ready/Saved
   • 🟡 Yellow: Saving...
   • 🔴 Red: Error
5. Click "Open in Tab" to open a full-page version in a new browser tab

Multiple Scratchpads

• Create New: Click the "+" button in the header to create a new scratchpad
• Switch: Use the dropdown selector to switch between scratchpads
• Rename: Click the "✎" button to rename the current scratchpad
• Delete: Click the "×" button to delete the current scratchpad (at least one scratchpad must remain)
• All scratchpads are automatically saved and synced between popup and tab views

File Structure

browser-extension-scratchpad/
├── manifest.json         # Extension configuration
├── popup.html            # Extension popup UI
├── popup.css             # Styles for the popup
├── popup.js              # Main logic with debounced save
├── tab.html              # Full-page tab version
├── tab.css               # Styles for tab version
├── tab.js                # Logic for tab version
├── icons/                # Extension icons
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── README.md             # This file

Technical Details

• Manifest Version: 3 (latest Chrome extension standard)
• Storage: Uses chrome.storage.local API
• Debounce Delay: 500ms (configurable in popup.js)
• Browser Support: All Chromium-based browsers (Chrome, Edge, Brave, Opera, Vivaldi, etc.)

Customization

Change Debounce Delay

Edit popup.js and modify the DEBOUNCE_DELAY constant:

const DEBOUNCE_DELAY = 1000; // Change to 1000ms (1 second)

Change Storage Key

Edit popup.js and modify the STORAGE_KEY constant:

const STORAGE_KEY = "my_custom_key";

License

MIT License - Feel free to use and modify as needed!