ساخت یک Firefox Extension

سلام. میخوام ساخت یه Extension (که البته بهش addon هم گفته میشه) برای مرورگر Firefox رو توضیح بدم.

من خودم تازه شروع به توسعه Extension کردم و هنوز تجربه آنچنانی ندارم و این نوشته هم چیز تازه‌ای نیست، بلکه یه ترجمه (صدالبته بعلاوه یه سری نکات از طرف خودم) برای مقاله Your first extension شرکت موزیلا هست. مطمئنا در آینده تجربه‌های بیشتری که کسب میکنم رو قرار میدم.

سعی میکنم این متن رو طوری بنویسم که کسانی که تجربه‌ای توی برنامه‌نویسی ندارند بتونند راهی برای ورود به این دنیای قشنگ و اعجاب انگیز پیدا کنند?.

یک Firefox Add-on چیست؟

اگر بخوام ساده توضیح بدم، یه Extension (افرونه) یه افزونه(?!) هست که برروی یه سیستم اصلی قرار میگیره تا بتونه قابلیت‌های بیشتری به اون سیستم اضافه کنه یا برخی قابلیت‌هاش رو بهبود ببخشه.

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

حالا یه نگاهی هم به توضیح علمی‌ترش که توسط خود شرکت موزیلا منتشره شده (که اتفاقا خیلی ساده و شیک هم توضیح داده شده!) بندازیم:

یه Extension یه سری ویژگی‌ها و عملکردها رو به مرورگر اضافه میکنه. یه Extension از طریق تکنولوژی‌ها آشنای تحت وب (HTML - CSS - JavaScript) ساخته میشه که میتونه از یه سری APIهای JavaScript داخل صفحه وب برای کارش بهره ببره و در عین حال به مجموعه APIهای خودش هم دسترسی داره!

یه کم از سادگی خارج شد?! ولی توی مقاله‌های بعدی توضیحات بهتر و بیشتری میدم که همه‌چی راحت‌تر بشه. اگه گیج کننده شده به خوندن دوتا جمله اول پاراگراف اکتفا کنید.

توصیه میکنم برای شروع برنامه‌نویسی یه سری به سایت w3schools بزنید.

برای درک بهتر برنامه‌نویسی جاوااسکریپت هم، باحال‌ترین منبعی که دیدم کتاب JavaScript and JQuery: Interactive Front-End Web Development اثر Jon Duckett هست. فوق‌العاده‌ست این بشر!

شروع ساخت اولین افزونه: Borderify

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

از همین الان: سورس کد این افزونه رو شرکت موزیلا توی گیتهاب قرار داده. البته من یه ذره کوچولو دستکاریش میکنم پس دقیقا یکی نیست.

و اینکه برای تستش به فایرفاکس نسخه ۴۵ یا بالاتر نیاز دارید.

خب دیگه بریم سر اصل مطلب:

اول باید یه دایرکتوری جدید برای افزونه‌مون ایجاد کنیم و میریم داخل اون دایرکتوری تا بتونیم افزونه‌مون رو به صورت مستقل و راحت توسعه بدیم. من دستورات ترمینالی مربوطه رو اینجا مینویسم(برای ترمینال‌های غیر ویندوزی! توی ویندوز یه فولدر درست کنید و برید داخلش?(نکته اینکه زیاد با ویندوز حال نمیکنم? پس گاهی راجبش شوخی میکنم)):

mkdir borderify
cd borderify

فایل اول: manifest.json

یه فایل به اسم manifest.json توی دایرکتوری borderify بسازید (با دستور touch manifest.json میتونید اینکار رو انجام بدید) و کدایی که پایین نوشتیم داخلش قرار بدید:

