1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
---
title: اولین extension شما
slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
---
<div>{{AddonSidebar}}</div>
<p dir="rtl">در این مقاله ما از ابتدا تا انتهای ساخت یک افزونه برای فایر فاکس را با هم مرور میکنیم. این <span id="result_box" lang="fa"><span>افزونه فقط یک </span></span> border <span lang="fa"><span> قرمز را به هر صفحه ای که از «mozilla.org» یا هر کدام از زیر دامنه های آن فراخوانی شده باشد را اضافه میکند .</span></span></p>
<p>منبع کد این مثال بر روی گیت هاب: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p>
<p dir="rtl">در ابتدا شما به فایرفاکس نسخه 45 یا بالاتر نیاز دارید.</p>
<h2 id="نوشتن_extension">نوشتن extension</h2>
<p>یک فولدر جدید ایجاد کنید و به آن بروید. به عنوان مثال ، در خط فرمان / ترمینال خود را اینگونه انجام می دهید:</p>
<pre class="brush: bash">mkdir borderify
cd borderify</pre>
<h3 id="manifest.json">manifest.json</h3>
<p><font>اکنون یک فایل جدید با نام "manifest.json" را مستقیماً در فولدر </font> "borderify" <font> ایجاد کنید.<span> </span>مطالب زیر را به آن بدهید:</font></p>
<pre class="brush: json">{
"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"]
}
]
}</pre>
<ul>
<li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>سه کلید اول:<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/manifest_version" style="margin: 0px; padding: 0px; border: 0px; color: rgb(40, 92, 118); text-decoration: none;">manifest_version</a></code><font><font>،<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/name" style="margin: 0px; padding: 0px; border: 0px; color: rgb(40, 92, 118); text-decoration: none;">name</a></code><font><font>، و<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/version" style="margin: 0px; padding: 0px; border: 0px; color: rgb(40, 92, 118); text-decoration: none;">version</a></code><font><font>، اجباری است و شامل داده های اصلی برای </font></font> extension <font><font> است.</font></font></li>
<li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/description" style="margin: 0px; padding: 0px; border: 0px; color: rgb(40, 92, 118); text-decoration: none;">description</a></code><font><font><span> </span>اختیاری است ، اما توصیه می شود: در </font></font> Add-ons Manager <font><font> نمایش داده می شود.</font></font></li>
<li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/icons" style="margin: 0px; padding: 0px; border: 0px; color: rgb(40, 92, 118); text-decoration: none;">icons</a></code><font><font><span> </span>اختیاری است ، اما توصیه می شود: به شما امکان می دهد یک نماد را برای </font></font> extension <font><font>مشخص کنید ، که در </font></font> Add-ons Manager <font><font> نشان داده خواهد شد.</font></font></li>
</ul>
<p><font><font>جالب ترین نکته اینجاست که<span> </span></font></font><code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/content_scripts" style="margin: 0px; padding: 0px; border: 0px; color: rgb(40, 92, 118); text-decoration: none;">content_scripts</a></code><font><font> به Firefox می گوید یک اسکریپت را در صفحات وب بارگذاری کنید که URL آن با الگوی خاصی مطابقت دارد.<span> </span></font><font>در این حالت ، ما از Firefox می خواهیم یک اسکریپت با نام "borderify.js" را در تمام صفحات HTTP یا HTTPS که از "mozilla.org" یا هر یک از زیر دامنه های آن استفاده می شود بارگیری کند.</font></font></p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts"><font><font>در مورد اسکریپت های محتوا بیشتر بدانید.</font></font></a></li>
<li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns"><font><font>درباره الگوهای مطابقت بیشتر بدانید</font></font></a><font><font><span> </span>.</font></font></li>
</ul>
<div class="warning">
<p><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID"><font><font>در بعضی مواقع باید یک ID برای extension خود تعیین کنید</font></font></a><font><font><span> </span>.<span> </span></font><font>اگر نیاز به </font></font> add-on ID <font><font> دارید</font></font> , کلید <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">برنامه ها</a></code> را در <code>manifest.json</code> قرار دهید و ویژگی <code>gecko.id</code> آن را تنظیم کنید:</p>
<pre class="brush: json">"applications": {
"gecko": {
"id": "borderify@example.com"
}
}</pre>
</div>
<h3 id="iconsborder-48.png">icons/border-48.png</h3>
<p>extension<font> باید یک نماد داشته باشد.<span> تا در کنار لیست </span></font> extension ها در Add-ons Manager <font> نمایش داده شود.<span> </span>manifest.json ما قول داده است كه ما در "</font> icons/border<font>-48.png" نماد داشته باشيم.</font></p>
<p><font><font>فولدر </font></font>"icons" <font><font> را مستقیماً در فولدر </font></font> "borderify" <font><font> ایجاد کنید.<span> </span></font><font>نمادی را در آنجا با نام "border-48.png" ذخیره کنید.<span> </span></font><font>می توانید<span> </span></font></font><a class="external" href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png" rel="noopener"><font><font>از نمونه</font></font></a><font><font><span> </span>این مورد که از نماد Google Material Design طراحی شده است و تحت شرایط<span> </span></font></font><a class="external" href="https://creativecommons.org/licenses/by-sa/3.0/" rel="noopener"><font><font>مجوز Creative Commons Attribution-ShareAlike</font></font></a><font><font><span> </span>استفاده می شود استفاده کنید.</font></font></p>
<p><font><font>اگر می خواهید نماد خود را تهیه کنید ، باید 48x48 پیکسل باشد.<span> </span></font><font>شما همچنین می توانید یک نماد پیکسل 96x96 را برای نمایشگرهای با وضوح بالا تهیه کنید ، و اگر این کار را انجام دهید به عنوان<span> </span></font></font><code>96</code><font><font>خاصیت<span> </span></font></font><code>icons</code> object <font><font> در manifest.json مشخص می شود:</font></font></p>
<pre class="brush: json">"icons": {
"48": "icons/border-48.png",
"96": "icons/border-96.png"
}</pre>
<p><font>روش دیگر ، شما می توانید یک فایل SVG را در اینجا تهیه کنید ، و به درستی اندازه گیری می شود.<span> </span></font><font>(اگرچه: اگر از SVG استفاده می کنید و نماد شما متن را شامل می شود ، ممکن است بخواهید از ابزار "تبدیل به مسیر" ویرایشگر SVG خود برای صاف کردن متن استفاده کنید ، به طوری که با اندازه / موقعیت ثابت سازگار باشد.</font></p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/icons"><font><font>درباره مشخص کردن نمادها بیشتر بدانید.</font></font></a></li>
</ul>
<h3 id="borderify.js">borderify.js</h3>
<p><font>سرانجام ، فایلی به نام "borderify.js" را مستقیماً در فولدر "</font>borderify<font>" ایجاد کنید.<span> </span>این محتوا را به آن بدهید:</font></p>
<pre class="brush: js">document.body.style.border = "5px solid red";</pre>
<p><font><font>این اسکریپت در صفحات مطابقت با الگوی ارائه شده در<span> </span></font></font><code>content_scripts</code><font><font>کلید manifest.json<span> </span></font><font>بارگذاری می شود<span> </span></font><font>.<span> </span></font><font>درست مانند اسکریپت هایی که توسط خود صفحه بارگذاری شده است ، اسکریپت دسترسی مستقیم به اسناد دارد.</font></font></p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts"><font><font>در مورد اسکریپت های محتوا بیشتر بدانید.</font></font></a></li>
</ul>
<h2 id="امتحان_کردن"><font><font>امتحان کردن</font></font></h2>
<p><span>ابتدا بررسی کنید که فایل های مناسب را در فولدرهای مناسب دارید:</span></p>
<pre>borderify/
icons/
border-48.png
borderify.js
manifest.json</pre>
<h3 id="نصب">نصب</h3>
<p> در فایرفاکس : صفحه <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/about:debugging">about:debugging</a> را باز کنید، روی "This Firefox" (در نسخه های جدیدتر فایرفاکس) کلیک کنید، روی "Load Temporary Add-on" کلیک کنید و یکی از فایل ها را از آدرس اصلی extension خود انتخاب کنید</p>
<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
<p>extension اکنون نصب شده است و تا زمانی که فایرفاکس را مجدداً راه اندازی کنید ، باقی خواهد ماند.</p>
<p><font><font>روش دیگر ، می توانید با استفاده از<span> </span></font><font>ابزار<span> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext"><font><font>web-ext</font></font></a><font><font><span> </span>، پسوند را از خط فرمان اجرا<span> </span></font><font>کنید.</font></font></p>
<h3 id="آزمایش_کردن">آزمایش کردن</h3>
<p><span>اکنون سعی کنید از صفحهای تحت "mozilla.org" بازدید کنید</span>، <span>و باید </span> border <span> قرمز را در صفحه مشاهده کنید:</span></p>
<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
<div class="note">
<p><font>هر چند آن را در addons.mozilla.org امتحان نکنید!<span> </span></font><font>اسکریپت های محتوا در حال حاضر در آن دامنه مسدود شده اند</font> .</p>
</div>
<p><font>کمی آزمایش کنید.<span> </span></font><font>اسکریپت محتوا را تغییر دهید تا رنگ حاشیه تغییر کند ، یا کاری دیگر روی محتوای صفحه انجام دهید.<span> </span>اسکریپت محتوا را ذخیره کنید ، سپس فایل های </font> extension <font> را با کلیک کردن روی دکمه </font> "Reload" <font> در </font> about:debugging <font> بارگیری مجدد کنید.<span> </span>می توانید تغییرات را بلافاصله مشاهده کنید:</font></p>
<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox"><font><font>درباره بارگیری برنامه های افزودنی بیشتر بدانید</font></font></a></li>
</ul>
<h2 id="بسته_بندی_و_انتشار"><font><font>بسته بندی و انتشار</font></font></h2>
<p><font><font>برای استفاده افراد دیگر از </font></font> extension <font><font> شما ، باید آن را بسته بندی کرده و برای امضا به موزیلا ارسال کنید.<span> </span></font><font>برای کسب اطلاعات بیشتر در مورد آن ، به<span> </span></font></font> <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publishing your extension"</a><font><font><span> </span>مراجعه کنید.</font></font></p>
<h2 id="بعدی_چیست؟">بعدی چیست؟</h2>
<p><span>اکنون شما یک ایده از روند توسعه یک WebExtension برای Firefox دارید ، سعی کنید:</span></p>
<ul>
<li> <a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_second_WebExtension"><font><font>یک extension پیچیده تر بنویسید</font></font></a></li>
<li><a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension"><font><font>در مورد آناتومی یک extension بیشتر بخوانید</font></font></a></li>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples"><font><font>مثال های extension را کاوش کنید</font></font></a></li>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_"><font><font>اطلاعاتی را برای توسعه، آزمایش و انتشار extension خود بیابید.</font></font></a></li>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_#Continue_your_learning_experience">یادگیری خود را بیشتر کنید</a>.</li>
</ul>
|
