Minimal, fast, layout-only minimap in a Shadow DOM that follows hovered scrollable areas. M toggles map. 1 jumps to top (0%), 0 jumps to end (100%). Click/drag to scroll. Hydration-safe for React/Next sites.
# VSCode Like Browser Minimap UserScript
A minimal, fast minimap overlay for any website - similar to VSCode's code minimap. Works with Tampermonkey/Greasemonkey.
## Features
- 🎯 **Smart Scroll Tracking** - Automatically follows the currently hovered scrollable area
- 🎨 **Visual Layout Map** - Color-coded elements (headers, links, code blocks, etc.)
- 🖱️ **Interactive Navigation** - Click/drag on minimap to scroll
- ⚡ **Performance Optimized** - Shadow DOM isolated, throttled rendering
- 🔧 **Hydration-Safe** - Works on React/Next.js sites
## Usage
### Keyboard Shortcuts
- **`M`** - Toggle minimap on/off
- **`1`** - Jump to top (0%)
- **`2-9`** - Jump to 20%, 30%... 90%
- **`0`** - Jump to bottom (100%)
### Mouse Controls
- **Hover** over any scrollable area to switch context
- **Click** on minimap to jump to position
- **Drag** on minimap to scroll continuously
- **Scroll wheel** on minimap for fine control
## Configuration
Edit these variables at the top of the script:
```javascript
const START_HIDDEN = true; // Start with minimap hidden
const TOGGLE_KEY = 'm'; // Change toggle key
const TOGGLE_MOD = { // Add modifier keys
ctrl: false, alt: false, shift: false, meta: false
};
// Exclude specific sites
const EXCLUDE_HOSTS = ['youtube.com', 'twitter.com'];
const EXCLUDE_PATTERNS = [/localhost:\d+/];
```
## Installation
1. Install [Tampermonkey](https://www.tampermonkey.net/) browser extension
2. Create new script and paste the code
3. Save and reload any webpage
4. Press `M` to show minimap
## Color Legend
- 🔵 Blue shades - Headers (H1-H6)
- 🟢 Green - Links, blockquotes
- 🟠 Orange - Code blocks
- 🟣 Purple - Images
- ⬜ Gray - Divs, spans, general content
