اولین extension شما

این ترجمه ناتمام است. Please help translate this article from English

در این مقاله ما از ابتدا تا انتهای ساخت یک افزونه برای فایر فاکس را با هم مرور میکنیم. این افزونه فقط یک border قرمز را به هر صفحه ای که از «mozilla.org» یا هر کدام از زیر دامنه های آن فراخوانی شده باشد را اضافه میکند .

منبع کد این مثال بر روی گیت هاب: https://github.com/mdn/webextensions-examples/tree/master/borderify.

در ابتدا شما به فایرفاکس نسخه 45 یا بالاتر نیاز دارید.

نوشتن extension

یک فولدر جدید ایجاد کنید و به آن بروید. به عنوان مثال ، در خط فرمان / ترمینال خود را اینگونه انجام می دهید:

mkdir borderify
cd borderify

manifest.json

اکنون یک فایل جدید با نام "manifest.json" را مستقیماً در فولدر "borderify" ایجاد کنید. مطالب زیر را به آن بدهید:

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a red border to all webpages matching mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]

}
  • سه کلید اول: manifest_version، name، و version، اجباری است و شامل داده های اصلی برای extension است.
  • description اختیاری است ، اما توصیه می شود: در Add-ons Manager نمایش داده می شود.
  • icons اختیاری است ، اما توصیه می شود: به شما امکان می دهد یک نماد را برای extension  مشخص کنید ، که در Add-ons Manager نشان داده خواهد شد.

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

در بعضی مواقع باید یک ID برای extension خود تعیین کنید . اگر نیاز به add-on ID دارید , کلید  برنامه ها را در manifest.json قرار دهید و ویژگی gecko.id آن را تنظیم کنید:

"applications": {
  "gecko": {
    "id": "borderify@example.com"
  }
}

icons/border-48.png

extension باید یک نماد داشته باشد. تا در کنار لیست  extension ها در  Add-ons Manager  نمایش داده شود. manifest.json ما قول داده است كه ما در " icons/border-48.png" نماد داشته باشيم.

فولدر "icons" را مستقیماً در فولدر "borderify" ایجاد کنید. نمادی را در آنجا با نام "border-48.png" ذخیره کنید. می توانید از نمونه این مورد که از نماد Google Material Design طراحی شده است و تحت شرایط مجوز Creative Commons Attribution-ShareAlike استفاده می شود استفاده کنید.

اگر می خواهید نماد خود را تهیه کنید ، باید 48x48 پیکسل باشد. شما همچنین می توانید یک نماد پیکسل 96x96 را برای نمایشگرهای با وضوح بالا تهیه کنید ، و اگر این کار را انجام دهید به عنوان 96خاصیت icons object در manifest.json مشخص می شود:

"icons": {
  "48": "icons/border-48.png",
  "96": "icons/border-96.png"
}

روش دیگر ، شما می توانید یک فایل SVG را در اینجا تهیه کنید ، و به درستی اندازه گیری می شود. (اگرچه: اگر از SVG استفاده می کنید و نماد شما متن را شامل می شود ، ممکن است بخواهید از ابزار "تبدیل به مسیر" ویرایشگر SVG خود برای صاف کردن متن استفاده کنید ، به طوری که با اندازه / موقعیت ثابت سازگار باشد.

borderify.js

سرانجام ، فایلی به نام "borderify.js" را مستقیماً در فولدر "borderify" ایجاد کنید. این محتوا را به آن بدهید:

document.body.style.border = "5px solid red";

این اسکریپت در صفحات مطابقت با الگوی ارائه شده در content_scriptsکلید manifest.json بارگذاری می شود . درست مانند اسکریپت هایی که توسط خود صفحه بارگذاری شده است ، اسکریپت دسترسی مستقیم به اسناد دارد.

امتحان کردن

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

borderify/
    icons/
        border-48.png
    borderify.js
    manifest.json

نصب

 در فایرفاکس : صفحه about:debugging را باز کنید، روی "This Firefox" (در نسخه های جدیدتر فایرفاکس) کلیک کنید، روی "Load Temporary Add-on" کلیک کنید و یکی از فایل ها را از آدرس اصلی extension خود انتخاب کنید

extension اکنون نصب شده است و تا زمانی که فایرفاکس را مجدداً راه اندازی کنید ، باقی خواهد ماند.

روش دیگر ، می توانید با استفاده از ابزار web-ext ، پسوند را از خط فرمان اجرا کنید.

آزمایش کردن

اکنون سعی کنید از صفحهای تحت "mozilla.org" بازدید کنید،  و باید border قرمز را در صفحه مشاهده کنید:

هر چند آن را در addons.mozilla.org امتحان نکنید! اسکریپت های محتوا در حال حاضر در آن دامنه مسدود شده اند .

کمی آزمایش کنید. اسکریپت محتوا را تغییر دهید تا رنگ حاشیه تغییر کند ، یا کاری دیگر روی محتوای صفحه انجام دهید. اسکریپت محتوا را ذخیره کنید ، سپس فایل های extension  را با کلیک کردن روی دکمه "Reload" در about:debugging بارگیری مجدد کنید. می توانید تغییرات را بلافاصله مشاهده کنید:

بسته بندی و انتشار

برای استفاده افراد دیگر از extension شما ، باید آن را بسته بندی کرده و برای امضا به موزیلا ارسال کنید. برای کسب اطلاعات بیشتر در مورد آن ، به  "Publishing your extension" مراجعه کنید.

بعدی چیست؟

اکنون شما یک ایده از روند توسعه یک WebExtension برای Firefox دارید ، سعی کنید: