ScrollToPrompt
ScrollToPrompt is a production-grade browser extension designed to enhance the navigation experience in modern AI chat interfaces. By injecting high-performance, visual markers into the scrollbar area, it allows users to instantly locate and jump back to their previous prompts.
Vision & Purpose
In the era of long-form AI interactions, navigating through hundreds of messages can be cumbersome. ScrollToPrompt aims to provide a "Minimap-like" experience for chat history, ensuring that your context is always just one click away.
Features
- Intelligent Detection: Site-specific adapters for ChatGPT, Claude, and Gemini.
- Shadow DOM UI: Fully isolated UI components to prevent styling conflicts with the host page.
- High Performance: Optimized
MutationObserverlogic with debounced rendering. - Theme Awareness: Dynamic styling that adapts to both light and dark modes.
- Privacy First: Zero data collection. All logic runs locally in your browser.
Architecture & System Design
The project follows a Modular Adapter Pattern, ensuring high cohesion and zero coupling between platform-specific logic and the core engine.
Core Modules:
Core Engine: Orchestrates the detection, state management, and UI updates.Adapters: Platform-specific implementations (ChatGPT, Claude, Gemini) that handle DOM selection.UI Layer: A Shadow DOM-based component system for rendering markers.Message Bus: (Planned) Handles communication between content scripts, background workers, and the popup.
Folder Structure:
src/
├── adapters/ # Site-specific logic (Adapter Pattern)
├── assets/ # Static assets & icons
├── components/ # Isolated UI components (Shadow DOM)
├── core/ # Business logic & Engine
├── background/ # Service worker logic
├── content/ # Content script entry points
├── types/ # Global TypeScript definitions
└── utils/ # Shared utility functions
Tech Stack
- Languages: TypeScript, HTML, CSS
- Bundler: Vite with
@crxjs/vite-plugin - Linting: ESLint, Prettier
- Testing: Vitest
- CI/CD: GitHub Actions
Getting Started
Prerequisites
- Node.js (v18+)
- npm / pnpm / yarn
Installation
- Clone the repository:
git clone https://github.com/AhmadHassan-BTed/ScrollToPrompt.git
- Install dependencies:
npm install
- Start the development server:
npm run dev
Loading into Browser
- Open Chrome/Brave/Edge and navigate to
chrome://extensions. - Enable Developer Mode.
- Click Load Unpacked.
- Select the
distfolder generated by the build.
Development Workflow
- Linting:
npm run lint - Formatting:
npm run format - Testing:
npm run test - Build:
npm run build
Contributing
We welcome contributions! Please see CONTRIBUTING.md for our contribution guidelines and CODE_OF_CONDUCT.md for our community standards.
Security
Security is a top priority. Please refer to our SECURITY.md for reporting vulnerabilities.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Roadmap
- Add support for Perplexity and Poe.
- Implement customizable marker colors.
- Add a search-to-prompt feature.
- Support for localized prompt detection.
Maintainers
- Maintainer Name - @AhmadHassan-BTed