چگونه اکستنشن کروم بسازیم؟‌ (قسمت اول)

در نوشته قبلی با عنوان چگونه اکستنشن کروم بسازیم؟ (آشنایی با افزونه کروم) درباره ماهیت افزونه یا همان اکستنشن توضیح دادم و بیشتر کلیاتی راجع به قابلیت‌ها و کارایی‌هایش نوشتم. اما از این‌‌جا به بعد قصد دارم برای کسانی که علاقه‌مند به نوشتن و برنامه‌نویسی اکستنشن کروم هستند شیوه ساختش را آموزش دهم. باعث افتخار خواهد بود که همراهم باشید.

پیش‌نیازهای برنامه‌نویسی اکستنشن کروم

1. تسلط بر HTML
2. تسلط بر CSS
3. تسلط بر JavaScript یا jQuery

همان‌طور که می‌بینید برای ساختن اکستنشن کروم باید به پیاده‌سازی فرانت‌اند (Front-End) یا همان ظاهر (UI) وب تسلط مناسبی داشته باشید. زیرا همان‌طور که در ادامه توضیح خواهم داد، بخش‌های مختلف افزونه کروم تشکیل شده از فایل‌های مختلف HTML و CSS و JavaScript است.

پس اگر دانش پیاده‌سازی ‌UI را ندارید برای شروع نگاهی به این نوشته من بیاندازید:

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

بخش‌های مختلف اکستشن (افزونه) کروم

الف - دسته‌بندی بر اساس انواع فایل:

1. فایل manifest.json
2. فایل‌های HTML
3. فایل‌های ‌CSS
4. فایل‌های JavaScript
5. فایل‌های تصویر و لوگو و... با فرمت‌های مختلف (png, jpg, svg, ico و ...)

ب - دسته‌بندی بر اساس محدوده عملکرد (Scope):

1. فایل شناسه و پیکربندی manifest.json
2. فایل‌های پنجره اکستنشن (popup) یا ظاهر افزونه (UI)
3. اسکریپت‌های پس‌زمینه (Background Scripts)
4. اسکریپت‌های محتوا (Content Scripts)

* توجه: علت دسته‌بندی با نام محدوده عملکرد (Scope) به این دلیل است که اسکریپت‌های نوشته شده در هر دسته، از دسته دیگر ایزوله و جدا هستند. بنابراین برای صدا زدن توابع از هر دسته در دسته دیگر نیاز به روش‌های ویژه‌ای خواهد بود که بعداً توضیح خواهم داد.

۱. مانیفست (manifest.json) اکستنشن کروم چیست؟

مانیفست به نوعی شناسنامه و پیکربندی (Config) افزونه کروم است. این فایل دارای فرمت و ساختار ویژه‌ایست که اگر درست نوشته نشود، اکستنشن اصلاً کار نخواهد کرد و در بعضی موارد استثناء شاید اجرا شود ولی باز هم درست کار نخواهد کرد.

در فایل مانیفست، نام و ورژن اکستنشن، توضیحات، منابع استفاده شده، آیکون‌ها و ... به صورت یک آبجکت جاوااسکریپت نوشته می‌شود و فرمت آن json است. می‌توانید نمونه کامل یک مانیفست را در مستندات مانیفست سایت کروم ببینید. اما برای اختصار و دوری از سردرگمی نمونه کوچکی را اینجا آورده‌ام:

manifest.json

{
  &quotmanifest_version&quot: 2,
  &quotname&quot: &quotMy Extension&quot,
  &quotversion&quot: &quotversionString&quot,
  &quotdescription&quot: &quotA plain text description&quot,
  &quoticons&quot: {...},
  &quotbrowser_action&quot: {...}
}

۲. فایل‌های پنجره اکستنشن یا ظاهر افزونه کروم

