Screenshot for YouTube™ | 4K Frame & Thumbnail Cap

+164

README.md

		# YouTube Frame Extractor

		<div align="center">
		<img src="assets/icons/icon128.png" alt="YouTube Frame Extractor Logo" width="120">
		<br>
		<p>
		<b>Extract high-quality frames from YouTube videos without UI elements</b>
		</p>
		<p>
		<b>استخراج إطارات عالية الجودة من فيديوهات يوتيوب بدون عناصر واجهة المستخدم</b>
		</p>
		</div>

		## 📝 Description \| الوصف

		YouTube Frame Extractor is a browser extension for Chromium-based browsers (Chrome, Brave, Edge) that allows users to capture clean, high-quality frames directly from YouTube videos without any UI elements such as:
		- Video progress bar
		- Video title
		- Control buttons
		- Comments or suggestions

		The goal is to get a perfectly clean image from the video as if it was taken from the original production files.

		مستخرج إطارات يوتيوب هو إضافة لمتصفحات كروميوم (كروم، بريف، إيدج) تتيح للمستخدمين التقاط إطارات نظيفة وعالية الجودة مباشرة من فيديوهات يوتيوب بدون أي عناصر واجهة مثل:
		- شريط تقدم الفيديو
		- عنوان الفيديو
		- أزرار التحكم
		- التعليقات أو الاقتراحات

		الهدف هو الحصول على صورة نظيفة تمامًا من الفيديو كما لو كانت مأخوذة من ملفات الإنتاج الأصلية.

		## 🌟 Features \| المميزات

		- 🖼️ Extract frames in their original video quality
		- 📷 Download video thumbnails in highest available quality
		- 🔄 Multiple export formats (PNG, JPEG, WebP)
		- 📊 Quality control options
		- 🔤 Multilingual support (English and Arabic)
		- 🌓 Dark/Light mode support
		- 📋 Custom filename options
		- 📱 Responsive design
		- 💾 Settings are saved between sessions

		- استخراج إطارات بجودتها الأصلية
		- تحميل الصور المصغرة للفيديوهات بأعلى جودة متاحة
		- صيغ تصدير متعددة (PNG, JPEG, WebP)
		- خيارات التحكم في الجودة
		- دعم متعدد اللغات (الإنجليزية والعربية)
		- دعم الوضع المظلم/الفاتح
		- خيارات تخصيص اسم الملف
		- تصميم متجاوب
		- حفظ الإعدادات بين الجلسات

		## ⚙️ How It Works \| كيف تعمل الإضافة

		### Frame Capture \| التقاط الإطار
		1. Navigate to a YouTube video
		2. Click the extension icon
		3. Click "Capture Frame" button
		4. The frame is saved automatically with video title and timestamp

		1. انتقل إلى فيديو يوتيوب
		2. انقر على أيقونة الإضافة
		3. انقر على زر "التقط الإطار"
		4. يتم حفظ الإطار تلقائيًا باسم الفيديو والتوقيت

		### Thumbnail Download \| تحميل الصورة المصغرة
		1. Navigate to a YouTube video
		2. Click the extension icon
		3. Click "Download Thumbnail" button
		4. The highest quality thumbnail is saved with the video title

		1. انتقل إلى فيديو يوتيوب
		2. انقر على أيقونة الإضافة
		3. انقر على زر "تحميل الصورة المصغرة"
		4. يتم حفظ الصورة المصغرة بأعلى جودة متاحة باسم الفيديو

		## 🛠️ Technical Details \| التفاصيل التقنية

		This extension is built using:
		- Modern JavaScript
		- Chrome Extension APIs
		- HTML5 Canvas API
		- Manifest V3 specification

		تم بناء هذه الإضافة باستخدام:
		- جافاسكريبت الحديثة
		- واجهات برمجة تطبيقات كروم
		- واجهة برمجة تطبيقات HTML5 Canvas
		- مواصفات Manifest V3

		### Security & Privacy \| الأمان والخصوصية

		This extension:
		- Does not collect any user data
		- Does not send any information to remote servers
		- Only accesses the active YouTube tab when the user explicitly activates it
		- Does not use any third-party libraries or services
		- Does not circumvent any content protection mechanisms

		هذه الإضافة:
		- لا تجمع أي بيانات المستخدم
		- لا ترسل أي معلومات إلى خوادم خارجية
		- تصل فقط إلى علامة تبويب يوتيوب النشطة عند تفعيلها من قبل المستخدم
		- لا تستخدم أي مكتبات أو خدمات خارجية
		- لا تتجاوز أي آليات حماية المحتوى

		## 🔧 Installation \| التثبيت

		### From Chrome Web Store \| من متجر كروم
		1. Visit the Chrome Web Store
		2. Search for "YouTube Frame Extractor"
		3. Click "Add to Chrome"

		1. قم بزيارة متجر كروم
		2. ابحث عن "YouTube Frame Extractor"
		3. انقر على "إضافة إلى كروم"

		### Manual Installation \| التثبيت اليدوي
		1. Download or clone this repository
		2. Open Chrome/Brave/Edge and navigate to `chrome://extensions/`
		3. Enable "Developer Mode"
		4. Click "Load unpacked"
		5. Select the extension folder

		1. قم بتنزيل أو استنساخ هذا المستودع
		2. افتح كروم/بريف/إيدج وانتقل إلى `chrome://extensions/`
		3. فعّل "وضع المطوّر"
		4. انقر على "تحميل غير مضغوط"
		5. اختر مجلد الإضافة

		## 🚀 Future Enhancements \| التحسينات المستقبلية

		- 🎬 Frame-by-frame navigation
		- 📹 Support for more video platforms (Vimeo, Twitch, etc.)
		- 📸 Burst mode for capturing multiple frames
		- 📊 Auto-capture at specified intervals
		- 🖌️ Basic image editing tools
		- 🌐 More language options

		- التنقل إطارًا بإطار
		- دعم المزيد من منصات الفيديو (Vimeo, Twitch, إلخ)
		- وضع التصوير المتتابع لالتقاط إطارات متعددة
		- الالتقاط التلقائي على فترات محددة
		- أدوات تحرير الصور الأساسية
		- المزيد من خيارات اللغة

		## 📝 License \| الترخيص

		This project is open source and available under the MIT license.

		هذا المشروع مفتوح المصدر ومتاح تحت رخصة MIT.

		## 👨‍💻 Developer \| المطوّر

		Developed with ❤️. For support or feature requests, please open an issue on GitHub.

		طُوّر بكل ❤️. للدعم أو طلبات الميزات، يرجى فتح مشكلة على GitHub.

		---

		Note: YouTube is a trademark of Google LLC. This extension is not affiliated with or endorsed by YouTube or Google.

		ملاحظة: يوتيوب هي علامة تجارية لشركة Google LLC. هذه الإضافة ليست مرتبطة أو معتمدة من قبل يوتيوب أو جوجل.

