$ show zennomi/truyendrive
TruyenDrive is a userscript that injects a full-featured comic/manga reader UI into Google Drive and OneDrive folder pages. Built with Vite, React 19, and TypeScript, it runs as a Tampermonkey script that mounts a shadow DOM reader overlay on top of the cloud storage page. The system automatically scans folder structures to detect chapters (sub-folders) or flat image lists, supports left-to-right, right-to-left, and top-to-bottom reading directions, spread layouts, zoom, page preloading, and browser history integration. It also implements a custom image encryption/decryption system using XOR and scanline methods, with Web Worker support for performance. The architecture is cleanly separated into provider abstractions (Google Drive, OneDrive), a state machine for folder classification, and a rich settings system with theme presets and persistence. The codebase demonstrates strong engineering practices including TypeScript strict mode, proper error boundaries, and reusable utility modules.
The LLM identified 4 files worth highlighting for reuse:
Provides image decryption using XOR (noise) and scanline methods. It attempts to use a Web Worker pool for performance, falling back to main-thread decryption when workers are unavailable (e.g., due to CSP). The PRNG implementation (mulberry32) is carefully crafted to match the encoder's exact sequence. This module is self-contained and could be extracted for any project needing client-side image obfuscation.
Implements an inline Web Worker for image decryption, embedded as a string to work in userscript environments where file-based workers are not possible. Includes a worker pool (up to hardware concurrency) for parallel decryption. The worker source is carefully commented to warn about PRNG precision requirements. This pattern is reusable for any browser-based computation that needs to avoid blocking the main thread.
A comprehensive settings hook that manages reader preferences with full validation, hydration from localStorage, and fallback from legacy keys. Defines typed option arrays, theme presets with computed CSS variables, and a color manipulation utility. The flatten/hydrate pattern ensures forward compatibility. This module is self-contained and could be reused in any React application needing a robust settings system.
Defines the DriveProvider interface that abstracts cloud storage backends (Google Drive, OneDrive). It specifies methods for folder scanning, image URL generation, PDF support, and authentication. The interface is clean and minimal, allowing multiple provider implementations to be swapped without changing the reader logic. This is a textbook example of the provider pattern for platform abstraction.