ScrollToPrompt README

The project's README from github.com/AhmadHassan-BTed/ScrollToPrompt. As one markdown file: README.md.

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

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

Searching Database…

585 ·GitHub

What is this?

ScrollToPrompt is a browser extension that adds a minimap-like marker system to the scrollbar of AI chat interfaces (ChatGPT, Claude, Gemini), letting you instantly jump back to earlier prompts in long conversations.

How do I install and load it into my browser?

Clone the repo, install dependencies, build it, then enable Developer Mode in chrome://extensions, click Load Unpacked, and select the generated dist folder.

What do I need installed to build it?

Node.js v18 or newer plus a package manager (npm, pnpm, or yarn).

Which AI chat sites does it actually work on right now?

Only ChatGPT, Claude, and Gemini have dedicated adapters today; Perplexity and Poe support, customizable marker colors, and a search-to-prompt feature are still on the roadmap.

Does it send my chat data anywhere?

No - the project states zero data collection and runs all its logic locally inside your browser.

How does it know where my previous prompts are in the page?

Each site adapter uses an optimized MutationObserver with debounced rendering to detect prompts in the chat DOM and plot them as markers.

Why does it use Shadow DOM for its UI?

The marker UI is rendered through a Shadow DOM component system so its styles stay fully isolated and never clash with the host chat site's CSS.

What's planned next for the project?

The roadmap lists support for Perplexity and Poe, customizable marker colors, a search-to-prompt feature, and localized prompt detection.

What are similar projects?

voyager, JinaClip, chathub, Darkument, integrity_baozi-, repomix, ai-newtab, Card-master-browser-extension-public

Which topics is it in?

dark-mode, privacy-first, chrome-extension, browser-extension, vite, chatgpt, gemini, customization, utility, local-first, claude, productivity

Creator: AhmadHassan-BTed
Size: 0.1 MB
Stars: 585
Updated: CommitJun 30
Age: 5mo
Commits · 90 Days