zinebni/darija_extension

# Darija Side Translator Chrome Extension ## Setup Instructions ### 1. Configure API Keys Before using this extension, you need to set up your API keys: 1. Copy `config.example.js` to `config.js`: ```bash cp config.example.js config.js ``` 2. Open `config.js` and add your actual API keys: - **Gemini API Key**: Get from Google AI Studio - **ElevenLabs API Key**: Get from ElevenLabs Dashboard - **ElevenLabs Voice ID**: Choose a voice from your ElevenLabs account 3. **IMPORTANT**: Never commit `config.js` to GitHub! It's already in `.gitignore`. ### 2. Load Extension in Chrome 1. Open Chrome and go to `chrome://extensions/` 2. Enable **Developer mode** (toggle in top-right) 3. Click **Load unpacked** 4. Select this project folder ### 3. Use the Extension 1. Select any text on a webpage 2. Right-click and choose "Translate to Darija" 3. View translation and play audio in the side panel --- ## 1) Project idea This project is a Chrome Extension that helps users: - select text on any web page, - translate it into Moroccan Darija using Gemini, - listen to the original text (Chrome speech engine), - listen to the Darija translation (ElevenLabs voice API), all inside Chrome Side Panel UI. The main objective is to make translation + voice playback quick, simple, and beginner-friendly. --- ## 2) What this extension does - Adds a right-click option: **Translate to Darija**. - Opens a side panel when the user clicks the menu item. - Reads the selected text. - Sends text to Gemini API for Darija translation. - Displays source and translated text. - Plays source text with browser speech synthesis. - Plays translated text with ElevenLabs TTS API. - Keeps syncing selected text when the side panel is open. --- ## 3) Project files and role of each file ### `manifest.json` This is the extension configuration file. Chrome reads it first. Main role: - declares extension identity (name, version, description), - requests permissions, - registers background service worker, …