ScrollToPrompt - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #llm #machine-learning #docker #awesome #kubernetes #awesome-list #security #pytorch #ios #open-source

ScrollToPrompt

(★ 86)

Navigation minimap extension for modern AI chat interfaces, injecting responsive scrollbar indicators via Shadow DOM isolation.

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.yml
  - feature_request.yml
- - ci.yml
- PULL_REQUEST_TEMPLATE.md
- - icon-128.png
  - icon-16.png
  - icon-48.png
- service-worker.js
- main.js
- architecture.md
- popup.html
- popup.js
- - Platforms.ts
- - index.ts
- - MarkerUI.ts
- - main.ts
- - Engine.ts
- - popup.html
  - popup.ts
- - Logger.ts
.editorconfig
.env.example
.gitattributes
.gitignore
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
manifest.json
package-lock.json
package.json
README.md
ROADMAP.md
SECURITY.md
SUPPORT.md
tsconfig.json
tsconfig.node.json
vite.config.ts

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ScrollToPrompt

[![CI](https://github.com/AhmadHassan-BTed/ScrollToPrompt/actions/workflows/ci.yml/badge.svg)](https://github.com/AhmadHassan-BTed/ScrollToPrompt/actions/workflows/ci.yml)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
[![Vite](https://img.shields.io/badge/Built%20with-Vite-646CFF.svg)](https://vitejs.dev/)

**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:
```text
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:
   ```bash
   git clone https://github.com/AhmadHassan-BTed/ScrollToPrompt.git
   ```
2. Install dependencies:
   ```bash
   npm install
   ```
3. Start the development server:
   ```bash
   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](CONTRIBUTING.md) for our contribution guidelines and [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) for our community standards.

##  Security
Security is a top priority. Please refer to our [SECURITY.md](SECURITY.md) for reporting vulnerabilities.

##  License
This project is licensed under the MIT License - see the [LICENSE](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](https://github.com/AhmadHassan-BTed)