/* This comment is for fix direction in virgool.io inline code editor */
{
  &quotmanifest_version&quot: 2,
  &quotname&quot: &quotBorderify&quot,
  &quotversion&quot: &quot1.0&quot,
  &quotdescription&quot: &quotAdds a red border to all webpages matching mozilla.org.&quot,
  &quoticons&quot: {
    &quot48&quot: &quoticons/border-48.png&quot
  },

  &quotcontent_scripts&quot: [
    {
      &quotmatches&quot: [&quot*://*.mozilla.org/*&quot],
      &quotjs&quot: [&quotborderify.js&quot]
    }
  ]
}

عکس کد رو هم گذاشتم تا ابهامی توش نباشه.

اول یه توضیح راجب فرمت json بدم: json مخفف JavaScript Object Notation (نوشتار شی جاوااسکریپت) هست و در حقیقت توی زبان برنامه‌نویسی javascript اشیاه با این نوشتار نوشته و تعریف میشن. چون نوشتار خیلی منظم و قابل فهم و ساده‌ای داره خوبه که ازش برای تعریف ساختارهای پیکره‌بندی‌ها استفاده میشه و یه جورایی به یه استاندارد تبدیل شده (چیزای مشابهی که میشه استفاده کرد، چیزایی مثل XML هستند که واقعا گریه آدم رو درمیارن!)

خب حالا توضیحات کد بالا:

سه تا کلید اول داخل این کد: manifest_version و name و version تنها چیزای اجباری هستن که حتما باید توی فایل manifest.json ذکر بشن (و جالب اینکه خود فایل manifest.json هم تنها فایل اجباری برای ساخت یه افزونه فایرفاکس هست! حالا خودتون ببینید مینیمال‌ترین حالت یه افزونه چی میتونه باشه?!).
کلید description اختیاری هست اما چون توی صفحه مدیریت افزونه‌ها (توی مرورگر) مستقیما نمایش داده میشه، توصیه میشه پرش کنید و حداقل یه توضیح نسبتا مختصر راجب افزونه‌تون بنویسید.
کلید icons هم اختیاری هست ولی خب افزونه‌تون اگه یه آیکونی داشته باشه بهتره، پس بهتره اینم پر کنید. جلوتر بیشتر راجبش توضیح میدیم.

و اما باحال‌ترین کلیدی که داخل این فایل هست کلید content_scripts هست که به فایرفاکسمون میگه که یه اسکریپت (یه تیکه کد، خواه کوچیک با بزرگ که با کلید js داخلش آدرس‌دهی میشه) رو توی صفحاتی که با مقدار کلید matches مطابق هست بارگذاری و اجرا کنه. اینجا ما میخوایم که اسکریپتی به اسم "borderify.js" رو توی تمام صفحات و زیردامنه‌های "mozilla.org" اعم از HTTP و HTTPS بارگذاری(load) و اجرا کنه.

توضیحات اضافه راجب icon:

اگه میخواید افزونه‌تون یه آیکون داشته باشه (که بازم میگم: زشت میشه اگه نداشته باشه) و این آیکون توی مرورگرتون نمایش داده بشه باید کلیدش رو داخل فایل manifest.json تعریف کنید. کلیدی که اینجا تعریف شده به مرورگرمون میگه توی دایرکتوری icons (که داخل دایرکتوری borderify باید ایجادش کنیم) دنبال یه آیکون به اسم "border-48.png" بگرده. میتونید از همین آیکونی که توی آموزش استفاده شده استفاده کنید یا اگه میخواید یه آیکون دیگه استفاده کنید توجه کنید که اسمش رو داخل فایل manifest.json درست تعریف کنید و سایزش هم همون سایزی باشه که تعریف کردید (که اینجا 48 پیکسل در 48 پیکسل هست). اگه دلتون میخواد میتونید آیکون‌هایی با سایزای دیگه هم تعریف کنید. یه عکس میزارم و فکر نمیکنم نیاز به توضیح بیشتری داشته باشه:

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

و در نهایت برسیم به قسمت کد موضوع که البته یه خط هست(?) و خیلی ساده‌ست:

اول توی دایرکتوری borderify یه فایل به اسم borderify.js میسازیم و کدی که پایین ذکر میکنیم توش قرار میدیم:

document.body.style.border = &quot5px solid red&quot

و البته عکسش رو هم گذاشتیم هرچند نیازی بهش نیست.

این اسکریپتی که نوشتیم توی تمام صفحاتی که الگوش رو توی بخش "content_scripts" فایل manifest.json تعریف کردیم (همون صفحات سایت mozilla.org) بارگذاری و مشابه اسکریپت‌هایی که داخل یه صفحه وب قرار دارن اجرا میشه.

نوشتن افزونه تموم شد. در نهایت دقت کنید که ساختار فایل دایرکتوری borderify به شکل زیر باشه: