A Chrome extension that allows you to select and capture specific HTML elements as images with a simple point-and-click interface.
- 🎯 Interactive Element Selection - Hover over any element on a webpage to highlight it
- 📸 High-Quality Capture - Captures elements with proper resolution and pixel-perfect accuracy
- 💾 Automatic Download - Captured images are automatically saved to your downloads folder
- ⌨️ Easy Cancellation - Press ESC to exit selection mode anytime
- 🎨 Visual Feedback - Clear overlay and instructions guide you through the capture process
-
Clone or download this repository:
git clone https://github.com/nedsion/element2img.git
-
Open Chrome and navigate to
chrome://extensions/ -
Enable Developer mode by toggling the switch in the top right corner
-
Click Load unpacked and select the extension directory
-
The Element Capture icon should now appear in your Chrome toolbar
-
Navigate to any webpage you want to capture elements from
-
Click the Element Capture extension icon in your toolbar
-
Click the Start Element Selection button in the popup
-
Hover over the element you want to capture:
- A blue overlay will highlight the element under your cursor
- An instruction banner will appear at the top of the page
-
Click on the highlighted element to capture it
-
The captured image will automatically download to your downloads folder
-
Press ESC at any time to cancel the selection mode
The extension uses the following technologies:
- Chrome Extension Manifest V3 - Modern extension architecture
- Chrome Tabs API - Captures visible tab screenshots
- Content Scripts - Provides interactive element selection
- Canvas API - Crops and processes the captured element
The capture process:
- Content script highlights elements as you hover
- When you click, the element is scrolled into view
- A screenshot of the visible tab is captured
- The screenshot is cropped to the exact element boundaries
- The cropped image is downloaded automatically
.
├── manifest.json # Extension configuration
├── popup.html # Extension popup UI
├── popup.js # Popup logic
├── content.js # Element selection and highlighting
├── background.js # Screenshot capture and processing
├── html2canvas.min.js # Canvas library (reference)
└── icons/
├── icon16.png # 16x16 icon
├── icon48.png # 48x48 icon
└── icon128.png # 128x128 icon
This extension requires the following permissions:
- activeTab - Access to the currently active tab for capturing
- scripting - Inject content scripts for element selection
- downloads - Save captured images to your downloads folder
- Chrome 88+ (Manifest V3 support required)
- Edge 88+ (Chromium-based)
- Google Chrome or Chromium-based browser
- Basic knowledge of Chrome Extension development
- Edit the source files as needed
- Go to
chrome://extensions/ - Click the refresh icon on the Element Capture extension card
- Test your changes
- Popup: Right-click the extension icon → Inspect popup
- Content Script: Open DevTools on the webpage (F12)
- Background Script: Go to
chrome://extensions/→ Click "service worker" link
- Cannot capture elements from Chrome internal pages (chrome://, chrome-extension://)
- Cannot capture across different origins without proper permissions
- Screenshot quality depends on the device's pixel ratio
- Very large elements may take slightly longer to process
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
nedsion
If you encounter any issues or have questions:
- Open an issue on GitHub
- Check existing issues for solutions
- Initial release
- Interactive element selection with hover highlighting
- High-quality element capture
- Automatic image download
- ESC key cancellation
- Visual feedback with overlay and banner
Made with ❤️ by nedsion