چگونگی ساخت اکستنشن Chrome – بخش دوم

در بخش اول از این مقاله، به یادگیری مباحث اساسی ساخت اکستنشن Chrome پرداختیم و در این بخش مباحثی همچون Bacground Script و Action های اکستنشن کروم را بررسی میکنیم. قبل از مطالعه و استفاده از این مقاله، حتما بخش اول مقاله را مطالعه کنید.

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

Background Script

برای تزریق content script به روش برنامه نویسی، ما به یک فایل جاوا اسکریپت نیاز داریم تا همیشه در بکگراند اجرا شود و رویداد click را listen و هندل کند. content scripts محدودیت‌های رویدادی دارند و نمیتوانند رویدادهای click را listen کنند، بنابراین برای اینکار به بکگراند اسکریپتی نیاز داریم که بتواند به API گوگل کروم دسترسی داشته باشد، اما با این حال نمیتواند به صفحه وب دسترسی پیدا کند. این بکگراند اسکریپت به یک event یا رویداد خاص listen میکند و پس از آن میتواند کد جاوا اسکریپت را به صفحه وب تزریق کند که در واقع میتواند به صفحه وب دسترسی و آنرا ویرایش کند. باید فایل background script را داخل manifest به شکل زیر تعریف کنیم:

بکگراند اسکریپت مسئول listen کردن رویداد کلیک و سپس تزریق فایل contentScript.js داخل صفحه وب است. محتوای بکگراند اسکریپت به شکل زیر میباشد:

در این مثال ما بصورت مستقیم فایل را داخل صفحه وب Inject یا تزریق کردیم. همچنین میتوانیم از message passing برای انجام اینکار استفاده کنیم که در آن بکگراند اسکریپت یک مسیج به content script جهت رویداد کلیک ارسال کند، سپس content script به آن مسیج خاص listen خواهد کرد. اگر مسیج از بکگراند اسکریپت دریافت شود، content script کد را اجرا خواهد کرد.

content scripts همچنین میتوانند به روش اعلامی (declaratively) تزریق شوند. برای اینکار باید مواردی را به شکل زیر داخل فایل manifest.json اضافه کنیم:

Actions

اکستنشن‌های کروم میتوانند دو نوع اکشن داشته باشند؛ page actions و browser actions. بر خلاف browser action ها، page actions فقط میتوانند روی صفحه فعلی اثر بگذارند. میتوانیم برای اکستنشن با استفاده از اکشن‌ها آیکون و popups اضافه کنیم. برای افزودن آیکون در نوار ابزار اصلی گوگل کروم، آنرا به شکل زیر در فایل manifest.json تعریف کنید:

میتوانید با استفاده از نرم‌ افزار هایی مانند فتوشاپ، ایلاستریتور و یا Gimp، در اندازه مورد نظرتان آیکون بسازید. همچنین میتوانید به سادگی عکس مورد نیاز را از اینترنت دانلود کنید. پس از اینکه آیکون خود را تهیه کردید، آنرا با نام icon.png در دایرکتوری اصلی قرار دهید.

اینکار موجب افزودن یک آیکون ۳۲ در ۳۲ به نوار ابزار گوگل کروم به منظور دسترسی به اکستنشن که ساختید میشود.

محتوای کامل فایل manifest.json

پس از اینکه تمامی فیلدهای بالا را به فایل manifest.json اضافه کردیم، این فایل به شکل زیر خواهد بود:

ساختار نهایی دایرکتوری پروژه ساخت اکستنشن گوگل حاوی فایلهای زیر خواهد بود:

• backgroundScript.js
• contentScript.js
• icon.png
• manifest.json

برای کسب اطلاعات بیشتر درباره ساخت اکستنشن Chrome میتوانید از مستندات جامع و رسمی گوگل کروم استفاده کنید.

مقالات مرتبط : چگونگی ساخت اکستنشن Chrome – بخش اول