From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../your_first_webextension/index.html | 152 +++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 files/fa/mozilla/add-ons/webextensions/your_first_webextension/index.html (limited to 'files/fa/mozilla/add-ons/webextensions/your_first_webextension/index.html') diff --git a/files/fa/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/fa/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..b3fcdaaa40 --- /dev/null +++ b/files/fa/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,152 @@ +--- +title: اولین extension شما +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +

در این مقاله ما از ابتدا تا انتهای ساخت یک افزونه برای فایر فاکس را با هم مرور میکنیم. این افزونه فقط یک 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"]
+    }
+  ]
+
+}
+ + + +

جالب ترین نکته اینجاست که 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 خود انتخاب کنید

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

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

+ +

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

+ +

آزمایش کردن

+ +

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

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

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

+
+ +

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

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

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

+ +

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

+ +

بعدی چیست؟

+ +

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

+ + -- cgit v1.2.3-54-g00ecf