{"id":29022680,"url":"https://github.com/fynlyn/youtube-transcript-highlight","last_synced_at":"2026-05-08T14:43:45.123Z","repository":{"id":300897948,"uuid":"1007514019","full_name":"fynlyn/youtube-transcript-highlight","owner":"fynlyn","description":"🎯 JavaScript tool for highlighting YouTube transcript expressions with translation tooltips and per-video persistence","archived":false,"fork":false,"pushed_at":"2025-06-24T06:09:41.000Z","size":26,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-05T13:36:42.322Z","etag":null,"topics":["bookmarklet","highlighting","javascript","language-learning","translation","userscript","youtube"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fynlyn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-24T05:51:59.000Z","updated_at":"2025-06-24T06:09:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"c77a2104-23d4-461d-befb-6fd0f04f248b","html_url":"https://github.com/fynlyn/youtube-transcript-highlight","commit_stats":null,"previous_names":["fynlyn/youtube-transcript-highlight"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fynlyn/youtube-transcript-highlight","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fynlyn%2Fyoutube-transcript-highlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fynlyn%2Fyoutube-transcript-highlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fynlyn%2Fyoutube-transcript-highlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fynlyn%2Fyoutube-transcript-highlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fynlyn","download_url":"https://codeload.github.com/fynlyn/youtube-transcript-highlight/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fynlyn%2Fyoutube-transcript-highlight/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32785388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bookmarklet","highlighting","javascript","language-learning","translation","userscript","youtube"],"created_at":"2025-06-26T03:03:22.422Z","updated_at":"2026-05-08T14:43:45.117Z","avatar_url":"https://github.com/fynlyn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎯 YouTube Transcript Highlighter \u0026 Translation Injector\n\n[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)\n[![JavaScript](https://img.shields.io/badge/JavaScript-ES6+-yellow.svg)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n[![YouTube](https://img.shields.io/badge/Platform-YouTube-red.svg)](https://youtube.com)\n\nA powerful JavaScript tool that enhances YouTube's transcript functionality by allowing you to highlight expressions, save translations, and display detailed translation data with interactive tooltips.\n\n## ✨ Features\n\n- 🎨 **Native Highlighting** - Uses CSS Highlight API for smooth, native browser highlighting\n- 💾 **Per-Video Persistence** - Saves highlights and translations for each specific YouTube video\n- 🗣️ **Rich Tooltips** - Hover over expressions to see definitions, pronunciations, synonyms, and translations\n- ⌨️ **Keyboard Shortcuts** - Intuitive shortcuts for quick highlighting\n- 🤖 **ChatGPT Integration** - Auto-generates prompts for translation requests\n- 🌍 **Multi-Language Support** - Designed with Romanian translations but adaptable to any language\n- 📱 **Cross-Browser Compatible** - Works in Chrome, Firefox, Safari, and Edge\n\n## 🚀 Quick Start\n\n### Method 1: Browser Console (Fastest)\n\n1. Open any YouTube video and show the transcript\n2. Open Developer Tools (`F12` or `Ctrl+Shift+I`)\n3. Copy and paste the contents of [`injector.js`](injector.js) into the console\n4. Press Enter to run\n\n### Method 2: Bookmarklet\n\n1. Copy the minified version from [`bookmarklet.js`](bookmarklet.js)\n2. Create a new bookmark in your browser\n3. Set the URL to the copied JavaScript code\n4. Click the bookmark on any YouTube page\n\n### Method 3: Userscript (Tampermonkey/Greasemonkey)\n\n1. Install [Tampermonkey](https://www.tampermonkey.net/) browser extension\n2. Copy the contents of [`injector.js`](injector.js)\n3. Create a new userscript and paste the code\n4. The script will automatically run on YouTube pages\n\n## 📖 How to Use\n\n### Basic Workflow\n\n1. **Open YouTube video** and enable transcript\n2. **Set context** - Select text and press `Ctrl + ↑` (highlighted in yellow)\n3. **Mark expression** - Select word/phrase and press `Ctrl + Shift + ↑` (highlighted in orange)\n4. **Get translations** - A ChatGPT prompt is auto-copied to your clipboard\n5. **Inject results** - Paste ChatGPT's JSON response using `injectGPTTranslations()`\n6. **View tooltips** - Hover over orange highlights to see translation details\n\n### Keyboard Shortcuts\n\n| Shortcut | Action |\n|----------|--------|\n| `Ctrl + ↑` | Set context (yellow highlight) |\n| `Ctrl + Shift + ↑` | Mark expression (orange highlight) and pair with context |\n| `Ctrl + ↓` | Clear all highlights for current video |\n\n*Note: Use `Cmd` instead of `Ctrl` on Mac*\n\n## 🔧 Translation Data Format\n\nThe tool expects translation data in this JSON format:\n\n```json\n[\n  {\n    \"expression\": \"example phrase\",\n    \"definition\": \"A sample expression used for demonstration\",\n    \"ro_translation\": \"frază exemplu\",\n    \"uk_pron\": \"ɪɡˈzæmpəl freɪz\",\n    \"us_pron\": \"ɪɡˈzæmpəl freɪz\",\n    \"synonyms\": [\"sample phrase\", \"demo text\"],\n    \"en_phonetic_ro\": \"ig-zămpăl freiz\"\n  }\n]\n```\n\n### Field Descriptions\n\n- `expression` - The highlighted text/phrase\n- `definition` - English definition\n- `ro_translation` - Romanian translation (adaptable to any language)\n- `uk_pron` - UK English pronunciation (IPA)\n- `us_pron` - US English pronunciation (IPA)\n- `synonyms` - Array of similar expressions\n- `en_phonetic_ro` - Romanian-style phonetic pronunciation\n\n## 🎯 Example Usage\n\n1. **Select context**: \"In this video, we'll learn about machine learning algorithms\"\n   - Press `Ctrl + ↑` → Text becomes yellow\n   \n2. **Select expression**: \"algorithms\"\n   - Press `Ctrl + Shift + ↑` → Text becomes orange\n   - Prompt automatically copied to clipboard\n\n3. **Paste in ChatGPT**: Use the generated prompt to get translations\n\n4. **Inject translations**:\n   ```javascript\n   injectGPTTranslations([\n     {\n       \"expression\": \"algorithms\",\n       \"definition\": \"A set of rules or instructions for solving a problem\",\n       \"ro_translation\": \"algoritmi\",\n       \"uk_pron\": \"ˈælɡərɪðəmz\",\n       \"us_pron\": \"ˈælɡərɪðəmz\",\n       \"synonyms\": [\"procedures\", \"methods\", \"processes\"],\n       \"en_phonetic_ro\": \"ăl-go-ri-đăms\"\n     }\n   ])\n   ```\n\n5. **View results**: Hover over \"algorithms\" to see the tooltip with all translation details\n\n## 🛠️ Technical Details\n\n### Browser Compatibility\n\n- **Chrome/Edge**: Full support (CSS Highlight API native)\n- **Firefox**: Full support (CSS Highlight API native)\n- **Safari**: Full support (CSS Highlight API native)\n\n### Storage\n\n- Uses `localStorage` for persistence\n- Per-video storage: `gpt-url-data-youtube-{videoId}`\n- Global fallback: `gptExpressionPairs`\n\n### Dependencies\n\n- No external dependencies\n- Pure vanilla JavaScript (ES6+)\n- Uses modern browser APIs (CSS Highlight API, Clipboard API)\n\n## 🤝 Contributing\n\nContributions are welcome! Please read our [Contributing Guidelines](CONTRIBUTING.md) first.\n\n### Development Setup\n\n1. Fork the repository\n2. Clone your fork: `git clone https://github.com/yourusername/youtube-transcript-highlight.git`\n3. Create a feature branch: `git checkout -b feature-name`\n4. Make your changes and test on YouTube\n5. Commit and push: `git commit -m \"Description\" \u0026\u0026 git push origin feature-name`\n6. Open a Pull Request\n\n### Reporting Issues\n\nPlease use the [GitHub Issues](https://github.com/fynlyn/youtube-transcript-highlight/issues) page to report bugs or request features.\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Thanks to the YouTube team for providing transcript functionality\n- Built with modern CSS Highlight API\n- Inspired by language learning needs and translation workflows\n\n## 🔗 Links\n\n- [Live Demo](https://fynlyn.github.io/youtube-transcript-highlight/) (GitHub Pages)\n- [Report Issues](https://github.com/fynlyn/youtube-transcript-highlight/issues)\n- [Contribute](https://github.com/fynlyn/youtube-transcript-highlight/pulls)\n\n---\n\n⭐ **Star this repository if it helps you learn languages more effectively!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffynlyn%2Fyoutube-transcript-highlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffynlyn%2Fyoutube-transcript-highlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffynlyn%2Fyoutube-transcript-highlight/lists"}