ViserSnap 📸 - Professional Screenshot & Annotation Tool

ViserSnap is a powerful Chrome Extension designed for high-quality screen capture and advanced image editing. Built with Manifest V3, it offers a seamless experience with a floating draggable widget, 4K quality support, and a professional-grade editor powered by Fabric.js.

✨ Features

• 📸 1-Click Capture: Instantly snap the visible area or simulate full-page capture.
• 🖱️ Floating Widget: A draggable UI injected into webpages for quick access.
• 🎨 Professional Editor:
  • Tools: Pen, Highlighter, Rectangle, Circle, Arrow, Text.
  • Manipulation: Select, Drag, Drop, Resize, and Rotate any object after drawing.
  • Redact: Blur sensitive information.
  • Style: Custom colors and line thickness.
• 🖼️ 4K Support: High-resolution rendering for crisp text and images.
• ⚡ Fast & Lightweight: Minimal impact on browser performance.

---

📂 Project Structure

Ensure your project folder looks exactly like this:

ViserSnap/
├── manifest.json            # Extension Configuration
├── README.md                # Documentation
├── icons/                   # App Icons
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── src/
    ├── background/
    │   └── service-worker.js  # Background Logic (Capture)
    ├── content/
    │   ├── content.js         # Floating Widget Logic
    │   └── content.css        # Widget Styles
    ├── popup/
    │   ├── popup.html         # Main Extension Menu
    │   ├── popup.css          # Modern Card Design
    │   └── popup.js           # Menu Logic
    └── editor/
        ├── editor.html        # Editor Interface
        ├── editor.css         # Editor Dark Mode Styles
        ├── editor.js          # Drawing & Object Logic
        └── fabric.min.js      # Required Library (Fabric.js v5.3.0)

---

🚀 Installation Guide

Step 1: Download Dependencies

You must manually download the Fabric.js library for the editor to work.

1. Download fabric.min.js from: https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js
2. Save the file inside: src/editor/fabric.min.js.

Step 2: Load into Chrome

1. Open Google Chrome and go to chrome://extensions.
2. Enable Developer Mode (Toggle switch at the top right).
3. Click on Load Unpacked.
4. Select the main ViserSnap folder.
5. The extension is now installed! Pin it to your toolbar.

---

📖 Usage

1. Taking a Screenshot

• Option A: Click the ViserSnap icon in the browser toolbar and select "Visible Area".
• Option B: Right-click anywhere on a page and select "📸 Snap Visible Area".
• Option C: Use the Floating Widget (Open it from the popup menu).

2. Using the Floating Widget

• Open the extension popup.
• Click "Open Floating Widget".
• A small toolbar will appear on the page. You can drag it anywhere.

3. Editing

Once a screenshot is taken, the Editor will open in a new tab automatically.

• Draw: Use Pen or Shapes.
• Edit: Click the "Select" tool (Cursor icon) to move or resize any shape/text.
• Save: Click "Download" to save as PNG.

---

🛠️ Technologies Used

• HTML5 & CSS3 (Modern Flexbox/Grid Layouts)
• JavaScript (ES6+)
• Chrome Extension API (Manifest V3)
• Fabric.js (Object-oriented Canvas Library)

---

👨‍💻 Developer & Support

Developed by Visernic Limited.

• Website: visernic.com
• Support: support@visernic.com
• Headquarters: Nazipur, Patnitala, Naogaon – 6540, Bangladesh
• UK Office: Southampton, United Kingdom

---

© 2025 Visernic Limited. All rights reserved.