rosseta Svelte Themes

Rosseta

LLM-powered browser extension that translates text from any region of a webpage — select an area, get an instant translation.

#browser-extension#bun#chrome-extension#cicd#ddd-architecture#firefox-addon#firefox-extension#gemini#groq#hexagonal-architecture
Download

Rosseta icon Rosseta

A browser extension that translates text from any region of a webpage. Select an area on screen, and the extension captures, extracts, and translates the text using AI — all without leaving the page.

Named after the Rosetta Stone — the ancient artifact that unlocked the mystery of Egyptian hieroglyphs. Just as the stone bridged languages carved in stone, Rosseta bridges languages rendered on screen.

Successor of select-and-translate — rebuilt from scratch with a proper architecture.

Built with Svelte 5, TypeScript, Tailwind CSS v4, and a DDD + Hexagonal architecture.

Demo

▶️ YouTube Demo: COMING SOON

Features

  • 🖱️ Region select — Draw a box on any part of a page, including images, and get an instant translation overlay with romanization
  • 🤖 Multi-provider — Switch between Gemini, Groq, and Z.ai models on the fly
  • 🔑 Key management — Multiple API keys per provider with auto-rotation
  • 🌐 Proxy support — Route all API calls through your own relay server
  • 📜 History — Every translation saved locally, searchable
  • 🌙 Dark mode — System-aware with manual toggle

Supported languages

Language availability depends on the provider:

Provider Languages Reference
Gemini 110+ Supported languages
Groq (Llama 4) 12 Model card
Z.ai (GLM-4V) 26 Model card

The extension auto-filters the language list based on the active provider.

Install

Contributing

See CONTRIBUTING.md for setup instructions, architecture details, coding standards, and the pull request process.

Proxy Setup (Optional)

Rosseta can route all API requests through a proxy server instead of calling the AI provider directly. Useful when your network blocks provider domains, you want to hide your IP, or you need request logging on your own server.

How it works

The proxy URL replaces the base URL of the API. Rosseta appends the original path and query string to your proxy URL:

Provider Original URL Proxied URL (https://my-proxy.com)
Gemini generativelanguage.googleapis.com/v1beta/models/{model}:generateContent?key=... my-proxy.com/{model}:generateContent?key=...
Groq api.groq.com/openai/v1/chat/completions my-proxy.com/chat/completions
Z.ai api.z.ai/api/paas/v4/chat/completions my-proxy.com/chat/completions

Note: Your API key is still included in the request (as a query param for Gemini, as an Authorization header for Groq and Z.ai). Make sure you trust your proxy server.

Configuration
  1. Open the extension popup → ☰ menu → Proxy Settings
  2. Enter your proxy server URL
  3. Click Save — a health check runs automatically
  4. ✅ Connected = proxy is working, ✗ Unhealthy = proxy is unreachable (not saved)

To go back to direct connections, click Clear.

Example: Cloudflare Worker

A minimal reverse proxy that forwards requests to the original API:

const PROVIDERS = {
  '/v1beta/': 'https://generativelanguage.googleapis.com',
  '/openai/': 'https://api.groq.com',
  '/api/paas/': 'https://api.z.ai',
};

export default {
  async fetch(request) {
    const url = new URL(request.url);

    let target;
    for (const [prefix, origin] of Object.entries(PROVIDERS)) {
      if (url.pathname.startsWith(prefix)) {
        target = origin;
        break;
      }
    }

    if (!target) {
      return new Response('Unknown provider path', { status: 400 });
    }

    return fetch(target + url.pathname + url.search, {
      method: request.method,
      headers: request.headers,
      body: request.body,
    });
  },
};

Set your proxy URL to:

  • Gemini: https://your-worker.workers.dev/v1beta/models
  • Groq: https://your-worker.workers.dev/openai/v1
  • Z.ai: https://your-worker.workers.dev/api/paas/v4

Roadmap

  • Release to Chrome Web Store and Firefox Add-ons
  • Add proxy support
  • Improve UI/UX

Privacy

Rosseta does not collect, store, or transmit any personal data to our servers.

  • API keys, preferences, and translation history are stored locally in your browser using browser.storage.local and never leave your device.
  • Translation requests (screenshots of selected areas) are sent directly from your browser to the AI provider you configured (Google Gemini, Groq, or Z.ai) using your own API key. We have no access to this data.
  • No analytics, tracking, or telemetry of any kind.

License

This project is licensed under the MIT License.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes