AI-powered browser translation with multiple LLM providers
NOTE: This is the community version and does not offer as many features or as streamlined a pipeline as the Pro version.
Tech Stack
Providers
Features • Installation • Usage • Configuration • Development • Architecture
In Action:
Multi-Provider Translation
- Google Gemini (2.5 Flash, 2.5 Pro, and more)
- xAI Grok (4.1 Fast, Reasoning variants)
- OpenAI GPT (5-nano, 5-mini, 5)
Translation Modes
- Full Page – Translate entire web pages with one click
- Selection Popup – Select text to see instant translations
- Context Menu – Right-click to translate selection
Smart Caching
- Hybrid in-memory + IndexedDB cache
- 7-day TTL with LRU eviction
- Survives browser/extension restarts
Modern UI
- Dark theme with glassmorphism design
- Draggable & resizable translation popups
- Toast notifications for feedback
Privacy & Control
- Per-site blacklisting
- All API keys stored locally
- No data sent to third parties (only to chosen AI provider)
| Translate | Settings | Cache |
|---|---|---|
 |
 |
 |
-
Clone the repository
git clone https://github.com/medy17/SpyderScribe.git cd SpyderScribe -
Install dependencies
pnpm install
-
Build the extension
pnpm build
-
Load in Chrome
- Navigate to
chrome://extensions - Enable Developer mode (top right)
- Click Load unpacked
- Select the
distfolder
- Navigate to
- Click the Spyder-Scribe icon in your browser toolbar
- Select source and target languages
- Click Translate Page
- Click Revert to restore original text
- Select any text on a webpage
- A floating popup appears with the translation
- Drag to reposition, resize as needed
- Click outside to dismiss
- Right-click selected text → Translate Selection
- Right-click on page → Disable/Enable Spyder-Scribe on this site
Open the extension popup and go to the Settings tab:
| Setting | Description |
|---|---|
| Gemini API Key | Your Google AI Studio API key |
| Grok API Key | Your xAI API key |
| OpenAI API Key | Your OpenAI API key |
| Model | Choose which AI model to use |
| Custom Prompt | Optional custom translation instructions |
- Gemini: Google AI Studio
- Grok: xAI Platform
- OpenAI: OpenAI Platform
This project uses Vite with @crxjs/vite-plugin for hot-reloading during development.
pnpm install
pnpm devThen load the dist folder as an unpacked extension. Changes will hot-reload automatically!
Tip: If you see "Cannot connect to Vite Dev Server", ensure
pnpm devis running and reload the extension.
| Command | Description |
|---|---|
pnpm dev |
Start dev server with HMR |
pnpm build |
Production build |
pnpm lint |
Run ESLint |
pnpm test |
Run tests |
pnpm test:watch |
Run tests in watch mode |
pnpm test:coverage |
Run tests with coverage |
| Technology | Version |
|---|---|
| React | 19 |
| TypeScript | 5.9 |
| Vite | 7 |
| Tailwind CSS | 4 |
| Vitest | 4 |
| shadcn/ui | Latest |
See ARCHITECTURE.md for detailed documentation on:
- Component structure
- Data flow diagrams
- Translation pipeline
- Caching system
- Error handling
- Testing strategy
src/
├── background/ # Service worker (message handling, API calls)
│ ├── handlers/ # Message routing
│ ├── managers/ # Context menus
│ └── services/ # Cache, translation, providers
├── content/ # Injected into web pages
│ └── selection/ # Text selection & popup
├── popup/ # Extension popup UI (React)
│ └── components/ # Tab components
├── components/ui/ # shadcn/ui components
├── lib/ # Shared utilities
└── __tests__/ # Test suite
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is distributed under the MIT License by Ahmed Arat (Aliases: medy17, medy404, _medy__). All rights
reserved.
Made with ❤️ and 🕷️