103 lines
No EOL
3.8 KiB
Markdown
103 lines
No EOL
3.8 KiB
Markdown
# 📸 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. |