وقتی یک اکستنشن کروم می‌نویسید با نصب و کلیک روی آیکون آن، پنجره‌ای باز می‌شود که تمام ویژگی‌های یک صفحه وب ساده را دارد به جز این که روی پنجره کروم باز می‌شود. بنابراین یک فایل html نیاز داریم تا محتوای پنجره (popup) را به کاربر نشان دهد و برای ظاهر و کارایی‌اش به ترتیب به فایل‌های css و js نیاز خواهیم داشت. برای این کار کافیست فایل popup.html ای را که ساخته‌ایم در مانیفست تعریف کنیم:

manifest.json

...
&quotbrowser_action&quot: {
    &quotdefault_icon&quot: &quotlogo.png&quot,
    &quotdefault_popup&quot: &quotpopup.html&quot,
    &quotdefault_title&quot: &quotMy Extension Popup&quot
},
...

باقی فایل‌ها نظیر css و js ها به سادگی درون خود html لینک‌دهی می‌شوند.

۳. اسکریپت‌های پس‌زمینه افزونه کروم (Background Scripts)

قلب تپنده اکستنشن کروم همین فایل‌(های) اسکریپت پس‌زمینه است. این که می‌گویم قلب، دو علت دارد:

1. با باز شدن مرورگر کروم، تمام فایل‌های پس‌زمینه افزونه‌های کروم (هر تعداد که روی مرورگر نصب باشد) شروع به اجرا شدن می‌کنند و تا بستن مرورگر، به فعالیت خودشان ادامه می‌دهد. مثل فعالیت قلب که غیر ارادی بوده و خودکار ادامه پیدا می‌کند. البته این فعالیت در پس‌زمینه می‌تواند با توجه به برنامه‌نویسی شما، مستمر باشد (مثلا یک interval تنظیم شده باشد.) یا فقط یک بار در زمان باز شدن مرورگر اجرا شود.
2. کارهای مهم و حیاتی (نظیر فراخوانی APIها، listener های JavaScript و ...) باید در اسکریپت‌های پس‌زمینه انجام شود. چرا؟‌ چون پنجره اکستنشن (popup) و همه اسکریپت‌هایش بسیار ناپایدار هستند و با بسته شدن پنجره، همه آن‌ها متوقف می‌گردند. توجه داشته باشید که حتی یک کلیک ساده بیرون از پنجره ‌(‌popup) افزونه، می‌تواند منجر به بسته شدن آن شود.

۴. اسکریپت‌های محتوا (Content Scripts)

محدوده‌‌ها یا Scope های گفته شده شماره ۱ تا ۳ ممکن است فایل‌های کم‌تر یا بیش‌تری را شامل شود اما در هر حال اجباری هستند. در حالی که می‌توان اکستنشن کرومی نوشت بدون این که در آن اسکریپت‌های محتوا در نظر گرفت. منظور از اسکریپت‌های محتوا، JavaScriptها، CSSها و تصاویر و منابعی هستند که در صفحات وب، اعمال می‌شوند. مثلاً فرض کنید افزونه شما قرار است فونت همه سایت‌هایی را که کاربر بازدید می‌کند به فونت وزیر تغییر دهد. خب در اینجا علاوه بر این که باید فایل فونت‌ها را ذیل عنوان web_accessible_resources در مانیفست اعلام کنید، در content_scripts هم باید css مورد نظر خود را و این که در چه URLهایی اعمال شوند اعلام کنید:

manifest.json

...
&quotcontent_scripts&quot: [
    {
        &quotmatches&quot: [&quot<all_urls>&quot],
        &quotjs&quot: [&quotcontentScript.js&quot],
        &quotcss&quot: [&quotcontentStyle.css&quot]
    }
],
&quotweb_accessible_resources&quot: [
    &quotfonts/Vazir.ttf&quot,
    &quotfonts/Vazir-Bold.ttf&quot,
],
....

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

فهرست نوشته‌های من درباره اکستنشن کروم:

1. پیش‌قسمت: چگونه اکستنشن کروم بسازیم؟ (آشنایی با افزونه کروم)
2. چگونه اکستنشن کروم بسازیم؟‌ (قسمت اول)