screendraw-pro

🎨 ScreenDraw Pro

Draw, highlight, blur, and annotate on any webpage — then screenshot it.

A lightweight Chrome extension for annotating web pages in real-time with powerful drawing tools, region screenshots, and fully customizable keyboard shortcuts.

---

✨ Features

🖊️ Drawing Tools

• Pen — freehand drawing with adjustable size and opacity
• Highlighter — semi-transparent marker for emphasizing content
• Eraser — remove parts of your annotations
• Line — straight lines between two points
• Arrow — directional arrows for pointing things out
• Rectangle — outline rectangles for framing content
• Circle — ellipses and circles
• Text — type text annotations directly on the page
• Blur — heavy 2-pass pixelation to redact sensitive information

📸 Screenshot

• Full Page — capture the entire visible viewport with your annotations
• Region Select — drag to crop any area, then save or copy
• Save as PNG — downloads the screenshot to your computer
• Copy to Clipboard — paste directly into chats, docs, or emails

⌨️ Customizable Shortcuts

• Every shortcut is remappable from the Settings page
• Tool shortcuts, action combos, and global browser shortcuts
• In-page shortcuts panel (press ?) updates dynamically
• Global shortcuts (Alt+D, Alt+C, Alt+S) configurable via Chrome settings

🎨 10 Quick Colors + Custom Color Picker

Press 1 through 0 for instant color switching, or use the custom color picker for any color.

---

📋 Default Keyboard Shortcuts

Global Shortcuts (work from any page)

Shortcut	Action
Alt+D	Toggle drawing ON/OFF
Alt+C	Clear all annotations
Alt+S	Save full page screenshot

Drawing Shortcuts (when drawing mode is ON)

Shortcut	Action
P	Pen tool
H	Highlighter
E	Eraser
L	Line
A	Arrow
R	Rectangle
C	Circle
T	Text
U	Blur / Redact
1–0	Quick colors (10 presets)
[ / ]	Decrease / Increase brush size
Ctrl+Z	Undo
Ctrl+Y	Redo
Ctrl+Shift+C	Copy screenshot to clipboard
Ctrl+Shift+S	Region screenshot
Escape	Exit drawing mode
?	Show shortcuts panel

💡 All shortcuts above (except global ones) can be customized in Settings → Customize Shortcuts.

---

🚀 Installation

From Chrome Web Store

1. Visit the Chrome Web Store listing
2. Click Add to Chrome
3. Press Alt+D to start drawing on any page

Manual Installation (Developer Mode)

1. Download or clone this repository
2. Open chrome://extensions/ in Chrome
3. Enable Developer mode (top-right toggle)
4. Click Load unpacked
5. Select the screen-draw-extension folder
6. The extension icon appears in your toolbar

---

🔧 Customizing Shortcuts

1. Click the extension icon → expand ⌨️ Keyboard Shortcuts → click ⚙️ Customize Shortcuts
2. Or right-click the extension icon → Options

Three tabs:

• Tool Shortcuts — remap single-key tool switches (Pen, Highlighter, etc.)
• Action Shortcuts — remap combos like Undo, Redo, Copy, Region Screenshot
• Global Shortcuts — links to chrome://extensions/shortcuts for browser-level shortcuts

Changes save immediately and apply to all open tabs.

---

📸 Screenshot Modes

Full Page

Captures the entire visible browser viewport with all your annotations composited on top. Available via:

• Popup → Full Page button
• Alt+S keyboard shortcut

Region Select

Drag to select any rectangular area on the page. After selecting:

• Save — downloads the cropped region as PNG
• Copy — copies to clipboard
• ✕ — cancel

Available via:

• Popup → Select Region button
• Ctrl+Shift+S keyboard shortcut (customizable)

---

🔒 Privacy

ScreenDraw Pro respects your privacy:

• No data collection — zero analytics, tracking, or telemetry
• No network requests — everything runs locally in your browser
• No accounts — no sign-up, no login, no cloud sync
• Storage is local only — settings saved in Chrome’s local storage on your device

See the full Privacy Policy.

---

🛠️ Technical Details

Detail	Value
Manifest Version	V3
Permissions	activeTab, storage, scripting, tabs
Host Permissions	<all_urls> (required to draw on any page)
Background	Service Worker
Content Scripts	Injected on-demand (not persistent)
Min Chrome Version	88+

Permission Explanation

• activeTab — access the current tab when you activate the extension
• storage — save your settings and shortcuts locally
• scripting — inject the drawing canvas onto web pages
• tabs — detect the active tab for screenshot capture
• host_permissions (<all_urls>) — required so the drawing overlay can work on any website

---

📁 Project Structure

screen-draw-extension/
├── manifest.json       # Extension configuration
├── background.js       # Service worker (commands, screenshot capture)
├── content.js          # Drawing engine (injected into pages)
├── content.css         # Overlay and UI styles
├── popup.html          # Extension popup interface
├── popup.js            # Popup logic
├── options.html        # Shortcut customization page
├── options.js          # Options logic
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── README.md
└── PRIVACY_POLICY.md

---

🐛 Troubleshooting

Shortcuts not working?

1. Go to chrome://extensions/shortcuts
2. Find ScreenDraw Pro
3. Make sure Alt+D, Alt+C, Alt+S are set (or set your preferred keys)

Can’t draw on a page?

• Extensions cannot run on chrome:// pages, the Chrome Web Store, or chrome-extension:// pages
• Try refreshing the page first
• Some pages with strict CSP may block canvas operations

Blur not strong enough?

• Increase brush size with ] before using the blur tool
• Larger brush = heavier pixelation

---

📄 License

MIT License — see LICENSE for details.

---

🤝 Contributing

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

---

Made with ❤️ by Atiqul Islam — for anyone who needs to annotate, explain, or redact things on the web.

This site is open source. Improve this page.