چند روز پیش نوشته‌ای در ویرگول دیدم درباره معرفی افزونه مرورگری برای دریافت لینکهای دانلود فیلم صفحه جاری مرورگر
افزونه مشکلاتی داشت که خب به عنوان نظر در نوشته ارسال شد.
از اینجا که خودم فیلم زیاد می‌بینم نیاز داشتم به چنین افزونه مرورگری برای فایرفاکس، پس شروع کردم به جستجو برای چیزهایی که نیاز داشتم. چند سال پیش افزونه‌ای برای مرورگر فایرفاکس و کروم ایجاد کرده بودم که خب با توجه به تغییرات API ساخت افزونه مرورگرها الان کاربردی نداشت.
در تمام مراحل برای تست افزونه از web-ext استفاده شده.
ابتدا از ساختار افزونه ExLinks استفاده کردم که خب کارایی نداشت. بعد رفتم سراغ کدها/افزونه‌های آماده، که خب بعد از تلاشهایی و آشنایی با نحوه تعامل با مرورگر کدهارو پاک کردم :) چون خیلی کثیف شده بود نتیجه. در این مرحله من با نحوه ارسال پیام از content_scripts که هنگام لود صفحه به صفحه وب attache میشه آشنا شدم که امکان دسترسی به محتوای تب جاری مرورگر رو میده.
همچنین background که میتونید کدهای بیشتری رو اینجا قرار بدید و استفاده کنید. برای نمایش پیام بعد از کلیک روی آیکن مرورگر از Popups استفاده کردم. طی آشنایی با این APIها مثالهای اون رو هم که در گیتهاب قرار داده شده رو تست کردم که خب برای آشنایی واقعا خوب بود.
در این مرحله کدی که نوشتم پیامی رو از content_scripts با browser.tabs.sendMessage به background می‌فرستاد که در متغییری ذخیره میشد. سپس در زمان لود popup.js پیامی ارسال میشد که توسط background متغییری که حاوی لینکها بود در پاسخ پیام با sendResponse ارسال میشد! که خب روش خوبی نبود.
در سومین تلاشم کدهای قبلی رو حذف کردم و به دنبال ارسال پیام از content_scripts به popup رفتم که منطق برنامه به این شکل شد که هنگام لود popup.js پیامی رو با داده مشخص ارسال میکنه
browser.tabs.sendMessage(tab, { action: 'getDlLinks' }, async function (response) { ...
که توسط content_scripts دریافت میشه و بعد از بررسی لینکهای صفحه با تابع sendResponse به پیام دریافتی پاسخی داده میشه.
browser.runtime..addListener(notify); function notify(request, sender, sendResponse) { if (request.action === 'getDlLinks') { sendResponse(dlLinks()); } }
تا اینجا نتیجه به این شکل شد
برای بهتر شدن افزونه نمایش اندازه فایل رو هم اضافه کردم، تنها نکته مثبت نوشتن افزونه برای من این بود که متوجه شدم Promise رو نمیشه در حلقه foreach استفاده کرد :) (تشکر از محمدحسن گیلک برای راهنمایی این مورد) که خب حلقه فراخوانی رو به for تغییر دادم. دریافت اندازه فایلها کمی لود popup رو کُند میکنه که خب در نسخه‌های بعدی افزونه میشه قبل از اینکه popup فراخوانی بشه اندازه‌های فایل رو چک کرد.
برای افزودن صفحه تنظیمات برای نمایش یا عدم نمایش اندازه فایل از Options page استفاده کردم که میتونید داده‌هارو در browser.storage.sync ذخیره کنید که با دیگر داده‌های مرورگر در اکانت فایرفاکس کاربر ذخیره بشه. (برای استفاده از این API حتما باید مقدار applications در فایل manifest.json رو تنظیم کنید که شامل id یکتا برای افزونه شماست)
در نهایت افزونه رو با نام Movie Links منتشر کردم که میتونید از Firefox Add-ons نصبش کنید.
همچنین کدهای افزونه در گیتهاب قرار داده شده
نکته پایانی چون اکثر APIهای مرورگر فایرفاکس براساس موتور کرومیوم گوگل نوشته شده میتونید با تغییرات کمی افزونه را برای دیگر مرورگرها ایجاد کنید.
