ایجاد یک برنامه افزودنی کروم – یک آموزش عملی با YouTube Remaining

همه ما عاشق تصاویر جلد تولید شده توسط هوش مصنوعی هستیم، درست است؟

سلام، اینترنت اکسپلورر! نه، نه مرورگر، شما، روح ماجراجویی که به دنیای برنامه های افزودنی کروم سفر کرده است. شما به احتمال زیاد تعداد زیادی از این ابزارهای کوچک زیبا را در مرورگر خود دارید که زندگی شما را با یک کلیک آسان تر می کند. آیا تا به حال فکر کرده اید که آنها چگونه ساخته می شوند؟

ما قصد داریم یک برنامه افزودنی کروم ایجاد کنیم که بسیار مفید است، شما متعجب خواهید شد که چگونه بدون آن از YouTube استفاده می کنید. این “YouTube Remaining” نام دارد و دقیقاً همان کاری را که روی جعبه می‌گوید انجام می‌دهد — زمان باقی‌مانده را در یک ویدیوی YouTube به شما نشان می‌دهد. دیگر نیازی به چشم دوختن در مُهر زمانی کوچک یا انجام محاسبات ذهنی برای فهمیدن اینکه آیا می توانید قبل از جلسه بعدی خود یک ویدیوی دیگر از گربه را بگیرید یا خیر.

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

برای شروع آماده اید؟ می توانید افزونه تمام شده را از اینجا دانلود کنید. اما اگر برای سفر اینجا هستید، بیایید آستین ها را بالا بزنیم و شیرجه بزنیم!

شروع به کار: مواد لازم برای دستور اکستنشن شما

قبل از شروع به پختن برنامه افزودنی کروم، بیایید مطمئن شویم که همه مواد را در دسترس داریم. نگران نباشید، ما در مورد ادویه های عجیب و غریب یا چیزهایی که به سختی پیدا می شوند صحبت نمی کنیم. دستور العمل یک برنامه افزودنی کروم به چند چیز اساسی نیاز دارد:

1. اندکی از دانش HTML و CSS: نیازی نیست که در دنیای کدنویسی یک سرآشپز ستاره دار میشلین باشید، اما دانستن راه خود در مورد HTML و CSS (نه واقعاً برای این پسوند) ضروری است.

2. یک خط تیره جاوا اسکریپت: این سس مخفی است که باعث زنده شدن ماست. جاوا اسکریپت مانند آن ماده عجیب و غریب در یک ظرف ستاره دار میشلین است – شما مطمئن نیستید که چیست، و اگر می دانستید، ممکن است کمی ناراحت شوید. اما به نوعی، در دستور العمل کلی کار می کند. عجیب است، غیرقابل پیش بینی، و اجازه دهید با آن روبرو شویم، یک آتش سوزی در زباله دانی است. اما درست مانند آن عنصر عجیب، جاوا اسکریپت در افزونه کروم ضروری است.

3. گوگل کروم: ممکن است واضح به نظر برسد، اما باید مرورگر کروم را روی رایانه خود نصب کنید. پس از همه، ما در حال ساخت یک افزونه کروم هستیم!

4. یک ویرایشگر متن: اینجا جایی است که شما کد خود را می نویسید. گزینه های زیادی وجود دارد، vi، vim، neovim و غیره.

اکنون که مواد خود را جمع آوری کرده ایم، بیایید نگاهی به دستور غذا بیاندازیم. ما با راه اندازی پروژه خود و ایجاد آن شروع می کنیم manifest.json فایل، که مانند کارت دستورالعمل برای پسوند ما است. سپس، ما به سمت contentScript.js فایل، جایی که کد جاوا اسکریپت را که برنامه افزودنی ما را تقویت می کند، می نویسیم. در نهایت، برنامه افزودنی خود را در کروم آزمایش می‌کنیم و دستاوردهای آشپزی خود را جشن می‌گیریم – خطا، کدنویسی.

کارت دستور غذا: manifest.json

اولین مورد در برنامه افزودنی کروم ما، آشپزی است manifest.json فایل. به این به عنوان کارت دستور العمل برای برنامه افزودنی خود فکر کنید. اینجا جایی است که تمام جزئیات کلیدی برنامه افزودنی خود را فهرست می‌کنید، مانند نام، نسخه، و مجوزهایی که به آن نیاز دارد. همچنین جایی است که به کروم می گویید کدام اسکریپت ها را اجرا کند و چه زمانی آنها را اجرا کند.

