Skip to content

nsebastian-web/screenshot-annotation

Repository files navigation

Screenshot & Annotation Tool

Professional Chrome extension for capturing, annotating, and sharing screenshots with Google Drive integration

Version License Chrome Web Store

A powerful screenshot tool that replaces traditional design software for quick annotations. Perfect for bug reports, design feedback, documentation, and team collaboration.

✨ Features

📸 Capture Modes

  • Visible Area - Capture what you see with crop selection
  • Full Page - Capture entire scrolling pages
  • Selection Mode - Precise area selection like macOS screenshots

✏️ Professional Annotations

  • Hand-Drawn Arrows - 4 customizable arrow styles with color options
  • Pen Tool - Freehand drawing with adjustable stroke width
  • Highlight Tool - Semi-transparent marker for emphasis
  • Text Annotations - Add text with customizable fonts and colors
  • Shape Tools - Rectangles and circles with color customization
  • Blur Tool - Hide sensitive information (blur/pixelate modes)
  • Emoji Support - Quick visual markers

🎯 Advanced Features

  • Google Drive Integration - Auto-upload with folder organization
  • QR Code Generation - Create shareable QR codes for screenshots
  • Batch Operations - Process multiple screenshots efficiently
  • Upload History - Track and manage all uploaded screenshots
  • Multi-Format Export - PNG, JPG, and PDF support
  • Keyboard Shortcuts - Fully customizable hotkeys for all tools
  • Arrow Key Navigation - Precise positioning (1px/10px modes)
  • Undo/Redo - Complete history support
  • Copy to Clipboard - Quick sharing without saving

⌨️ Keyboard Shortcuts

Shortcut Action Description
⌘⇧S / Ctrl⇧S Capture Screenshot Capture visible area
⌘⇧F / Ctrl⇧F Full Page Capture entire page
⌘⇧X / Ctrl⇧X Selection Capture selected area
V Select Tool Move, resize, rotate annotations
P Pen Tool Freehand drawing
H Highlight Tool Highlight text/areas
T Text Tool Add text annotations
B Blur Tool Blur sensitive info
R Rectangle Draw rectangles
C Circle Draw circles
⌘Z / Ctrl+Z Undo Undo last action
⌘Y / Ctrl+Y Redo Redo last action
⌘C / Ctrl+C Copy Copy to clipboard
Delete Delete Remove selected annotation
Arrow Keys Move Move selected (1px)
Shift+Arrows Move Fast Move selected (10px)

💡 Tip: Customize all shortcuts via the Settings panel (⚙️ icon in toolbar) 📚 Full Guide: See Keyboard Shortcuts Documentation for detailed customization options

🚀 Installation

From Chrome Web Store (Recommended)

Coming soon

Manual Installation

  1. Download the latest release
  2. Extract the ZIP file
  3. Open Chrome and navigate to chrome://extensions/
  4. Enable Developer mode (toggle in top right)
  5. Click Load unpacked
  6. Select the extracted folder
  7. The extension icon will appear in your toolbar

📖 Usage

Quick Start

  1. Click the extension icon in your toolbar
  2. Choose a capture mode (Screenshot / Full Page / Selection)
  3. Select the area you want to capture
  4. Use the annotation toolbar to add arrows, text, highlights, etc.
  5. Click Save to download or Copy to clipboard
  6. (Optional) Upload to Google Drive with one click

Google Drive Integration

  1. Click the Settings icon (⚙️) in the toolbar
  2. Navigate to Google Drive settings
  3. Click Connect to Google Drive
  4. Authorize the extension
  5. Your screenshots will auto-upload and organize in folders

Pro Tips

  • Right-click on any page for quick capture menu
  • Use V to quickly switch to Select tool for editing
  • Hold Shift while moving annotations for precise 10px jumps
  • Double-click text annotations to edit them
  • Use the highlight tool (H) for emphasizing important UI elements

🛠️ Browser Compatibility

  • Chrome (Recommended)
  • Edge (Chromium-based)
  • Brave
  • Opera
  • ⚠️ Firefox (Not supported - different extension API)

📝 Changelog

See CHANGELOG.md for detailed version history.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

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

🙏 Credits

💬 Support


Made with ❤️ for better screenshot workflows

About

A Chrome extension to take screenshots and add annotations on the go!

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors