YouTranslator

YouTranslator is a Chrome extension and Node.js service for turning YouTube videos into guided language-practice sessions. It pauses a video at intervals, retrieves a transcript segment, translates it, and gives the learner spoken and pronunciation feedback.

Features

• Extracts YouTube transcripts through a lightweight Express API.
• Selects a random transcript segment and translates it into a chosen target language.
• Pauses the active YouTube video and displays an in-page practice overlay.
• Uses the Web Speech API for text-to-speech and speech recognition.
• Scores a learner’s spoken response with normalized Levenshtein-distance similarity.
• Persists practice settings in Chrome extension storage.

Architecture

extension/                 # Chrome Manifest V3 client
├── content.js              # YouTube integration, overlay, speech features
├── popup.html / popup.js   # Practice controls and saved preferences
└── manifest.json           # Extension permissions and entry points

backend/                   # Express API
└── server.js               # Transcript, translation, and similarity endpoints

Tech stack

• JavaScript
• Chrome Extension Manifest V3
• Node.js and Express
• YouTube Transcript API
• Web Speech API
• Axios and CORS

Local setup

1. Start the backend

cd backend
npm install
npm start

The server starts on http://localhost:3000 by default.

2. Load the extension

1. Open chrome://extensions.
2. Enable Developer mode.
3. Select Load unpacked and choose the extension/ directory.
4. Open a YouTube video and activate practice mode from the extension popup.

API endpoints

• GET /api/transcript/:videoId — returns the transcript for a video.
• GET /api/random-segment/:videoId?targetLang=es — returns and translates a random transcript segment.
• POST /api/check-similarity — compares original and spoken text.

Notes

• The project is a learning prototype; it expects videos with available transcripts.
• Translation currently uses Google Translate’s public endpoint. A production release should use an authenticated, supported translation provider and deploy the backend over HTTPS.
• Update BACKEND_URL in extension/content.js when deploying the backend.

Future improvements

• Add automated unit and integration tests.
• Let users choose language and interval directly in the content-script workflow.
• Deploy the backend and add privacy/error-state handling for a production-ready extension.