در مورد افزونه YouTube Remaining ما، manifest.json فایل بسیار ساده است مشخص می کند که contentScript.js فایل (دوره اصلی ما که کمی بعد به آن خواهیم رسید) باید در صفحات وب YouTube اجرا شود.

{
  "manifest_version": 3,
  "name": "YouTube Remaining",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "content_scripts": [
    {
      "matches": ["https://*.youtube.com/*"],
      "js": ["contentScript.js"]
    }
  ]
}

بیایید این دستور را تجزیه کنیم:

• “مانیفست_نسخه”: ما از نسخه 3 فرمت فایل مانیفست استفاده می کنیم. این آخرین نسخه است و تغییراتی را نسبت به نسخه 2، از جمله راه های مختلف درخواست مجوز، معرفی می کند.

• “نام” و “نسخه”: برنامه افزودنی ما “YouTube Remaining” نام دارد و ما در نسخه 1.0 هستیم. هر بار که برنامه افزودنی خود را به روز می کنید، این شماره نسخه را افزایش می دهید.

• “مجوزها”: ما مجوزهای “activeTab” و “scripting” را درخواست می کنیم. مجوز “activeTab” به برنامه افزودنی ما اجازه می دهد تا زمانی که کاربر برنامه افزودنی را فراخوانی می کند، با تب فعال تعامل داشته باشد، در حالی که مجوز “اسکریپت” به ما اجازه می دهد اسکریپت ها را در برگه ها تزریق و حذف کنیم.

• “آیکون ها”: این نمادها را برای افزونه ما در اندازه های مختلف مشخص می کند. این آیکون ها در مکان های مختلفی مانند صفحه مدیریت برنامه افزودنی و نوار ابزار نمایش داده می شوند.

• “content_scripts”: اینجاست که به کروم می‌گوییم ما را تزریق کند contentScript.js در هر صفحه ای که با الگوی “https://” مطابقت دارد، فایل کنید..youtube.com/“. این بدان معناست که اسکریپت ما در هر صفحه YouTube اجرا می شود.

با ما manifest.json راه اندازی فایل، ما زمینه را برای برنامه افزودنی Chrome خود فراهم کرده ایم. بعد، ما به رویداد اصلی می رویم: the contentScript.js فایل.

توابع تبدیل: زمان ترجمه

قبل از اینکه وارد غذای اصلی شویم، بیایید چند غذای جانبی را که بعداً به آنها نیاز خواهیم داشت، درست کنیم. در ما contentScript.js فایل، ما دو تابع کمکی داریم که با تبدیل زمان سروکار دارند: durationToSeconds و secondsToDuration. این عملکردها مانند سرآشپزهای داخلی ما هستند که در پشت صحنه کار می کنند تا مطمئن شوند همه چیز به خوبی اجرا می شود.

مدت زمان تا ثانیه

به این عملکرد به عنوان تایمر آشپزخانه مطمئن ما فکر کنید. یک رشته مدت زمان با فرمت “hh:mm:ss” یا “mm:ss” می گیرد و آن را به ثانیه تبدیل می کند. این مانند شکستن یک دستور غذا به مراحل ساده‌تر است و پیروی از آن را برای ما آسان‌تر می‌کند.

function durationToSeconds(duration) {
    const parts = duration.split(':').map(part => parseInt(part, 10));
    let seconds = 0;

    if (parts.length === 3) {
        // Format: hh:mm:ss
        seconds += parts[0] * 3600; // hours
        seconds += parts[1] * 60; // minutes
        seconds += parts[2]; // seconds
    } else if (parts.length === 2) {
        // Format: mm:ss
        seconds += parts[0] * 60; // minutes
        seconds += parts[1]; // seconds
    }

    return seconds;
}

secondsToDuration

حالا بیایید تایمر را برگردانیم. این تابع برعکس است durationToSeconds. چند ثانیه طول می کشد و دوباره آن را به یک رشته مدت زمان با فرمت “hh:mm:ss” یا “mm:ss” تبدیل می کند. این مانند خواندن زمان پخت و پز در یک دستور است، به ما زمان را در قالبی که به راحتی درک می کنیم نشان می دهد.

