Advanced Screenshot Tool - Capture any element, selection, or full page with precision and style.
- Visible Area - Capture the current viewport
- Full Page - Capture entire scrollable page with high quality
- Select Element - Interactive element picker with hover highlighting
- Draw Selection - Click and drag to capture any rectangular area
- CSS Selector - Target elements using CSS selectors
- Lightning-fast access with Ctrl+Shift+S (or Cmd+Shift+S on Mac)
- Searchable commands with fuzzy matching
- Customizable keyboard shortcuts for all actions
- Real-time settings toggles and format switching
- Multiple formats: PNG, JPG, WebP with quality controls
- Smart actions: Copy to clipboard, auto-download, or preview
- Capture history with search and management
- Customizable preferences for workflow optimization
- Scale options from 0.5x to 3x for different quality needs
The main command interface with search and quick actions
Interactive element selection with visual highlighting
Screenshot preview with copy, download, and zoom controls
Manage and search through your screenshot history
Comprehensive settings for customizing your workflow
Capturing a screenshot in under 3 seconds
Selecting and capturing specific page elements
- Visit the Chrome Web Store page
- Click "Add to Chrome"
- Start capturing with Ctrl+Shift+S!
- Clone the repository:
git clone https://github.com/yourusername/snapcommand.git
cd snapcommand- Install dependencies:
npm install- Start development:
npm run dev- Load the extension in Chrome:
- Open Chrome and navigate to
chrome://extensions - Enable "Developer mode" (top right toggle)
- Click "Load unpacked"
- Select the
.output/chrome-mv3directory
- Open Chrome and navigate to
All shortcuts are customizable in the preferences!
- Ctrl+Shift+S - Open command menu
- Ctrl+Shift+V - Capture visible area
- Ctrl+Shift+F - Capture full page
- Ctrl+Shift+E - Select element to capture
- Ctrl+Shift+D - Draw selection area
- Ctrl+Shift+C - CSS selector mode
- Ctrl+1/2/3 - Switch format (PNG/JPG/WebP)
The heart of SnapCommand - access everything from one interface:
- Type to search commands
- Use arrow keys to navigate
- Press Enter to execute
- Toggle settings instantly
- See your current format and preferences at a glance
Perfect for capturing specific UI components:
- Hover to highlight elements
- Click to select and capture
- Use arrow keys for precise navigation
- Confirmation dialog with parent/child navigation
- Press Escape to cancel
Draw custom capture areas:
- Click and drag to define the area
- Visual feedback with measurement overlay
- Press Escape to cancel selection
- WXT - Next-generation web extension framework
- React 18 - Modern UI components
- TypeScript - Type safety and better DX
- Tailwind CSS - Utility-first styling
- shadcn/ui - Beautiful, accessible components
- CMDK - Command menu interface
- SnapDOM - High-quality DOM capture
- Hotkeys.js - Keyboard shortcut management
snapcommand/
├── entrypoints/ # Extension entry points
│ ├── background.ts # Service worker (handles captures)
│ └── content.tsx # Main UI injected into pages
├── components/ # React components
│ ├── command-menu/ # Command palette
│ ├── capture/ # Capture modes and preview
│ ├── preferences/ # Settings management
│ ├── history/ # Capture history
│ └── ui/ # Reusable UI components
├── lib/ # Core functionality
│ ├── capture/ # Capture logic and utilities
│ ├── storage/ # Preferences and history storage
│ └── utils/ # Shared utilities
└── styles/ # Global styles and themes
# Development build with hot reload
npm run dev
# Production build
npm run build
# Build for different browsers
npm run build:chrome
npm run build:firefox
# Create distributable zip
npm run zip# Type checking
npm run type-check
# Build verification
npm run buildWe welcome contributions! Please see our Contributing Guidelines for details.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes and test thoroughly
- Commit with a clear message:
git commit -m 'Add amazing feature' - Push to your branch:
git push origin feature/amazing-feature - Open a Pull Request with a detailed description
- Follow the existing code style and patterns
- Add TypeScript types for new functionality
- Test your changes across different websites
- Update documentation for new features
- Ensure accessibility compliance
- Firefox support
- Safari support (when WebExtensions API is available)
- Two-pass CORS recovery system (automatically fix cross-origin images)
- Enhanced annotation tools
- Custom capture presets
- Cloud storage integration
- Team collaboration features
- API for third-party integrations
- Advanced editing capabilities
SnapCommand uses SnapDOM for high-quality DOM capture. Due to browser security restrictions, some cross-origin images (like external favicons and CDN images) may not appear in screenshots. This is a known limitation of SnapDOM.
Workarounds:
- Draw Selection mode works well as a fallback for capturing specific areas
- Configure a CORS proxy in Advanced Settings (for power users)
- Most page content captures perfectly - only external images are affected
Check our Issues page for current known issues and their status.
This project is licensed under the MIT License - see the LICENSE file for details.
- WXT for the excellent extension development framework
- SnapDOM for reliable DOM capture technology
- CMDK for the beautiful command palette
- shadcn/ui for the gorgeous UI component library
- Radix UI for accessible primitives
If SnapCommand helps improve your workflow, consider:
- ⭐ Starring this repository
- 🐛 Reporting bugs or requesting features
- 💖 Supporting development
Made with ❤️ for productivity enthusiasts