AI浏览器扩展

Clone and install dependencies

git clone <repository> cd saypi-userscript npm install

Install dependencies

npm install

Build Output & Performance

The build system produces an optimized bundle under 2MB (excluding binary assets):

• Core bundles: 8 files, ~1.2MB total (main: 450KB, vendors: 700KB)
• Dynamic chunks: Lazy-loaded for chatbot-specific features
• Binary assets: 4 WASM files (37MB), 3 ONNX models (5MB)—excluded from Firefox AMO size limits
• Code splitting: Vendor libraries separated for optimal caching

See CLAUDE.md for detailed bundle analysis.

Installation

Build for production

npm run build # Chrome/Edge npm run build:firefox # Firefox (with packaging)

**Environment Management:**

One-time setup per machine (creates .venv/)

npm run setup:python

Runs automatically during builds, or manually:

npm run copy-onnx # Copy + prune ONNX models ```

See CLAUDE.md for complete development workflow and build commands.

---

Build extension

npm run build

Building

npm run build # Production build (validates + copies ONNX) npm run build:firefox # Firefox build + packaging

Verify setup without running translations

npm run translate:check

Set up environment (copy and edit)

cp .env.example .env cp .env.production.example .env.production

Configure environment (copy templates, edit as needed)

cp .env.example .env cp .env.production.example .env.production

Environment

npm run validate:env # Check .env files (auto-runs before dev/build) npm run switch # Toggle local/remote API servers ```

In .env (not .env.production):

KEEP_SEGMENTS=true

Quick switch between local and remote API servers

npm run switch # Toggle between local/remote npm run switch local # localhost:3000, 127.0.0.1:5001 npm run switch remote # saypi.ai, api.saypi.ai npm run switch status # Check current config

**Python Tooling (for ONNX model pruning):**

Targeted Translation (for rapid iteration)

When you only need to translate specific keys (e.g., after updating marketing copy):

```bash

Say, Pi Browser Extension

<img src="public/logos/marquee.png" alt="Say Pi Logo" width="600">

Transform your AI conversations with natural, hands-free voice interaction.

Say, Pi is a browser extension that brings multilingual voice capabilities to AI chatbots. Built with enterprise-grade architecture and modern web standards, it delivers accurate speech recognition and natural text-to-speech across Pi.ai, Claude.ai, and ChatGPT.

Watch Demo • Install for Chrome • Install for Firefox • Documentation

---

🔌 Seamless Chatbot Integration

• Chatbot abstraction layer with pluggable implementations
• Progressive DOM observation with backoff for SPA compatibility
• Event-driven architecture for loose coupling between components

---

Module Architecture

src/
├── chatbots/               # Chatbot-specific implementations
│   ├── ChatbotService.ts   # Factory for chatbot detection
│   ├── Chatbot.ts          # Abstract base class
│   ├── Claude.ts           # Claude.ai DOM integration
│   ├── Pi.ts               # Pi.ai DOM integration
│   └── bootstrap.ts        # DOMObserver with progressive search
│
├── audio/                  # Audio pipeline
│   ├── AudioModule.js      # Main coordinator
│   ├── OffscreenAudioBridge.js  # Content ↔ offscreen bridge
│   ├── AudioInputMachine.ts     # XState: mic → VAD → STT
│   └── AudioOutputMachine.ts    # XState: TTS → playback
│
├── vad/                    # Voice Activity Detection
│   ├── OffscreenVADClient.ts    # Chrome/Edge (offscreen)
│   ├── OnscreenVADClient.ts     # Firefox/Safari fallback
│   └── custom-model-fetcher.js  # Firefox ArrayBuffer realm fix
│
├── tts/                    # Text-to-Speech
│   ├── TextToSpeechService.ts   # Core TTS management
│   ├── ChatHistoryManager.ts    # TTS queue for chat messages
│   └── VoiceMenuUIManager.ts    # Voice selection UI
│
├── dom/                    # DOM Management
│   ├── Observation.ts      # Found/decorated element tracking
│   └── bootstrap.ts        # Progressive search with backoff
│
├── offscreen/              # Offscreen documents (CSP bypass)
│   ├── audio_handler.ts    # Audio playback under CSP
│   ├── vad_handler.ts      # VAD processing
│   └── media_coordinator.ts     # Message routing
│
├── compat/                 # Browser compatibility
│   ├── BrowserCompatibilityModule.ts  # Detection logic
│   └── CompatibilityNotificationUI.ts # User-facing notices
│
└── svc/                    # Background services
    ├── background.ts       # Service worker (auth, lifecycle)
    └── JwtManager.ts       # Token management with refresh

Package for Firefox

./package-extension.sh firefox ```

Build Environment: - Node.js v22 LTS (compatible with Mozilla review environment) - npm v10 - See README:94-136 for detailed instructions

The dist/ output matches the submitted XPI exactly. All bundling is deterministic.

---