React Drag Scroller 🖱️📜

React Drag Scroller is a high-performance Chrome extension built with React 19 and Vite that introduces an intuitive "drag-to-scroll" mechanic to any website. By holding the right-click button, users can scroll through long pages or nested containers with smooth, physics-based momentum.

🚀 Key Features

• Right-Click Drag Navigation: Seamlessly scroll vertically by holding the right mouse button and moving the cursor.

• Intelligent Target Detection: Automatically identifies the correct scrollable container (like a sidebar or a chat window) under your cursor rather than just scrolling the main page.

• Physics-Based Movement: Features a dynamic scroll loop with acceleration and "dead zones" for precise control.

• Visual Feedback: A dynamic anchor UI appears at the starting point, changing color and scaling its arrow size based on your scroll speed.

• On-the-Fly Speed Control: Adjust scroll sensitivity in real-time using the W/S keys or Arrow Up/Down while scrolling.

• Smart Filtering: Automatically ignores inputs, textareas, links, and editable content to prevent interference with typing or clicking.

• Domain Blacklisting: Includes a settings menu to disable the extension on specific websites.

⌨️ Shortcuts & Controls

• Hold Right-Click: Activate drag scrolling.

• Ctrl + Shift + Q: Open the Settings Menu / Master Toggle.

• W / Arrow Up: Increase scroll sensitivity.

• S / Arrow Down: Decrease scroll sensitivity.

🛠️ Technical Stack

• Framework: React 19 (Functional Components & Hooks).

• Build Tool: Vite (Configured for Chrome Extension content scripts).

• Performance: Utilizes requestAnimationFrame for the physics loop and direct DOM manipulation for UI scaling to ensure 60FPS performance.

• State Management: Combination of useState for UI and useRef for high-frequency physics data to avoid unnecessary re-renders.

📁 Project Structure

Plaintext

├── public/
│   └── manifest.json    # Extension metadata and permissions
├── src/
│   ├── Scroller.jsx      # Core logic, physics loop, and UI
│   └── main.jsx          # Extension entry point and DOM injection
├── vite.config.js        # Optimized build settings for content scripts
└── package.json          # Project dependencies

⚙️ Installation for Developers

1. Clone the repository:

   Bash

   git clone https://github.com/your-username/react-drag-scroller.git
   cd react-drag-scroller
   
   

2. Install dependencies:

   Bash

   npm install
   
   

3. Build the extension:

   Bash

   npm run build
   
   

4. Load in Chrome:

   • Open chrome://extensions/

   • Enable Developer mode.

   • Click Load unpacked and select the dist folder generated by the build.

---

Created by Shakeeb. Designed for a faster, more ergonomic browsing experience.