Skip to content

sameeraherath/Subify-Chrome-extension

BranchesTags

Repository files navigation

Subify

License: MIT Chrome Extension API: MyMemory

A Chrome extension that provides real-time translation of YouTube subtitles when hovering over words. This tool is particularly beneficial for language learners who want to enhance their comprehension of YouTube video content while watching.

📋 Table of Contents

🌟 Features

  • Real-time Translation: Hover over any subtitle word to get instant translations
  • Sinhala Translation: Currently supports English to Sinhala translation with multi-language support coming in the next version
  • Smart Tooltip Display: Translations appear in a well-positioned tooltip that follows your cursor
  • Persistent Settings: Your language preference is saved and remembered across sessions
  • YouTube Integration: Seamlessly works with YouTube's dynamic subtitle loading
  • Lightweight: Minimal performance impact on video playback
  • No Authentication Required: Works out of the box with free API tier

📸 Screenshots

Main Interface

Subify Popup Interface

Key Features Shown:

  • 🌐 Clean Interface: Dark gradient theme with professional styling
  • 🇱🇰 Language Selection: Sinhala as the primary supported language
  • ✅ Status Indicator: Green dot showing "Extension Active"
  • ✨ Feature Highlights: Hover-to-translate, instant translation, universal YouTube support
  • 💡 User Guidance: Tips & Help section with clear instructions
  • ⌨️ Keyboard Shortcuts: Ctrl+S for quick language selector focus
  • 📱 Responsive Design: Scrollable interface with proper spacing

🚀 Installation

Method 1: Install from Chrome Web Store (Coming Soon)

This extension will be published on the Chrome Web Store soon.

Method 2: Install from Source (Developer Mode)

  1. Clone the repository:

    git clone https://github.com/sameeraherath/youtube-subtitle-translator.git
cd youtube-subtitle-translator

  2. Open Chrome Extensions page:

    • Navigate to chrome://extensions/
    • Or go to Chrome Menu → More Tools → Extensions

  3. Enable Developer Mode:

    • Toggle the "Developer mode" switch in the top-right corner

  4. Load the extension:

    • Click "Load unpacked"
    • Select the project folder containing manifest.json

  5. Verify installation:

    • The extension icon should appear in your Chrome toolbar
    • You should see "Subify" in your extensions list

📖 Usage

Setting Up Your Preferred Language

  1. Click the extension icon in your Chrome toolbar
  2. Select your target language from the dropdown menu
  3. Your selection will be saved automatically

Using on YouTube

  1. Navigate to any YouTube video with English subtitles
  2. Enable subtitles if not already active (click the CC button)
  3. Hover over any word in the subtitles
  4. A translation tooltip will appear showing the word in your selected language

Tooltip Behavior

  • Tooltip appears instantly on hover
  • Follows your cursor movement for easy reading
  • Automatically disappears after 2 seconds
  • Non-intrusive design that doesn't block the video

📚 API Documentation

This extension uses the MyMemory Translation API for providing real-time translations.

Quick API Info

  • Provider: MyMemory (Translated.net)
  • Endpoint: https://api.mymemory.translated.net/get
  • Authentication: Not required (free tier)
  • Rate Limit: 100 requests/day (anonymous) or 1,000/day (with email)

API Request Example

GET https://api.mymemory.translated.net/get?q=hello&langpair=en|fr

Response:
{
  "responseData": {
    "translatedText": "bonjour"
  },
  "responseStatus": 200
}

For detailed API documentation, see:

🏗️ Architecture

Component Overview

The extension consists of four main components:

  1. Content Script (content.js)

    • Detects YouTube subtitles using MutationObserver
    • Handles translation requests
    • Creates and manages tooltip display

  2. Popup Interface (popup.html, popup.js)

    • Provides language selection UI
    • Manages user preferences

  3. Background Service (background.js)

    • Handles extension lifecycle events
    • Manages installation and updates

  4. Manifest (manifest.json)

    • Defines permissions and configuration

Data Flow

User hovers over subtitle
         ↓
Extract word text
         ↓
Retrieve target language from storage
         ↓
Make API request to MyMemory
         ↓
Display translation in tooltip
         ↓
Auto-remove tooltip after 2s

For detailed architecture documentation, see ARCHITECTURE.md

🌍 Supported Languages

Current Version (v1.0):

  • Sinhala (si) - English to Sinhala translation

Coming Soon (v2.0): The extension will support translation from English to 17+ languages:

Language Code Language Code
French fr Arabic ar
Spanish es Chinese (Simplified) zh-CN
German de Chinese (Traditional) zh-TW
Sinhala si Japanese ja
Korean ko Russian ru
Portuguese pt Italian it
Dutch nl Swedish sv
Polish pl Turkish tr
Vietnamese vi Hindi hi

Note: When users select languages other than Sinhala, they'll see a "Coming Soon" notification indicating that multi-language support will be available in the next version.

Want to contribute to multi-language support? Check the MyMemory supported languages and submit a PR!

