✨ Draw, Annotate & Highlight on Any Web Page or PDF

Built for researchers, students, educators, and anyone who thinks better with a pen.

🚀 Get Started • ⭐ Features • 📖 Usage • 🤝 Contribute

---

📋 Table of Contents

• Overview
• Key Features
• Installation
• How to Use
• Architecture & Tech Stack
• Smart Recognition
• Local File System Persistence
• PDF Annotation
• Contributing
• License
• Acknowledgments

---

🔭 Overview

ScholarDraw v2 is a next-generation browser extension that transforms any web page or PDF into an interactive canvas. Whether you're reviewing academic papers, taking lecture notes, marking up research articles, or brainstorming ideas — ScholarDraw gives you a powerful, pen-like drawing experience right inside your browser.

What Makes It Different?

Capability	ScholarDraw v2	Basic Highlighters
🖊️ Pressure-aware freehand drawing	✅	❌
🧠 AI-driven shape recognition	✅	❌
✍️ Handwriting-to-text conversion	✅	❌
💾 Persistent local storage	✅	❌
📌 Smart DOM anchoring	✅	❌
📄 Full PDF annotation support	✅	❌

---

⭐ Key Features

Feature	Description
🖊️ Perfect Freehand Engine	Custom stroke-rendering algorithm with simulated pressure, thinning, smoothing, and streamline for natural pen-like strokes
🧙 Smart Shape Recognition	Draw a rough circle, rectangle, triangle, or arrow — ScholarDraw instantly replaces your sketch with a clean geometric shape using the $1 Unistroke Recognizer
✍️ Handwriting to Text	Scribble words naturally; ScholarDraw sends your strokes to Google Input Tools and replaces them with typed text
🧽 Smart Eraser	Hover over or click any stroke to erase it instantly — no undo stack needed
📌 DOM Anchor System	Every drawing is anchored to a stable DOM element. Scroll, resize, or navigate — your annotations stay exactly where they belong
💾 Persistent Local Storage	Choose a local folder once; all your drawings are saved as JSON files per page, forever
📄 PDF Annotation	Automatic redirection of PDF links to an embedded PDF.js viewer with full drawing support
🖐️ Stylus & Touch Support	Full pointer event support including pressure-sensitive styluses (Apple Pencil, Surface Pen, etc.)
🪟 Glassmorphism UI	Beautiful, draggable floating toolbar with blur effects and smooth animations
🎨 Color Palette & Brush Size	5 preset colors + custom color picker, with adjustable brush width from 2px to 25px
🗕️ Minimize & Restore	Hide the toolbar when you need screen space; restore it with one click
🔒 Page-Isolated Storage	Each URL gets its own drawing context — no pollution between tabs or pages

---

🚀 Installation

From Source (Developer Mode)

# 1. Clone the repository
git clone https://github.com/eissay/ScholarDraw-v2.git

# 2. Open your Chromium-based browser (Chrome, Edge, Brave, Opera)
#    and navigate to: chrome://extensions/

# 3. Enable Developer Mode (toggle in the top-right corner)

# 4. Click "Load unpacked" and select the ScholarDraw-v2 folder

# 5. The ScholarDraw icon will appear in your browser toolbar 🎉

✅ Prerequisites

Requirement	Version
Chromium-based browser (Chrome, Edge, Brave, Opera)	88+
File System Access API support	Chrome 86+

---

📖 How to Use

1️⃣ Open the Toolbar

Click the ScholarDraw icon in your browser toolbar, or click the pencil button on the floating toolbar to enter drawing mode.

2️⃣ Draw Freely

• Click and drag anywhere on the page to draw
• Use a stylus for pressure-sensitive strokes
• Adjust brush size and color from the toolbar

3️⃣ Smart Recognition (Magic Mode) ✨

Click the magic wand button to enable Smart Mode:

• Draw a circle, rectangle, triangle, or arrow — it becomes a perfect shape
• Scribble text — it converts to typed text automatically

4️⃣ Erase 🧽

Hover over or click any stroke with the eraser tool active to remove it.

5️⃣ Save to Local Folder 💾

1. Click the extension icon in the browser toolbar
2. Click "Choose Save Folder" and select a folder on your computer
3. All drawings are automatically saved as JSON files — one per page

6️⃣ PDF Annotation 📄

1. Enable PDF Annotator from the extension popup
2. Open any PDF link — it automatically opens in ScholarDraw's PDF viewer
3. Draw, highlight, and annotate just like on a web page

7️⃣ Minimize & Restore 🗕️

• Click the minimize button to hide the toolbar
• Click the floating restore button (bottom-right) to bring it back

---

🏗️ Architecture & Tech Stack

ScholarDraw-v2/
├── 📄 manifest.json          # Chrome Extension Manifest V3
├── ⚙️ background.js          # Service Worker: storage I/O, handwriting API, DNR rules
├── 🎨 content.js             # Content Script: drawing engine, UI, DOM anchoring
├── 🖥️ popup.html / popup.js  # Extension popup: settings & folder management
├── 📖 viewer.html / viewer.js / viewer.css  # PDF.js custom viewer
├── 📚 pdfjs/                 # PDF.js library (Mozilla)
└── 📋 README.md

Technology Stack

Component	Technology
Extension Framework	Chrome Extension Manifest V3
Drawing Engine	Custom SVG-based renderer with Perfect Freehand algorithm
Shape Recognition	$1 Unistroke Recognizer (64-point resampling, Golden Section Search)
Handwriting OCR	Google Input Tools Handwriting API
PDF Rendering	Mozilla PDF.js
Storage	File System Access API + IndexedDB (handle persistence)
UI Styling	Vanilla CSS with Glassmorphism (backdrop-filter)
DOM Interaction	Shadow DOM, MutationObserver, ResizeObserver

---

🧠 Smart Recognition

ScholarDraw v2 includes two AI-powered recognition engines:

1. Geometric Shape Recognition ($1 Unistroke Recognizer)

Based on the classic $1 Unistroke Recognizer by Wobbrock et al., ScholarDraw recognizes:

Sketch	Result	SVG Output
Rough circle	➡️	Perfect circle SVG
Rough rectangle	➡️	Clean rect SVG
Rough triangle	➡️	Precise polygon SVG
Rough arrow	➡️	Straight line with arrowhead SVG

Recognition threshold: 82% confidence

2. Handwriting to Text

Using Google Input Tools handwriting recognition, ScholarDraw converts your scribbles into typed text with automatic font sizing based on your writing area.

---

💾 Local File System Persistence

ScholarDraw uses the File System Access API to save your drawings directly to a folder of your choice:

• ☁️ No cloud required — everything stays on your machine
• 🔒 Per-page isolation — each URL gets a unique context ID and its own .json file
• 🔄 Automatic sync — drawings save 1.2 seconds after you stop drawing
• 💾 IndexedDB backup — the folder handle is persisted across browser sessions

File Naming Convention

<domain>_<path>_<query_params>.json

Example:

github_com_eissay_ScholarDraw-v2.json

---

📄 PDF Annotation

ScholarDraw intercepts PDF links using the Declarative Net Request API and redirects them to a custom PDF.js viewer with full annotation support:

• ✅ Works on http://, https://, and file:// PDFs
• ✅ Toggle on/off from the extension popup
• ✅ All PDF annotations are saved just like web page annotations

---

🤝 Contributing

Contributions are welcome! Whether it's bug fixes, new features, or documentation improvements.

# 1. Fork the repository

# 2. Create a feature branch
git checkout -b feature/amazing-feature

# 3. Commit your changes
git commit -m 'Add amazing feature'

# 4. Push to the branch
git push origin feature/amazing-feature

# 5. Open a Pull Request 🎉

💡 Please ensure your code follows the existing style and includes comments for complex logic.

---

📜 License

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

---

🙏 Acknowledgments

Project	Contribution
Perfect Freehand	Stroke rendering algorithm inspiration
$1 Unistroke Recognizer	Geometric gesture recognition
Mozilla PDF.js	PDF rendering engine
Google Input Tools	Handwriting recognition API
Lucide Icons	Toolbar iconography (SVG)

---

Made with ❤️ for researchers, students, and thinkers everywhere.

Star ⭐ this repo if you find it useful!

🐛 Report Bug · ✨ Request Feature