ophel

Ophel implements a pluggable SiteAdapter interface that abstracts platform-specific DOM parsing, conversation structure, and UI integration across ChatGPT, Claude, Gemini, Grok, and AI Studio. Each adapter defines selectors, message extraction logic, and platform-specific behaviors (e.g., Claude's multi-session-key injection, Gemini's watermark removal) without modifying the core extension logic. Adapters are registered in a central registry and instantiated based on detected site ID, enabling rapid addition of new platforms.

Ophel parses the live DOM of AI chat conversations to extract user queries and AI responses, then generates a navigable outline structure with hierarchical nesting, word counts, and bookmark anchors. The outline updates in real-time as new messages arrive via a MutationObserver-based DOM watcher. Follow mode auto-scrolls the outline as the user reads, and bookmarks persist as local markers within the conversation without modifying the platform's native structure.

Ophel provides optional WebDAV sync to synchronize settings, prompts, conversations, and Claude session keys across multiple devices. Users configure a WebDAV server URL and credentials, and Ophel automatically syncs data bidirectionally. Sync is optional and disabled by default; all data remains local unless explicitly enabled. Conflicts are resolved with last-write-wins semantics.

Ophel allows users to customize keyboard shortcuts for common actions (open search, toggle outline, insert prompt, etc.) and supports global hotkeys that work even when the extension panel is not focused. Shortcuts are stored in settings and can be synced via WebDAV. The extension uses a keyboard event listener in the background script to detect global hotkeys and trigger corresponding actions.

Ophel supports multiple languages (German, Spanish, French, Japanese, Korean, Portuguese, Russian, Traditional Chinese) through a translation system. UI strings are extracted into language-specific JSON files, and the extension detects the browser's language preference to load the appropriate translation. Users can manually override the language in settings. Translations are maintained by community contributors.

Ophel uses Zustand for state management, providing a lightweight, hook-based store for managing extension state (settings, conversations, prompts, UI state). State is automatically persisted to browser storage via a Zustand middleware, enabling state recovery across browser sessions. The store is organized into logical slices (settings store, conversation store, prompt store, etc.) for modularity and testability.

Ophel uses Plasmo, a modern browser extension framework, to build and package the extension for Chrome, Edge, and Firefox from a single codebase. Plasmo handles manifest generation, content script injection, background script bundling, and hot module reloading during development. The build system also supports userscript generation via Tampermonkey for browsers that don't support native extensions. Vite is used as the underlying bundler for fast builds and development.

Ophel mirrors the native conversation sidebar from each AI platform into a local, searchable list stored in browser storage. Users can organize conversations into folders, apply tags, and perform batch operations (delete, export, archive) without affecting the platform's native conversation list. The mirror is updated via platform-specific adapters that detect new conversations and deletions, and can be synced across devices via optional WebDAV integration.

Ophel provides a local prompt library where users store reusable prompts with {{variable}} syntax for dynamic substitution. Prompts are organized by category, searchable, and can be inserted into chat with a single click. An optional prompt queue allows users to chain multiple prompts together and execute them sequentially, with output from one prompt fed as input to the next. All prompts are stored locally and can be synced via WebDAV.

Ophel implements a global search overlay (triggered via Ctrl+K or double-Shift) that performs full-text search across outlines, conversations, prompts, and settings in a single query. Search results are categorized and ranked by relevance, with keyboard navigation and instant preview. The search index is built incrementally as users interact with the extension and stored in browser storage for fast lookups.

Ophel applies platform-specific content enhancements to improve readability and usability: markdown rendering fixes for inconsistent formatting, LaTeX formula copy buttons for easy extraction, table copy functionality for data export, and watermark removal for Gemini and AI Studio. Each enhancement is implemented as a platform-specific module that hooks into the DOM after message rendering and applies transformations without modifying the platform's native content.

Ophel provides Claude-specific functionality to manage multiple session keys and switch between Claude accounts by injecting authentication cookies into the browser. Users can store multiple Claude session keys in the extension, select which account to use, and Ophel automatically injects the corresponding cookie before loading Claude.ai. This enables seamless account switching without manual logout/login, and session keys can be synced across devices via WebDAV.

Ophel monitors AI conversations and automatically renames the browser tab title to reflect the conversation topic (e.g., 'ChatGPT - Debugging React Hooks'). When the AI finishes responding, Ophel can send browser notifications to alert the user, enabling background monitoring of long-running conversations. Tab renaming uses the first user query or AI response as the basis for the title, and updates as the conversation evolves.

Ophel tracks scroll position for each conversation and automatically restores it when the user returns to that conversation. Reading history is stored locally per conversation and persists across browser sessions. This enables users to pick up where they left off in long conversations without manually scrolling to their previous position.

Ophel provides 20+ light and dark theme presets using CSS custom properties (--gh-* variables) for colors, fonts, and spacing. Users can select a preset theme or define custom CSS overrides to personalize the extension UI. Themes are stored locally and can be synced via WebDAV. The theme system uses CSS variables for easy customization without modifying component code.