$ show asker-kurtelli/scroll
Scroll Pro is a browser extension that enhances AI chat interfaces (ChatGPT, Claude, Gemini) by adding a navigable sidebar for conversation turns. It enables users to copy, export (to Markdown, PDF, text, JSON), and navigate chats via a table of contents. The extension operates entirely client-side using React 19.2.0, TypeScript, and Vite, with UI rendered in a Shadow DOM for isolation. Key features include platform-specific DOM parsing, keyboard shortcuts, context menus, and persistent state via browser storage. The architecture centers around a content script entry point that mounts a React app, provider abstractions for each chat platform, and reusable utilities for markdown conversion, scrolling, and file downloads.
The LLM identified 6 files worth highlighting for reuse:
Provides a reusable DOM-to-markdown conversion utility (serializeNodeToMarkdown) that handles various HTML elements (headings, lists, code blocks, etc.) with configurable options. Self-contained, dependency-light (only requires marked), and extractable for any project needing DOM content conversion to markdown.
Implements smooth scrolling with custom offset to avoid fixed headers (smoothScrollTo). Uses requestAnimationFrame for performance and accepts offset parameters. Isolated utility with no internal dependencies, making it reusable in any web application needing smooth scrolling adjustments.
Handles file downloads from Blobs with automatic MIME type detection and filename sanitization. Simple, self-contained function (download) that creates object URLs and triggers downloads. Zero dependencies, easily portable to any frontend project requiring client-side file generation.
Generates sanitized, dated filenames for exports (getExportFilename). Combines chat title, format, and timestamp while removing unsafe characters. Pure function with no dependencies, suitable for reuse in any export-heavy application needing safe filename creation.
Event-based toast system that listens for custom 'scroll-pro-toast' events to display notifications. Decoupled from calling components via document events, allowing fire-and-forget usage. Self-contained UI component with enter/exit animations, easily adaptable to other projects needing lightweight notifications.
Standard React error boundary component that catches errors in child components and displays a fallback UI. Follows React best practices with getDerivedStateFromError and componentDidCatch. Highly reusable across any React application for graceful error isolation.