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 MutationObserver logic 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

1. Clone the repository:

   git clone https://github.com/AhmadHassan-BTed/ScrollToPrompt.git
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

Loading into Browser

1. Open Chrome/Brave/Edge and navigate to chrome://extensions.
2. Enable Developer Mode.
3. Click Load Unpacked.
4. Select the dist folder 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