# 📸 Full Screenshot Selector - Chrome Extension

A powerful Chrome extension that allows you to visually select and capture full screenshots of any element on a webpage, including hidden scrollable content.

## ✨ Features

- **Visual Element Selection**: Hover over any element and see it highlighted
- **Full Content Capture**: Captures complete scrollable content, not just visible area
- **Background Options**: Choose between black, transparent, or white backgrounds
- **Keyboard Shortcut**: Quick access with `Alt+Shift+S` (or `Option+Shift+S` on Mac)
- **Clean UI**: Non-intrusive interface with modern design
- **Auto-Download**: Screenshots save automatically with timestamps

## 🚀 Installation

### Option 1: Developer Mode (Recommended for now)

1. **Download/Clone** this extension folder to your computer
2. **Open Chrome** and go to `chrome://extensions/`
3. **Enable Developer Mode** (toggle in top-right corner)
4. **Click "Load unpacked"** and select the extension folder
5. **Pin the extension** to your toolbar for easy access

### Option 2: From Chrome Web Store
*Coming soon - will be published to Chrome Web Store*

## 🎯 How to Use

### Method 1: Extension Popup
1. **Click the extension icon** in your toolbar
2. **Choose background color** (Black/Transparent/White)
3. **Click "Start Element Selector"**
4. **Hover over elements** to see them highlighted
5. **Click any element** to capture a full screenshot
6. **Press ESC** or click the cancel button to exit

### Method 2: Keyboard Shortcut
1. **Press `Alt+Shift+S`** (or `Option+Shift+S` on Mac)
2. **Hover and click** elements to capture
3. **Press ESC** to exit

## 🔧 Background Options

- **Black**: Solid black background (great for light content)
- **Transparent**: No background (perfect for overlays)
- **White**: Solid white background (ideal for dark content)

## 📱 Compatibility

- ✅ **Chrome 88+** (Manifest V3 support)
- ✅ **All websites** (except Chrome internal pages)
- ✅ **Cross-platform** (Windows, Mac, Linux)

## 🛠️ Technical Details

The extension uses several advanced techniques to ensure complete content capture:

- **Style Modification**: Temporarily expands elements to their full content height
- **html2canvas-pro**: Uses the latest html2canvas library (included locally for CSP compliance)
- **CSS Override**: Handles various overflow and height constraints
- **Non-destructive**: Always restores original element styles

## 🔒 Privacy

- **No data collection**: Extension doesn't send any data to external servers
- **Local processing**: All screenshot processing happens on your device
- **No permissions abuse**: Only requests necessary permissions for functionality

## 🐛 Troubleshooting

**Screenshots not working on some sites?**
- Some sites with strict Content Security Policy may block html2canvas
- Try refreshing the page and trying again

**Element not highlighting properly?**
- Some complex layouts may interfere with highlighting
- The screenshot will still capture correctly

**Keyboard shortcut not working?**
- Check Chrome's extension shortcuts: `chrome://extensions/shortcuts`
- Make sure the shortcut isn't conflicting with other extensions

## 📄 File Structure

```
chrome-extension/
├── manifest.json       # Extension configuration
├── popup.html          # Extension popup interface
├── popup.js           # Popup logic and communication
├── content.js         # Main screenshot functionality
├── background.js      # Service worker for shortcuts
├── html2canvas.min.js # Screenshot library (local copy)
├── icons/            # Extension icons (16, 32, 48, 128px)
└── README.md         # This file
```

## 🤝 Contributing

Feel free to submit issues and enhancement requests!

## 📜 License

This project is open source and available under the MIT License.