Skip to content

README.md

Latest commit

 

History

History
211 lines (164 loc) · 8.68 KB

README.md

File metadata and controls

211 lines (164 loc) · 8.68 KB

Ophel 🚀

Ophel Logo

✨ AI's Benefit, Within Reach ✨
AI 之益，触手可及

Version Stars Sponsor

Demo • Core Features • Architecture • Quick Start • Support

👋 Ophel is the successor to gemini-helper, completely rewritten with a modern tech stack. It is available as both a Browser Extension and a Userscript, designed to enhance your AI experience across Gemini, ChatGPT, Claude, Grok, and AI Studio.

👉 前往 GitHub 仓库查看项目源码与详细文档

📹 Demo

Outline Conversations Features
outline.mp4
conversation.mp4
settings.mp4

✨ Core Features

  • 🧠 Smart Outline — Auto-parse user queries & AI responses into navigable structure
  • 💬 Conversation Manager — Folders, tags, search, batch operations
  • ⌨️ Prompt Library — Variables, Markdown preview, categories, one-click insert
  • 🎨 Theme Customization — 20+ dark/light themes, custom CSS
  • 🔧 UI Optimization — Widescreen mode, page & bubble width control, sidebar layout
  • 📖 Reading Experience — Scroll lock, reading history restore, Markdown fixes
  • ⚡ Productivity Tools — Shortcuts, model lock, tab auto-rename, notifications
  • 🎭 Claude Enhancement — Session Key management, multi-account switching
  • 🔒 Privacy First — Local storage, WebDAV sync, no data collection

🏗️ Architecture

Tech Stack: Plasmo + React + TypeScript + Zustand

📐 Architecture Diagram (click to expand) 
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#6366f1', 'primaryTextColor': '#fff', 'primaryBorderColor': '#4f46e5', 'lineColor': '#94a3b8', 'secondaryColor': '#f1f5f9', 'tertiaryColor': '#e2e8f0', 'background': '#ffffff'}}}%%
flowchart TB
    subgraph Platforms["🚀 Dual Platform Build"]
        direction LR
        EXT["🧩 Browser Extension<br/><small>Plasmo + Manifest V3</small>"]
        US["🛢️ Userscript<br/><small>Vite + vite-plugin-monkey</small>"]
    end

    subgraph Entry["📦 Entry Layer"]
        direction LR
        CE["Content Script<br/><small>ui-entry.tsx</small>"]
        BG["Background<br/><small>background.ts</small>"]
        OPT["Options Page<br/><small>tabs/options.tsx</small>"]
        USE["Userscript Entry<br/><small>platform/userscript/entry.tsx</small>"]
    end

    subgraph Adapters["🔌 Site Adapters"]
        direction LR
        GEM["Gemini"]
        GPT["ChatGPT"]
        CLA["Claude"]
        GRK["Grok"]
        AIS["AI Studio"]
        GEE["Gemini<br/>Enterprise"]
    end

    subgraph Core["⚙️ Core Modules"]
        direction TB
        TM["🎨 Theme Manager<br/><small>Theme Switch · View Transitions</small>"]
        OM["📑 Outline Manager<br/><small>Outline Generation · Navigation</small>"]
        RH["📖 Reading History<br/><small>Position Restore</small>"]
        ML["🔒 Model Lock<br/><small>Model Locking</small>"]
        NM["📡 Network Monitor<br/><small>Request Interception · Status Detection</small>"]
    end

    subgraph State["💾 State Management"]
        direction LR
        ZS["Zustand Stores<br/><small>settings · prompts · conversations</small>"]
        CS["Chrome Storage<br/><small>local · sync</small>"]
        GM["GM_* Storage<br/><small>Userscript API</small>"]
    end

    subgraph UI["🎯 UI Components"]
        direction TB
        APP["App.tsx"]
        MP["MainPanel<br/><small>Side Panel</small>"]
        SM["SettingsModal<br/><small>Settings Dialog</small>"]
        TABS["Tabs<br/><small>Outline · Conversations · Prompts</small>"]
    end

    subgraph CSS["🎨 Styling System"]
        direction LR
        SD["Shadow DOM<br/><small>Style Isolation</small>"]
        TV["CSS Variables<br/><small>Theme Variables</small>"]
        TH["Theme Presets<br/><small>20+ Preset Themes</small>"]
    end

    EXT --> CE & BG & OPT
    US --> USE
    CE --> Adapters
    USE --> Adapters
    Adapters --> Core
    Core --> State
    CE --> UI
    USE --> UI
    UI --> CSS
    ZS <--> CS
    ZS <-.-> GM

    classDef platform fill:#818cf8,stroke:#6366f1,color:#fff
    classDef entry fill:#34d399,stroke:#10b981,color:#fff
    classDef adapter fill:#fbbf24,stroke:#f59e0b,color:#1f2937
    classDef core fill:#60a5fa,stroke:#3b82f6,color:#fff
    classDef state fill:#f472b6,stroke:#ec4899,color:#fff
    classDef ui fill:#a78bfa,stroke:#8b5cf6,color:#fff
    classDef css fill:#fb923c,stroke:#f97316,color:#fff

    class EXT,US platform
    class CE,BG,OPT,USE entry
    class GEM,GPT,CLA,GRK,AIS,GEE adapter
    class TM,OM,RH,ML,NM core
    class ZS,CS,GM state
    class APP,MP,SM,TABS ui
    class SD,TV,TH css
Loading

🚀 Quick Start

Tip

We highly recommend using the Browser Extension version for a more complete feature set, better experience, and higher compatibility. The Userscript version has limitations (e.g., cannot read cookies, no independent popup).

Web Store

Chrome | Firefox | Greasy Fork

Manual Installation

Browser Extension

  1. Download & unzip from Releases
  2. Open browser extensions page, enable Developer mode
  3. Click Load unpacked and select the unzipped folder

Userscript

  1. Install Tampermonkey
  2. Download .user.js file from Releases
  3. Drag into browser or click the link to install

Local Build

Click to expand build steps

Requirements: Node.js >= 20.x, pnpm >= 10.x

git clone https://github.com/urzeye/ophel.git
cd ophel
pnpm install
pnpm dev              # Development mode
pnpm build            # Chrome/Edge production build
pnpm build:firefox    # Firefox production build
pnpm build:userscript # Userscript production build

Tech Stack: Plasmo + React + TypeScript + Zustand

Bug Report

For issues or suggestions, please visit GitHub Issues.

💖 Support

"If you want to go fast, go alone. If you want to go far, go together."

If Ophel helps you, consider supporting:

Donate to Open Collective

Made with ❤️ by urzeye