DivShot

Capture any element on any webpage as a pixel-perfect screenshot.

A Chrome extension for designers, developers, and content creators who need precise element screenshots without the hassle of cropping. Multi-select elements, apply isometric 3D effects, and copy straight to clipboard.

demo.mp4

---

✨ Features

• 🎯 Point & Capture — Hover over any HTML element and click to capture it instantly
• ✨ Multi-Select — Hold Shift and click to select multiple elements, automatically composed together
• 💎 Pixel-Perfect — Retina-ready, high-resolution screenshots that respect border-radius and styling
• 📐 Isometric 3D View — Transform captures into beautiful isometric mockups with configurable direction and drop shadows
• 📋 Clipboard Ready — Copy directly to clipboard for pasting into Figma, Sketch, Keynote, or any design tool
• ⚙️ Customizable — Choose PNG or JPEG, add padding, customize filenames, set default save locations

---

🚀 Installation

From Source (Developer Mode)

1. Clone this repository:

   git clone https://github.com/mskayyali/DivShot.git

2. Open Chrome and navigate to chrome://extensions/

3. Enable Developer mode (toggle in top-right corner)

4. Click Load unpacked and select the DivShot folder

5. Pin the extension to your toolbar for quick access

---

🎮 Usage

Keyboard Shortcuts

Action	Shortcut
Activate DivShot	Alt + D
Capture element	Click
Multi-select	Shift + Click
Confirm multi-selection	Enter
Cancel	Esc

Quick Start

1. Press Alt + D or click the DivShot icon to activate
2. Hover over any element — you'll see a green outline
3. Click to capture, or Shift + Click to select multiple elements
4. Your screenshot is saved or copied based on your settings

Multi-Select Modes

DivShot automatically detects how to compose multiple elements:

• Stacked — Elements with similar horizontal alignment are stacked vertically
• Masked — Elements at various positions are composed with their relative positions preserved

---

⚙️ Settings

Access settings by right-clicking the extension icon → Options, or through the onboarding flow.

Setting	Options
Save Mode	Ask every time, Default folder, Copy to clipboard
Format	PNG (lossless), JPEG (smaller size)
Style	Standard (flat), Isometric (3D view)
Isometric Direction	Top-left, Top-right
Drop Shadow	Enable/disable shadow on isometric captures
Padding	Add 20px breathing room around captures
Filename Pattern	Customizable with {timestamp}, {date}, {time}, {element}

---

🛠️ Code

This is a vanilla JavaScript Chrome extension using Manifest V3. No build step required.

Project Structure

DivShot/
├── manifest.json      # Extension manifest
├── background.js      # Service worker
├── content.js         # Element inspection & capture logic
├── content.css        # Overlay styling
├── settings.*         # Settings page
├── onboarding.*       # First-run experience
├── offscreen.*        # Clipboard operations
└── icon*.png          # Extension icons

Permissions Used

Permission	Purpose
activeTab	Access current tab for element inspection
scripting	Inject content scripts
downloads	Save screenshots to disk
storage	Persist user settings
notifications	Show save confirmations
offscreen	Clipboard operations in background
clipboardWrite	Copy images to clipboard

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

👤 Author

Saleh Kayyali

• Website: mskayyali.com
• GitHub: @mskayyali

---

🔑 Keywords

Chrome extension, screenshot, element capture, web design, developer tools, Figma, design workflow, isometric mockup, multi-select capture, clipboard copy, retina screenshots, HTML element, webpage capture, UI screenshot, web development tools, presentation assets, Keynote slides, portfolio screenshots, Remotion video assets, programmatic video, documentation screenshots, tutorial images, Dribbble, Behance, social media graphics