function secondsToDuration(seconds) {
    const hrs = Math.floor(seconds / 3600);
    const mins = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;

    let duration = "";

    if (hrs > 0) {
        // Pad to 2 digits
        duration += String(hrs).padStart(2, '0') + ":";
    }

    // Pad to 2 digits
    duration += String(mins).padStart(2, '0') + ":";
    duration += String(secs).padStart(2, '0');

    return duration;
}

با این دو عملکرد، تایمرهای خود را تنظیم کرده‌ایم، و آماده هستیم تا تبدیل زمان را در برنامه افزودنی خود مدیریت کنیم.

The Sous Chef: WaitForElement Function

بعدی در منوی ما این است waitForElement تابع. این عملکرد مانند آشپزی است که اطمینان حاصل می کند که همه مواد قبل از شروع آشپزی آماده هستند. در زمینه افزونه ما، اطمینان حاصل می کند که عناصر مورد نیاز ما قبل از شروع به دستکاری آنها در صفحه بارگذاری می شوند.

function waitForElement(selector, callback) {
    if (document.querySelector(selector)) {
        callback();
    } else {
        setTimeout(() => {
            waitForElement(selector, callback);
        }, 500);
    }
}

در یک آشپزخانه شلوغ، زمان بندی همه چیز است. شما نمی خواهید قبل از اینکه سیرتان ریز خرد شود شروع به تفت دادن پیاز کنید، درست است؟ به طور مشابه، در یک صفحه وب، نمی‌توانیم عناصر را قبل از بارگیری کامل شروع به دستکاری کنیم.

این waitForElement تابع یک انتخابگر CSS و یک تابع فراخوانی را به عنوان آرگومان می گیرد. بررسی می کند که آیا عنصری مطابق با انتخابگر در صفحه وجود دارد یا خیر. اگر این کار را کرد، فوراً تابع callback را فراخوانی می کند. اگر نه، نیم ثانیه صبر می کند (500 میلی ثانیه) و سپس دوباره بررسی می کند و این روند را تکرار می کند تا عنصر پیدا شود.

این عملکرد برای برنامه افزودنی ما بسیار مهم است زیرا YouTube یک وب سایت پویا است، به این معنی که عناصر موجود در صفحه می توانند در زمان های مختلف بارگیری شوند. ما استفاده می کنیم waitForElement قبل از اینکه بخواهیم نمایش زمان باقیمانده را اضافه کنیم، اطمینان حاصل کنیم که عناصر زمان ویدیو در صفحه وجود دارند.

با سرآشپز آشپز خود، آماده شروع پختن غذای اصلی برنامه افزودنی خود هستیم: ایجاد و به روز رسانی نمایش زمان باقیمانده.

دوره اصلی: ارائه نمایش زمان باقیمانده

اکنون که سرآشپز آشپزی خود به مواد اولیه توجه دارد، وقت آن رسیده است که غذای اصلی غذای خود را آماده کنیم. اینجاست که نمایش زمان باقیمانده را ایجاد می کنیم و آن را در پخش کننده ویدیوی YouTube ارائه می کنیم.

ابتدا منتظر می مانیم تا عنصر زمان جاری در صفحه بارگذاری شود. پس از آماده شدن، عناصر زمان فعلی، جداکننده زمان و مدت زمان را از صفحه انتخاب می کنیم.

waitForElement('.ytp-time-current', () => {
    const currentTimeElement = document.querySelector('.ytp-time-current');
    const timeSeparatorElement = document.querySelector('.ytp-time-separator');
    const durationElement = document.querySelector('.ytp-time-duration');

به این عناصر به عنوان مواد اصلی غذای ما فکر کنید. ما همچنین عنصر اصلی این عناصر را دریافت می کنیم، که مانند بشقاب ما است که در آن مواد خود را مرتب می کنیم.

    const parentElement = currentTimeElement.parentElement;

سپس یک جداکننده جدید و یک بازه جدید برای زمان باقیمانده ایجاد می کنیم. کلاس های مناسب را به این عناصر اضافه می کنیم و محتوای متنی آنها را تنظیم می کنیم. برای عنصر زمان باقیمانده، آن را با مدت زمان کامل ویدیو، با علامت «-» برای نشان دادن اینکه زمان باقی مانده است، مقداردهی اولیه می کنیم.

    const newSeparator = document.createElement('span');
    newSeparator.classList.add('ytp-time-separator');
    newSeparator.textContent = ' / ';

    const remainingTimeElement = document.createElement('span');
    remainingTimeElement.classList.add('ytp-time-remaining');
    remainingTimeElement.textContent = '-' + durationElement.textContent;

در نهایت، ما عناصر جدید خود را به عنصر والد اضافه می‌کنیم و به طور موثری زمان باقیمانده خود را در پخش‌کننده ویدیوی YouTube نمایش می‌دهیم.

    parentElement.appendChild(newSeparator);
    parentElement.appendChild(remainingTimeElement);
})

