چرا youtube-spotlight-extension رو ساختم؟ (داستان یه دردسر همیشگی تو یوتیوب 😅)

هر روز چند ساعت تو یوتیوب می‌گذرونم: ویدیو آموزشی، تحقیق، کامنت‌خونی، پیدا کردن کانال جدید...

ولی هر بار یه چیز اذیتم می‌کرد: پر از نویز و حواس‌پرتی.

تبلیغات وسط ویدیو، تبلیغ تو فید، بنرهای تبلیغاتی، ویدیوهای پیشنهادی اسپانسری، عنوان‌ها و تامبنیل‌های بی‌ربط...

می‌خواستم فقط روی همون چیزی که برام مهمه تمرکز کنم، نه اینکه تو دریای محتوا گم بشم.

پس تصمیم گرفتم یه ابزار بسازم که بالاخره این مشکل رو حل کنه.

مشکل همیشگی: یوتیوب پر از حواس‌پرتیه

وقتی یوتیوب باز می‌کنی:

- تبلیغ قبل ویدیو، تبلیغ تو فید، تبلیغ کنار پخش‌کننده

- بخش‌های اسپانسری تو ویدیوها

- کلی عنوان و تامبنیل که حواست رو پرت می‌کنه

- پیدا کردن یه کلمه خاص یا کانال مورد علاقه‌ت تو این شلوغی خیلی سخته

ادبلاکرها (مثل uBlock) یه بخشی از تبلیغات رو حذف می‌کنن، ولی هیچ‌کدوم نمی‌تونن محتوای صفحه رو برات فیلتر کنن یا فقط کانال‌های خاص رو برجسته کنن.

راه‌حل‌های موجود کافی نبودن

- ادبلاکرها → فقط تبلیغ حذف می‌کنن، نه فیلتر محتوا

- افزونه‌های بهبود یوتیوب (Enhancer for YouTube و غیره) → بیشتر کنترل پخش اضافه می‌کنن، نه تمرکز روی محتوا

- اسکریپت‌های userscript → معمولاً با shadow DOM یوتیوب و آپدیت‌های مداومش به مشکل می‌خورن

- خود یوتیوب هم هیچ گزینه‌ای برای spotlight کردن متن یا کانال نداره

چند بار bookmarklet و کدهای دستی زدم، ولی همیشه ناقص بودن و UI خوبی نداشتن.

راه‌حل من: youtube-spotlight-extension

یه افزونه سبک کروم ساختم که یه نوار کنترل شیک و متحرک (draggable) روی صفحه یوتیوب اضافه می‌کنه.

ویژگی‌های اصلی:

- Spotlight متن → هر کلمه‌ای تایپ کنی، بقیه متن‌های صفحه محو می‌شن (opacity ~0.1) → عالی برای جستجوی سریع تو کامنت‌ها، عنوان‌ها یا توضیحات

- Spotlight کانال → با یه کلیک فقط اسم کانال‌ها و @handleها روشن می‌مونن، بقیه صفحه کم‌رنگ می‌شه → خیلی راحت می‌تونی کانال‌های مورد علاقه‌ت رو پیدا کنی

- حذف تبلیغات یک‌کلیکی → اکثر تبلیغات (فید، بنر، ویدیوهای اسپانسری، تبلیغات پخش‌کننده و ...) فوراً حذف می‌شن

- پشتیبانی خودکار از حالت تاریک/روشن یوتیوب

- نوار کنترل draggable روی دسکتاپ، ثابت و وسط‌چین روی موبایل

- بدون نیاز به بیلد — ZIP آماده رو دانلود کن، Load unpacked کن، تموم!

همه کارها تو content script انجام می‌شه — سبک، سریع، بدون overhead زیاد.

چطور کار می‌کنه؟ (یه نگاه فنی سریع)

- از Shadow Root UI (با کمک WXT) برای نوار کنترل استفاده کردم

- MutationObserver برای تشخیص تغییر تم تاریک/روشن

- querySelectorAll + تغییر opacity برای dim کردن عناصر

- لیست کاملی از سلکتورهای تبلیغات (ytd-ad-slot-renderer، .ytp-ad-module و ...) برای حذف

- بدون وابستگی خارجی سنگین — فقط React + WXT
کجا ازش استفاده کنی؟

• تحقیق روی یه موضوع خاص → کلمه کلیدی رو spotlight کن و کامنت‌ها/نتایج رو سریع اسکن کن

• دنبال کردن یه یوتیوبر → حالت کانال رو فعال کن و فقط محتوای اون‌ها رو ببین

• تماشای بدون تبلیغ → یه کلیک و صفحه تمیز می‌شه

• مرور سریع → همه چیز رو dim کن جز @منشن‌ها یا عبارت مورد نظرت

شروع کار

1. برو به صفحه Releases

2. آخرین ZIP رو دانلود کن (پیش‌ساخته، بدون نیاز به npm install)

3. unzip کن → کروم → chrome://extensions/ → Developer mode → Load unpacked → پوشه رو انتخاب کن

4. یوتیوب رو باز کن — نوار spotlight ظاهر می‌شه!

ریپو: https://github.com/1mehdifaraji/youtube-spotlight-extension

حرف آخر

بعد از ساخت و استفاده از این افزونه، واقعاً حس می‌کنم یوتیوب تمیزتر و هدفمندتر شده. دیگه تو نویز گم نمی‌شم و دقیقاً می‌رم سراغ چیزی که می‌خوام.

اگه تو هم از یوتیوب زیاد استفاده می‌کنی و از شلوغی خسته شدی، حتماً امتحانش کن.

یه ⭐ روی گیت‌هاب خیلی انرژی می‌ده! 😍

ممنون که خوندی — بریم یوتیوب رو بهتر کنیم! 🔦📺