چگونگی ساخت اکستنشن Chrome : امروزه Google Chrome پر استفاده ترین مرورگر وب بوده و اکستنشن‌های کروم راه بسیار مناسبی برای گسترش کاربرد و افزودن قابلیت‌های جدید به آن میباشند. Google مستندات جامعی را ایجاد کرده که برای تهیه اطلاعات اولیه کافی است. اما از آنجایی که پیچیدگی اکستنشن افزایش میابد، مجبور به کمک گرفتن از سایت‌های پرسش و پاسخ مانند Stackoverflow هستیم.
در این مقاله به بررسی پروسه ایجاد یک اکستنش سطح متوسط کروم خواهیم پرداخت که موجب کاهش خاصیت opacity کنترلرهای ویدیو پلیر در سایت یوتیوب شود تا بدین ترتیب محتوای ویدیو واضح تر نمایش داده شود. این اکستنشن زمانی میتواند مفید باشد که شما ویدیو را pause کردید اما کنترلرهای ویدیو پلیر محتوای بخشی از ویدیو را پنهان میکنند. مانند یک قطعه کد که در ویدیوی آموزش برنامه نویسی وجود دارد.
فایل manifest.json اطلاعات بسیار مهمی درباره اکستنشن مانند نام آن، ورژن، مجوزها، اطلاعات دولوپر و … شامل میشود. همه اکستنشن‌ها باید این فایل را داشته باشند. پس بریم سراغ ایجاد فایل manifest.json داخل یک دایرکتوری خالی که دارای فیلدهای مورد نیاز است:
این کدها و فایل manifest.json اطلاعات پایه ای اکستنشن کروم را ایجاد میکند که در حقیقت هیچ کار خاصی جز لود کردن اکستشن داخل Chrome انجام نمیدهد. به یاد داشته باشید که manifest_version همیشه باید ۲ باشد. زیرا ورژن ۱ دیگر پشتیبانی نیمشود. فایل manifest.json حتما باید سه فیلد بالا را دارا باشد.
برای لود اکستنشن در کروم، صفحه اکستنشن‌های کروم را باز کنید. برای انجام اینکار میتوانید روی سه نقطه در قسمت بالا سمت چپ کروم کلیک کنید و سپس وارد بخش more tools و پس از آن extensions شوید، یا به سادگی آدرس “chrome://extensions/” را در فیلد آدرس کروم باز کنید. پس از آن باید در قسمت بالا سمت راست، حالت developer mode را فعال کنید و روی Load unpacked در بالا سمت چپ کلیک کنید. حالا دایرکتوری شامل فایل manifest.json را Browse کرده و فولدر آنرا باز کنید.
اکنون اکستنشن در لیست زیر قابل مشاهده خواهد بود و پس از ایجاد هرگونه تغییر در کد آن، میتوانید با کلیک بر روی آیکون کوچک رفرش در سمت راست اکستنشن، آنرا رفرش کنید.
بر اساس مستندات رسمی گوگل کروم، content scripts فایلهایی هستند که در context صفحات وب اجرا میشوند. این اسکریپت‌ها میتوانند صفحات وب را بخوانند و تغییر دهند، و به اکستنشن parent آنها اطلاعاتی را با استفاده از (Document Object Model (DOM استاندارد، پاس دهند. content script میتواند با اکستنشن parent آنها مسیج‌هایی تبادل کند و از این رو قابلیت دسترسی به API کروم که توسط parent extention استفاده میشود، داشته باشد. برخی از معمول‌ترین API های کروم onConnect، و sendMessage هستند.
content scripts کاملاً از محیط خارجی جدا هستند و این باعث میشود که بدون ایجاد اثر در صفحه وب یا سایر content scripts، تغییراتی را در محیط جاوا اسکریپت خود ایجاد کنند.
بطور خلاصه content scripts میتوانند به صفحه وب که مرورگر از آن بازدید میکند دسترسی داشته باشند و در اسکریپت آنها تغییراتی ایجاد کنند. این درحالی است آنها را از سایر فایل‌های جاوا اسکریپت موجود در پروژه متمایز میکند و اسکریپت‌های پروژه در اصل هیچ صدمه یا تغییری نمی‌بینند و فقط هنگام استفاده از اکستنشن این اسکریپت‌ها اجرا میشوند. content scripts باید در فایل manifest.json همراه با جزئیات دقیق مانند URL مورد دسترسی و … تعریف شوند.
Content Scripts میتوانند به دو روش برنامه‌نویسی یا بصورت اعلامی (declaratively) داخل صفحات وب تزریق (Inject) شوند. در این مثال از روش برنامه‌نویسی استفاده میکنیم از آنجایی که فقط باید اسکریپت را در جاهای مناسب اجرا کنیم. قبل از تزریق اسکریپت، ابتدا باید مجوز Active Tab را در فایل manifest مهیا کنیم تا قادر به اجرای اسکریپت در تب فعلی باشیم. اگر بخواهید content scripts را بصورت اتوماتیک در یک تب جدید مرورگر اجرا کنید، باید content scripts را در manifest اعلام کنید.
بنابراین فایل manifest.json را با افزودن کدهای زیر آپدیت میکنیم:
در ادامه فرآیند ساخت اکستنشن Chrome ، حال میتوانیم content script را به صفحه وب مورد نظر Inject یا تزریق کنیم. ما میتوانیم هم بخشی از کد را تزریق کنیم و هم کل فایل را. در این مثال کل فایل جاوا اسکریپت را بنام contentScript.js تزریق خواهیم کرد. پس از تزریق این فایل، اکستنشن پلیر یوتیوب را ویرایش کرده و opacity کنترلرهای ویدیو پلیر یوتیوب را کاهش خواهد داد. این فایل شامل کدهای زیر میباشد:
در کد بالا، ابتدا سعی میکنیم یک المنت با آی دی stylehidecontrols پیدا کنیم. در صورت پیدا کردن، آنرا پاک میکنیم تا خاصیت Opacity را دوباره به حالت normal برگردانیم. اگر پیدا نشود، باید opacity کنترلرهای ویدیو پلیر را کاهش بدیم. برای انجام اینکار، ابتدا یک المنت style ایجاد میکنیم تا اطلاعات استایل شیت را شامل شود و آنرا به آی دی stylehidecontrols که قبلا سعی در پیدا کردنش داشتیم، اختصاص میدهیم.
سپس یک متن با اطلاعات استایلهای CSS از عناصر مختلف شناخته شده در وبسایت یوتیوب ایجاد میکنیم که با ویدیو پلیر مرتبط هستند، سپس آن را به متغیر “r” اختصاص میدهیم. . توجه داشته باشید که خاصیت opacity را برای تمام این عناصر ۰٫۲ قرار دادیم بطوری آن عناصر مانع نمایش ویدیو نشوند، با این حال بازهم قابل مشاهده هستند و میتوانیم از آنها استفاده کنیم.
حال یک node با متغیر r ایجاد میکنیم، سپس آنرا به المنت استایل s ضمیمه یا append میکنیم. نهایتا s را به document body اضافه میکنیم. این موجب اثر گذاری مستقیم استایلهای جدید و در نتیجه کاهش opacity کنترلرهای ویدیو پلیر یوتیوب میشود. اگر آیکون extention در گوگل کروم دوباره کلیک شود، به سادگی استایها از DOM پاک خواهند شد و ویدیوپلیر به حالت اورجینال خود باز خواهد گشت.
بدین ترتیب بخش اول مقاله “چگونگی ساخت اکستنشن Chrome ” به پایان رسید. بخش بعدی بزودی در سایت قرار گرفته به شما اطلاع رسانی خواهد شد.
دوره های آموزش برنامه نویسی کدفرند
