A zero-dependency Chrome extension that captures visible area, full page, or custom selected regions — then lets you annotate, draw, and export in seconds. No server. No data collection. Just fast, local screenshots.

---

⚡ What Makes It Different

🖼️ Three Capture Modes Visible Area — one-click viewport snapshot Full Page — auto-scrolls, slices, and pixel-perfectly stitches the entire page Selected Region — drag a custom bounding box over any part of the page	🎨 Built-in Annotation Engine Rectangles, arrows, text labels, and highlights Freehand pen / pencil drawing Adjustable color and stroke width per tool Per-step Undo (Ctrl+Z)
💾 Flexible Export Download as PNG or JPEG Copy to clipboard — paste anywhere instantly Smart auto-filename: screenshot_domain_YYYY-MM-DD_HH-MM-SS.ext	⌨️ Keyboard-First Workflow Trigger any capture mode without opening the popup All shortcuts fully customisable via chrome://extensions/shortcuts Dark / Light theme that persists across sessions

---

🚀 Installation

No Chrome Web Store needed — load it directly from source in under a minute.

# 1. Clone or download the repository
git clone https://github.com/your-username/screenshot-master.git

Step	Action
1	Open Chrome and navigate to chrome://extensions
2	Enable Developer mode using the toggle in the top-right
3	Click Load unpacked and select the Screenshot Master folder
4	Pin the extension icon to your toolbar for quick access

---

🎯 Usage

One-Click Captures via Popup

Click the extension icon — three capture buttons are immediately available:

Button	Shortcut	What It Does
Visible Area	Alt+Shift+V	Captures exactly what's visible in the viewport
Full Page	Alt+Shift+F	Scrolls the page, takes sliced screenshots, and stitches them into a single full-height image
Selected Area	Alt+Shift+S	Overlays a drag-to-select box — release to capture the chosen region

Shortcuts can be reassigned at chrome://extensions/shortcuts

---

Preview & Annotation Workspace

After every capture, a full-screen preview tab opens automatically.

┌─────────────────────────────────────────────────────┐
│  [ Visible / Full Page / Selected ]  · dark ☾       │
├─────────────────────────────────────────────────────┤
│                                                     │
│           screenshot canvas (zoomable)              │
│         + annotation canvas (overlay)               │
│                                                     │
├─────────────────────────────────────────────────────┤
│  🟥 Rect  ➡ Arrow  T Text  🖊 Pen  🔦 Highlight  ↩ Undo │
│  Color ●  Stroke ━━━  │  PNG ▾  Download  Copy     │
└─────────────────────────────────────────────────────┘

Tools available:

Tool	Behaviour
Rectangle	Draw filled or outlined rectangles to highlight regions
Arrow	Click and drag to place directional arrows
Text	Click anywhere to insert a custom text label
Pen	Freehand drawing — like a marker on the screen
Highlight	Semi-transparent overlay to draw attention to areas
Undo	Remove the last annotation step-by-step

---

🏗️ Architecture

Screenshot Master/
│
├── manifest.json            ← Manifest V3 — permissions, shortcuts, icons
│
├── popup/                   ← Extension popup UI
│   ├── popup.html           ← Markup (Inter font, SVG icons)
│   ├── popup.css            ← Dark/light theme, capture buttons
│   └── popup.js             ← Sends capture mode to background worker
│
├── background/
│   └── background.js        ← Service worker: routes captures, slicing loop,
│                               scroll orchestration, selection listener
│
├── content/
│   └── content.js           ← Injected into pages: page dimensions, scroll,
│                               selection overlay (drag UI), capture overlay
│
├── preview/
│   ├── preview.html         ← Full-screen annotation workspace
│   ├── preview.css          ← Canvas layout, toolbar, dark/light theme
│   └── preview.js           ← Image assembly (stitch), annotation engine,
│                               tool handling, undo stack, export (PNG/JPEG)
│
└── utils/
    └── filename.js          ← Auto-generates domain + timestamp filename

How Full-Page Capture Works

Popup ──► background.js ──► inject content.js
                │
                ├── getPageDimensions (scrollHeight, clientHeight)
                ├── hideScrollbars
                ├── showCaptureOverlay (progress: N/total)
                │
                └── for each slice:
                      scrollTo(i × clientHeight)
                      pauseOverlay → captureTab() → resumeOverlay
                │
                ├── hideCaptureOverlay + restoreScrollbars
                └── openPreview(slices[]) ──► preview.js stitches on canvas

---

🔒 Permissions

Permission	Reason
activeTab	Capture the screenshot of the currently active tab
scripting	Inject content script for scroll control and selection overlay
storage	Persist theme setting and temporarily hold screenshot data between pages

Privacy: No data is sent to any external server. All processing is local, in-browser. Storage is cleared immediately after the preview tab loads.

---

👥 Who Is This For?

Role	Use Case
Developers	Capture UI states, debug layout issues, document responsive breakpoints
Designers	Archive website designs, create reference screenshots
QA / Testers	Annotate and share bug reports with highlighted problem areas
Students	Save full-page articles and annotate for study notes
Content Creators	Produce clean, annotated screenshots for tutorials and posts

---

📄 License

Released under the MIT License — free to use, modify, and distribute.

---

_{Made with ♥ for developers who live in the browser}