🔧 Development

Prerequisites

  • Chrome or Chromium-based browser
  • Basic knowledge of JavaScript and Chrome Extensions API
  • Text editor (VS Code recommended)

Project Structure

youtube-subtitle-translator/
├── manifest.json              # Extension configuration
├── content.js                # Main translation logic
├── popup.html               # Extension popup UI
├── popup.js                # Popup functionality
├── background.js           # Background service worker
├── images/                # Extension icons
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── README.md             # This file
├── API.md               # API documentation
├── ARCHITECTURE.md     # Architecture documentation
├── CONTRIBUTING.md    # Contributing guidelines
└── LICENSE           # MIT License

Key Functions

translateText(text) - content.js

Handles API calls to MyMemory Translation API and returns translated text.

async function translateText(text) {
  const { targetLang } = await chrome.storage.sync.get('targetLang');
  const lang = targetLang || 'fr';
  const response = await fetch(
    `https://api.mymemory.translated.net/get?q=${encodeURIComponent(
      text
    )}&langpair=en|${lang}`
  );
  const data = await response.json();
  return data.responseData.translatedText;
}

handleMouseOver(event) - content.js

Creates and manages translation tooltips when user hovers over subtitle words.

attachListener() - content.js

Attaches event listeners to subtitle elements detected on the page.

Local Development

  1. Make your changes to the code
  2. Reload the extension in Chrome:
    • Go to chrome://extensions/
    • Click the refresh icon on your extension card
  3. Test on YouTube with different videos and languages
  4. Check console for errors (F12 on YouTube page)

🧪 Testing

Manual Testing Checklist

  • Extension loads without errors
  • Popup displays correctly and saves settings
  • Subtitles are detected on YouTube videos
  • Translations appear on hover
  • Tooltip follows cursor correctly
  • Tooltip auto-removes after 2 seconds
  • Works with multiple languages
  • Handles errors gracefully
  • No memory leaks after extended use

Testing Different Scenarios

  1. Videos with auto-generated subtitles
  2. Videos with manually uploaded subtitles
  3. Long videos (>1 hour)
  4. Videos with special characters
  5. Rapid hovering over multiple words
  6. No internet connection (error handling)

🤝 Contributing

We welcome contributions! Here's how you can help:

Ways to Contribute

  • 🐛 Report bugs
  • 💡 Suggest new features
  • 📝 Improve documentation
  • 🌍 Add support for more languages
  • ⚡ Optimize performance
  • ✨ Add new features

Contribution Process

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Make your changes and test thoroughly
  4. Commit your changes: git commit -m 'Add amazing feature'
  5. Push to the branch: git push origin feature/amazing-feature
  6. Open a Pull Request

Please read CONTRIBUTING.md for detailed guidelines.

Code Style

  • Use ES6+ JavaScript features
  • Follow existing code formatting
  • Add comments for complex logic
  • Include error handling
  • Test your changes thoroughly

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

What this means:

  • ✅ Commercial use
  • ✅ Modification
  • ✅ Distribution
  • ✅ Private use

🐛 Known Issues

  • Translation quality depends on MyMemory API
  • Some YouTube subtitle formats may not be detected immediately
  • Tooltip positioning may need adjustment on ultra-wide screens
  • Rate limit (100 requests/day) may be reached with heavy usage

🔮 Roadmap

Future enhancements we're considering:

  • Support for more translation APIs (Google Translate, DeepL)
  • Offline translation capability using local models
  • Translation caching to reduce API calls
  • Keyboard shortcuts for quick actions
  • Support for other video platforms (Vimeo, Dailymotion)
  • Translation history and bookmarks
  • Custom tooltip styling options
  • Context menu integration
  • Support for translating full sentences
  • Chrome Web Store publication

📞 Support

Getting Help

Reporting Issues

If you encounter problems:

  1. Check if the issue already exists
  2. Provide clear reproduction steps
  3. Include browser version and OS
  4. Add console error messages if available
  5. Include YouTube video URL (if applicable)

Use our bug report template.

🙏 Acknowledgments

  • MyMemory Translation API - For providing free translation services
  • YouTube - For their subtitle API structure
  • Chrome Extensions - For excellent documentation and API
  • Contributors - Everyone who has contributed to this project

📊 Statistics

  • Languages Supported: 17+
  • API Calls: Free tier (100/day)
  • Size: < 100KB
  • Permissions: 2 (storage, activeTab)

🔗 Links

Made with ❤️ for language learners worldwide

If this project helps you, please ⭐️ star the repository!

Report Bug · Request Feature · Contribute

About

Chrome extension that enhances YouTube subtitles with instant hover translations, allowing English learners to understand unfamiliar words in real time without interrupting video playback.

chromewebstore.google.com/detail/hcimbmlilfhndbjgdegjgnohgamjemoc

Topics

chrome-extension open-source language-learning browser-extension

Resources

Readme

License

MIT license

Contributing

Contributing
Activity

Stars

2 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages