Skip to content

README.md

Latest commit

 

History

History
115 lines (87 loc) · 3.11 KB

README.md

File metadata and controls

115 lines (87 loc) · 3.11 KB

GhostChat

GhostChat is a browser extension that adds a floating chat widget to websites. It is focused on Web3 browsing contexts, peer presence, and lightweight site risk signals.

What It Does

  • Site-level chat widget injected into pages
  • Real-time peer chat with reactions (like/dislike), mentions, typing and away states
  • "Trending" and "New & Rising" leaderboard views (site/user activity snapshots)
  • Risk score panel for the current site (URL, hostname, protocol, known-domain heuristics)
  • Danmaku (scrolling message overlay) toggle
  • Browser notifications for new messages (configurable)
  • Profile/settings page (username, avatar, theme, notification preferences)

Tech Stack

  • WXT (Manifest extension tooling)
  • React 19 + TypeScript
  • Remesh + remesh-react (state/domain architecture)
  • Tailwind CSS v4 + shadcn/ui (Radix-based UI)
  • @rtco/client peer communication layer
  • idb-keyval + browser storage (storage.sync) for persistence

Requirements

  • Node.js >= 20.0.0
  • pnpm (recommended)

Local Development

git clone https://github.com/SapienXai/GhostChat.git
cd GhostChat
pnpm install
pnpm dev

Then load the unpacked extension:

  • Chrome: chrome://extensions -> Developer mode -> Load unpacked -> .output/chrome-mv3-dev
  • Firefox: about:debugging#/runtime/this-firefox -> Load Temporary Add-on -> .output/firefox-mv2-dev/manifest.json

Optional dev target:

pnpm dev:firefox

Scripts

pnpm dev            # WXT dev (Chrome target)
pnpm dev:firefox    # WXT dev (Firefox target)
pnpm build          # Production builds (all configured targets)
pnpm build:chrome
pnpm build:firefox
pnpm pack           # Zip packages for distribution
pnpm pack:chrome
pnpm pack:firefox
pnpm lint           # ESLint --fix --cache
pnpm check          # TypeScript check (tsc --noEmit)
pnpm clear          # Remove .output

Project Structure

src/
  app/
    background/      # Extension background entry
    content/         # Injected widget app (content script UI)
    options/         # Extension options page
  assets/            # Images and styles
  components/        # Shared UI components
  constants/         # App constants
  domain/            # Remesh domains, externs, and implementations
  hooks/             # React hooks
  lib/               # Supporting libraries (e.g. avatar generation)
  messenger/         # Extension messaging helpers
  types/             # Shared type definitions
  utils/             # Utility functions (risk scoring, site/web3 detection, etc.)

Architecture Notes

  • UI runs from content script and renders inside a shadow-root mount.
  • Domain state is managed via Remesh modules/domains.
  • Message and app state are persisted with IndexedDB/local storage + browser sync storage (where applicable).
  • Peer/session events are coordinated through room abstractions in src/domain/impls.

Browser Permissions

Configured permissions in manifest:

  • storage
  • notifications
  • tabs

Contributing

  1. Create a branch.
  2. Implement your change.
  3. Run checks:
pnpm lint
pnpm check
  1. Open a PR.

License

MIT. See LICENSE.