+1

-1

manifest.json

		{
		"manifest_version": 2,
		"name": "YouTube Screenshot Tool",
		"version": "1.2.5",
		"version": "1.2.6",
		"description": "Extract high-quality frames from YouTube videos without UI elements",
		@@ -6,0 +6,0 @@ "default_locale": "en",

-139

pages/update.html

		<!DOCTYPE html>
		<html lang="en">

		<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>What's New - Screenshot for YouTube™ \| 4K Frame Extractor</title>
		<style>
		/* =========================================
		نظام الألوان الذكي (Dark/Light Mode)
		========================================= */
		:root {
		/* الألوان الافتراضية (الوضع الفاتح) */
		--bg-color: #ffffff;
		--text-color: #333333;
		--card-bg: #f5f5f7;
		--accent-color: #007aff;
		/* أزرق مريح */
		--date-color: #666;
		--border-color: #e1e1e1;
		}

		/* إذا كان المستخدم يستخدم الوضع المظلم */
		@media (prefers-color-scheme: dark) {
		:root {
		--bg-color: #1c1c1e;
		--text-color: #f5f5f7;
		--card-bg: #2c2c2e;
		--accent-color: #0a84ff;
		--date-color: #98989d;
		--border-color: #38383a;
		}
		}

		/* =========================================
		التنسيق العام (CSS)
		========================================= */
		body {
		background-color: var(--bg-color);
		color: var(--text-color);
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		margin: 0;
		padding: 40px 20px;
		line-height: 1.6;
		transition: background-color 0.3s ease;
		}

		.container {
		max-width: 600px;
		/* عرض مريح للعين للقراءة */
		margin: 0 auto;
		}

		h1 {
		font-size: 24px;
		margin-bottom: 40px;
		text-align: center;
		}

		/* تصميم بطاقة الخبر */
		.update-card {
		background-color: var(--card-bg);
		border-radius: 12px;
		padding: 20px;
		margin-bottom: 20px;
		border: 1px solid var(--border-color);
		position: relative;
		}

		/* الشريط الملون بجانب التحديث الجديد */
		.update-card.new {
		border-left: 4px solid var(--accent-color);
		}

		.version-badge {
		background-color: var(--accent-color);
		color: white;
		padding: 4px 8px;
		border-radius: 6px;
		font-size: 12px;
		font-weight: bold;
		display: inline-block;
		margin-bottom: 10px;
		}

		.date {
		color: var(--date-color);
		font-size: 13px;
		float: right;
		margin-top: 5px;
		}

		ul {
		padding-left: 20px;
		margin: 10px 0 0 0;
		}

		li {
		margin-bottom: 8px;
		}

		.footer {
		text-align: center;
		margin-top: 50px;
		font-size: 12px;
		color: var(--date-color);
		}

		a {
		color: var(--accent-color);
		text-decoration: none;
		}
		</style>
		</head>

		<body>

		<div class="container">
		<h1>✨ What's New</h1>

		<div class="update-card new">
		<span class="version-badge">v1.2.5</span>
		<span class="date">Jan 6, 2026</span>
		<h3>🚀 Smarter & More Reliable</h3>
		<ul>
		<li>Now works even when YouTube changes their layout.</li>
		<li>Better performance on all video resolutions.</li>
		</ul>
		</div>

		<div class="footer">
		<p>Thank you for using Screenshot for YouTube™ \| 4K Frame Extractor ❤️</p>
		<p><a href="https://addons.mozilla.org/en-US/firefox/addon/youtube-frame-extractor/">Rate us on Store</a>
		</div>
		</div>

		</body>

		</html>

-217

pages/welcome.html

		<!DOCTYPE html>
		<html lang="en">

		<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Welcome - Screenshot for YouTube™ \| 4K Frame Extractor</title>
		<style>
		/* =========================================
		نظام الألوان الذكي (Dark/Light Mode)
		========================================= */
		:root {
		--bg-color: #ffffff;
		--text-color: #333333;
		--card-bg: #f5f5f7;
		--accent-color: #007aff;
		--date-color: #666;
		--border-color: #e1e1e1;
		}

		@media (prefers-color-scheme: dark) {
		:root {
		--bg-color: #1c1c1e;
		--text-color: #f5f5f7;
		--card-bg: #2c2c2e;
		--accent-color: #0a84ff;
		--date-color: #98989d;
		--border-color: #38383a;
		}
		}

		/* =========================================
		التنسيق العام
		========================================= */
		body {
		background-color: var(--bg-color);
		color: var(--text-color);
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		margin: 0;
		padding: 40px 20px;
		line-height: 1.7;
		transition: background-color 0.3s ease;
		}

		.container {
		max-width: 600px;
		margin: 0 auto;
		}

		h1 {
		font-size: 28px;
		margin-bottom: 10px;
		text-align: center;
		}

		.subtitle {
		text-align: center;
		color: var(--date-color);
		margin-bottom: 40px;
		font-size: 16px;
		}

		/* بطاقة المعلومات */
		.card {
		background-color: var(--card-bg);
		border-radius: 12px;
		padding: 24px;
		margin-bottom: 20px;
		border: 1px solid var(--border-color);
		}

		.card h2 {
		font-size: 18px;
		margin: 0 0 16px 0;
		display: flex;
		align-items: center;
		gap: 10px;
		}

		.card p {
		margin: 0 0 12px 0;
		color: var(--text-color);
		}

		.steps {
		counter-reset: step;
		list-style: none;
		padding: 0;
		margin: 0;
		}

		.steps li {
		counter-increment: step;
		padding: 12px 0;
		padding-left: 40px;
		position: relative;
		border-bottom: 1px solid var(--border-color);
		}

		.steps li:last-child {
		border-bottom: none;
		}

		.steps li::before {
		content: counter(step);
		position: absolute;
		left: 0;
		top: 12px;
		width: 26px;
		height: 26px;
		background: var(--accent-color);
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		font-weight: bold;
		}

		.keyboard-shortcut {
		display: inline-block;
		background: var(--border-color);
		padding: 3px 8px;
		border-radius: 5px;
		font-family: monospace;
		font-size: 13px;
		}

		.tip {
		background: rgba(0, 122, 255, 0.1);
		border-left: 4px solid var(--accent-color);
		padding: 12px 16px;
		border-radius: 0 8px 8px 0;
		margin-top: 16px;
		}

		.footer {
		text-align: center;
		margin-top: 40px;
		font-size: 13px;
		color: var(--date-color);
		}

		a {
		color: var(--accent-color);
		text-decoration: none;
		}

		a:hover {
		text-decoration: underline;
		}

		.cta-button {
		display: block;
		background: var(--accent-color);
		color: white;
		text-align: center;
		padding: 14px 24px;
		border-radius: 10px;
		font-weight: 600;
		margin-top: 20px;
		transition: opacity 0.2s;
		}

		.cta-button:hover {
		opacity: 0.9;
		text-decoration: none;
		}
		</style>
		</head>

		<body>

		<div class="container">
		<h1>🎬 Welcome!</h1>
		<p class="subtitle">You've installed Screenshot for YouTube™ – Let's get started!</p>

		<!-- كيفية الاستخدام -->
		<div class="card">
		<h2>📸 How to Use</h2>
		<ol class="steps">
		<li>Go to any <strong>YouTube video</strong></li>
		<li>Click the <strong>extension icon</strong> in the toolbar</li>
		<li>Choose <strong>"Capture Frame"</strong> to download</li>
		</ol>

		<div class="tip">
		💡 <strong>Pro Tip:</strong> Use the keyboard shortcut
		<span class="keyboard-shortcut">Alt + Shift + C</span>
		for instant capture!
		</div>
		</div>

		<!-- ميزات -->
		<div class="card">
		<h2>✨ Features</h2>
		<p>✅ Capture any frame in <strong>Full HD / 4K</strong></p>
		<p>✅ Copy directly to <strong>clipboard</strong></p>
		<p>✅ Save as <strong>PNG, JPEG, or WebP</strong></p>
		<p>✅ <strong>100% Private</strong> – No data collected</p>
		</div>

		<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="cta-button" target="_blank">
		🚀 Try It Now on YouTube
		</a>

		<div class="footer">
		<p>Need help? <a href="https://addons.mozilla.org/en-US/firefox/addon/youtube-frame-extractor/">Rate us</a>
		or send feedback</p>
		<p>Made with ❤️</p>
		</div>
		</div>

		</body>

		</html>

META-INF/cose.manifest