NeetCode Subtitle Translator

A Chrome extension that automatically translates NeetCode video subtitles from English to Indonesian.

• Automatic Translation: Translates subtitles in real-time as you watch NeetCode videos
• Batch Pre-translation: Extracts transcript and pre-translates all cues for smooth playback
• Smart Caching: Caches translations locally to avoid repeated API calls
• Dual Translation APIs: Uses Google Translate (primary) with DeepL as fallback
• Seamless Integration: Works directly with Vimeo player iframes on NeetCode

1. Clone this repository:

   git clone https://github.com/z0zero/NeetCode-Subtitle-Translator.git

2. Open Chrome and navigate to chrome://extensions/

3. Enable Developer mode (toggle in top right corner)

4. Click Load unpacked and select the cloned folder

5. The extension icon should appear in your toolbar

1. Navigate to any video on neetcode.io
2. Enable subtitles/captions on the video player
3. The extension will automatically translate subtitles to Indonesian
4. Click the extension icon to:
   • Toggle translation on/off
   • Configure DeepL API key (optional)

Click the extension icon and use the toggle switch to enable or disable translation.

For better translation quality, you can add your free DeepL API key:

1. Get a free API key from DeepL
2. Click the extension icon
3. Enter your API key in the settings
4. Click Save

neetcode-subtitles-extension/
├── manifest.json           # Extension manifest (MV3)
├── background/
│   └── service-worker.js   # Background service for translation API calls
├── content/
│   └── content.js          # Content script for subtitle detection & replacement
├── popup/
│   ├── popup.html          # Extension popup UI
│   ├── popup.js            # Popup logic
│   └── popup.css           # Popup styling
├── utils/
│   ├── translator.js       # Translation API utilities (Google & DeepL)
│   └── cache.js            # Local storage caching utilities
└── icons/                  # Extension icons

1. Content Script (content.js) runs on Vimeo player iframes
2. Extracts transcript cues from the player's transcript panel
3. Batch translates all cues via the Background Service Worker
4. Caches translations in localStorage for instant reuse
5. Observes subtitle DOM changes and replaces text with translations
6. Falls back to on-the-fly translation if transcript unavailable

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│  Content Script │────>│  Service Worker  │────>│  Google API     │
│  (Vimeo Player) │     │  (Background)    │     │  (or DeepL)     │
└─────────────────┘     └──────────────────┘     └─────────────────┘
        │                        │
        │                        v
        │               ┌──────────────────┐
        └──────────────>│  localStorage    │
                        │  (Cache)         │
                        └──────────────────┘

• storage: Save user preferences and API keys
• activeTab: Access active tab for translation
• Host permissions for:
  • neetcode.io - Main site
  • player.vimeo.com - Video player
  • translate.googleapis.com - Google Translate API
  • api-free.deepl.com - DeepL API

• Chrome browser
• Basic knowledge of Chrome Extension development

1. Edit source files
2. Go to chrome://extensions/
3. Click the refresh icon on the extension card
4. Reload the NeetCode page to test changes

Open Chrome DevTools on the Vimeo iframe and check console for logs prefixed with [NeetCode Translator].

MIT License - feel free to use and modify as needed.

Contributions are welcome! Please feel free to submit a Pull Request.

Made with coffee for the NeetCode community