Skip to content

README.md

Latest commit

 

History

History
260 lines (203 loc) · 8.44 KB

README.md

File metadata and controls

260 lines (203 loc) · 8.44 KB

SnapCommand

SnapCommand Hero

Advanced Screenshot Tool - Capture any element, selection, or full page with precision and style.

Demo

SnapCommand Demo

🚀 Features

📸 Multiple Capture Modes

  • 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

⌨️ Command Menu Interface

  • 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

🎨 Professional Features

  • 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

📷 Screenshots

Command Menu

Command Menu The main command interface with search and quick actions

Element Selection

Element Selection Interactive element selection with visual highlighting

Preview Modal

Preview Modal Screenshot preview with copy, download, and zoom controls

Capture History

Capture History Manage and search through your screenshot history

Settings & Preferences

Preferences Comprehensive settings for customizing your workflow

🎬 Demo Videos

Quick Capture Workflow

Quick Capture Capturing a screenshot in under 3 seconds

Element Selection in Action

Element Selection Demo Selecting and capturing specific page elements

📦 Installation

From Chrome Web Store

  1. Visit the Chrome Web Store page
  2. Click "Add to Chrome"
  3. Start capturing with Ctrl+Shift+S!

For Development

  1. Clone the repository:
git clone https://github.com/yourusername/snapcommand.git
cd snapcommand
  1. Install dependencies:
npm install
  1. Start development:
npm run dev
  1. 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-mv3 directory

🎮 Usage

Default Keyboard Shortcuts

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)

Command Menu

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

Element Selection

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

Area Selection

Draw custom capture areas:

  • Click and drag to define the area
  • Visual feedback with measurement overlay
  • Press Escape to cancel selection

🛠️ Development

Tech Stack

  • 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

Project Structure

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

Building for Production

# 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

Testing

# Type checking
npm run type-check

# Build verification
npm run build

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Quick Start for Contributors

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Make your changes and test thoroughly
  4. Commit with a clear message: git commit -m 'Add amazing feature'
  5. Push to your branch: git push origin feature/amazing-feature
  6. Open a Pull Request with a detailed description

Development Guidelines

  • 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

📋 Roadmap

Near Term

  • 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

Future Considerations

  • Cloud storage integration
  • Team collaboration features
  • API for third-party integrations
  • Advanced editing capabilities

🐛 Known Issues

Cross-Origin Images

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.

📄 License

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

🙏 Acknowledgments

  • 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

💝 Support

If SnapCommand helps improve your workflow, consider:

Made with ❤️ for productivity enthusiasts