اما ما هنوز تمام نشده ایم! غذای اصلی ما کمی بیشتر به چاشنی نیاز دارد.

چاشنی: به روز نگه داشتن صفحه نمایش با MutationObserver

درست مانند یک سرآشپز خوب هنگام پختن غذا، چاشنی را تنظیم کرده و در صورت نیاز هم می‌زند، برنامه افزودنی ما باید مراقب پخش‌کننده ویدیوی YouTube باشد و نمایش زمان باقی‌مانده را با پیشرفت ویدیو به‌روزرسانی کند. اینجاست که MutationObserver جلو می آید.

    const observer = new MutationObserver(() => {
        const totalDuration = durationToSeconds(durationElement.textContent);
        const currentTime = durationToSeconds(currentTimeElement.textContent);
        const remainingTime = totalDuration - currentTime;

        remainingTimeElement.textContent = '-' + secondsToDuration(remainingTime);
    });

    observer.observe(currentTimeElement, { childList: true, characterData: true, subtree: true });

فکر کن MutationObserver به عنوان چاشنی در ظرف ما این چیزی است که به برنامه افزودنی ما طعم پویا می دهد و نمایش زمان باقیمانده را در حین پخش ویدیو تازه و دقیق نگه می دارد.

این MutationObserver ساعت برای تغییرات در textContent از currentTimeElement. هر زمان که زمان فعلی تغییر کند، زمان باقی مانده را مجدداً محاسبه کرده و به روز رسانی می کند remainingTimeElement.

The Cherry on Top: README.md

درست همانطور که یک وعده غذایی خوب بدون دسر کامل نمی شود، یک پروژه منبع باز خوب نیز بدون فایل README کامل نمی شود. این گیلاس در بالا است که به مردم یک دید کلی از پروژه شما، نحوه استفاده از آن و نحوه مشارکت می دهد.

در اینجا چیزی است که باید در README خود بگنجانید:

1. عنوان پروژه: نامی به پروژه خود بدهید که به وضوح کار آن را توصیف کند.

2. شرح: یک نمای کلی از پروژه خود ارائه دهید. چه کار میکند؟ چرا مفید است؟

3. دستورالعمل نصب و راه اندازی: نحوه راه اندازی پروژه خود را توضیح دهید. اگر پروژه شما می تواند به چند روش (مانند فروشگاه وب Chrome یا به صورت دستی) نصب شود، مطمئن شوید که همه گزینه ها را پوشش می دهید.

4. دستورالعمل استفاده: نحوه استفاده از پروژه خود را شرح دهید. در مورد یک برنامه افزودنی کروم، این ممکن است شامل نحوه فعال کردن برنامه افزودنی و انتظاراتی که در هنگام اجرا وجود دارد باشد.

5. چگونه کار می کند: یک نمای کلی در سطح بالا از نحوه عملکرد پروژه خود ارائه دهید. شما نیازی به وارد کردن جزئیات دقیق ندارید (کد برای همین است)، اما به خوانندگان حسی از معماری کلی و اجزای کلیدی بدهید.

6. رهنمودهای مشارکتی: اگر تمایل به مشارکت دارید، دستورالعمل هایی در مورد اینکه دیگران چگونه می توانند کمک کنند ارائه دهید. این ممکن است شامل نحوه ارسال گزارش‌های اشکال، پیشنهاد ویژگی‌های جدید یا راه‌اندازی یک محیط توسعه باشد.

7. اطلاعات مجوز: اگر پروژه شما منبع باز است، اطلاعاتی در مورد مجوزی که تحت آن منتشر شده است را وارد کنید.

با یک README خوش ساخت، پروژه شما فقط یک نرم افزار نیست، بلکه یک پروژه متن باز کامل است که دیگران می توانند از آن یاد بگیرند، استفاده کنند و در آن مشارکت کنند. پختن این افزونه با شما بسیار لذت بخش بود و امیدوارم اکنون برای ایجاد افزونه های Chrome خود آماده باشید.