The Ultimate Chrome Extension for Professionals Who Think Visually
|
Switch seamlessly between Sidebar Workspace for dedicated drawing and Webpage Annotation for direct website markup. Ultra-smooth drawing engine with advanced selection, infinite canvas, and 60 FPS performance. Your drawings auto-save and persist per website. Return anytime to continue where you left off. |
Infinite canvas with pan & zoom, professional color palettes, and shape tools that rival desktop apps. Complete keyboard shortcuts, multi-select, undo/redo history, and export capabilities. Works on any website, with floating toolbars that never interfere with your browsing. |
Your dedicated creative environment
Draw directly on any website
 |
 |
🎨 Advanced Drawing Engine
- Ultra-smooth curves with professional interpolation
- Individual tool memory - each tool remembers its size
- High-DPI rendering for crisp lines on any display
- Pressure simulation with variable line thickness
- Anti-aliasing for professional-quality output
🖱️ Intelligent Object System
- Smart selection - click objects or drag selection box
- Live editing - modify color/size after drawing
- Multi-object operations - select, move, delete multiple items
- Undo/Redo system with 100-step history
- Object persistence across browser sessions
🌐 Infinite Canvas
- Unlimited drawing space - never run out of room
- Smooth pan & zoom (10% - 500% range)
- Smart zoom-to-cursor positioning
- Fit-to-content auto-framing
- View state persistence across sessions
🛠️ Professional Toolset
- Pen Tool - Natural drawing with smooth curves
- Eraser Tool - Clean object-based erasing
- Select Tool - Move and edit existing objects
- Shape Tools - Rectangle, Circle, Line with preview
- Text Tool - Custom sizing with click-to-place
- Color System - 8 quick colors + custom picker
# Method 1: Clone Repository
git clone https://github.com/Ratna-Babu/WebWhiteboardPlus.git
cd WebWhiteboardPlus
# Method 2: Download ZIP
# Download from GitHub → Extract → Follow steps below- Open Chrome → Navigate to
chrome://extensions/ - Enable Developer Mode (toggle top-right)
- Click "Load unpacked" → Select the project folder
- Done! 🎉 The extension icon appears in your toolbar
|
For Sidebar Drawing:
|
For Webpage Annotation:
|
| Category | Shortcut | Action |
|---|---|---|
| 🎨 Tools | P / E / V |
Pen / Eraser / Select |
| 📐 Shapes | R / C / L / T |
Rectangle / Circle / Line / Text |
| ✏️ Edit | Ctrl+Z / Ctrl+Y |
Undo / Redo |
| 🎯 Select | Ctrl+A / Delete |
Select All / Delete Selected |
| 💾 File | Ctrl+S / Escape |
Save PNG / Clear Selection |
| 🔍 View | Mouse Wheel / Middle Click |
Zoom / Pan Canvas |
|
|
|
| Feature | Specification |
|---|---|
| Rendering | 60 FPS with requestAnimationFrame |
| Memory | Optimized object storage with cleanup |
| Storage | Chrome Storage API with per-URL isolation |
| History | 100-step undo/redo system |
| Export | Automatic bounds detection PNG export |
| Feature | WebWhiteboard+ | Other Extensions | Desktop Apps |
|---|---|---|---|
| 🚀 Installation | ✅ One-click install | ✅ Browser only | ❌ Complex setup |
| 🌐 Website Integration | ✅ Direct webpage drawing | ❌ Limited or none | ❌ No web integration |
| 🎨 Professional Tools | ✅ Complete toolset | ✅ Advanced features | |
| 💾 Auto-save | ✅ Per-website persistence | ❌ Manual save only | |
| ⚡ Performance | ✅ 60 FPS smooth | ❌ Often laggy | ✅ High performance |
🔧 Common Issues & Solutions
| Issue | Solution |
|---|---|
| Extension not loading | Enable Developer Mode in chrome://extensions/ |
| Side panel not opening | Requires Chrome 114+ |
| Drawing feels laggy | Enable hardware acceleration in Chrome settings |
| Drawings not saving | Check Chrome storage permissions |
| Tools not responding | Refresh page or restart extension |
📊 Performance Optimization
- For complex drawings: Use smaller stroke widths
- For better performance: Close unused annotation tabs
- For memory efficiency: Clear old drawings periodically
- For troubleshooting: Restart Chrome if experiencing issues
💡 Pro Tips
- Keyboard shortcuts make you 3x faster
- Right-click colors to set as default
- Double-click objects to edit properties
- Use Ctrl+Shift+I to inspect canvas state
- Middle-click drag for smooth panning
We welcome contributions! Here's how you can help make WebWhiteboard+ even better:
Special thanks to:
- The Chrome Extensions community for invaluable feedback
- Open source contributors who inspire innovation
- Beta testers who helped refine the experience
- Everyone who starred ⭐ this project
