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
153
|
---
title: Your first extension
slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
tags:
- הרחבות רשת
- מדריך
translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
---
<div>{{AddonSidebar}}</div>
<p>במאמר זה נעבור שלב שלב בפיתוח הרחבה לפיירפוקס, מההתחלה ועד הסיום. כל מה שההרחבה עושה הוא להוסיף רקע אדום לכל דף הנטען מ-"mozilla.org" או כל אחד מתת-המתחמים שלו.</p>
<p>קוד המקור לדוגמא זו נמצא ב- GitHub: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p>
<p>תחילה, יש צורך בפיירפוקס מגירסה 45 ומעלה.</p>
<h2 id="כתיבת_ההרחבה">כתיבת ההרחבה</h2>
<p>יש ליצור תיקייה חדשה ולנווט לתוכה. לדוגמה, משורת הפקודה\מסוף ניתן לבצע זאת כך:</p>
<pre class="brush: bash">mkdir borderify
cd borderify</pre>
<h3 id="manifest.json">manifest.json</h3>
<p>כעת, יש ליצור קובץ בשם "manifest.json" ישירות תחת התיקייה "borderify" . שימו בו את התוכן הבא:</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>שלושת המפתחות הראשונים: <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, ו- <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, הם חובה ומכילים מטאדאטה בסיסית עבור ההרחבה</li>
<li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> הוא אופציונאלי, אך מומלץ: הוא מוצג בבמנהל התוספים</li>
<li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> הוא אופציונאלי, אך מומלץ : הוא מאפשר לך לציין צלמית עבור ההרחבה, שתוצג במנהל התוספים.</li>
</ul>
<p>המפתח המעניין ביותר כאן הוא <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, המגדיר לפיירפוקס איך לטעון תסריט לתוך דפי רשת שכתובת ה- URL שלהם תואמת תבנית מסויימת. במקרה זה, מבקשים מפיירפוקס לטעון תסריט ששמו "borderify.js" אל תוך כל דפי ה-HTTP או HTTPS המוגשים על ידי "mozilla.org" או כל תתי המתחמים שלו.</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">למדו עוד על תסריטי תוכן.</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">למדו עוד על תבניות התאמה</a>.</li>
</ul>
<div class="warning">
<p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_add-on_ID">בכמה מצבים ייתכן ותצטרכו לציין ID עבור ההרחבה</a>. אם יש צורך לציין מזהה תוסף, כללו את המפתח <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">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>ההרחבה צריכה לכלול צלמית. היא תוצג על יד רישום ההרחבה במנהל ההרחבות. הקובץ manifest.json הבטיח שתהיה לנו צלמית ב-"icons/border-48.png".</p>
<p>צרו את התיקייה "icons" ישירות תחת התיקייה "borderify" . שמרו שם צלמית בשם "border-48.png". תוכלו להשתמש <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">בזאת מתוך הדוגמא שלנו</a>, הלקוחה מתוך the Google Material Design iconset, ובשימוש תחת תנאי רשיון ה-<a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a> .</p>
<p>אם תבחרו לספק צלמית משלכם, היא צריכה להיות בגודל 48x48 פיקסלים. תוכלו לספק גם צלמית בגודל 96x96 פיקסלים, לצורך תצוגות ברזולוציה יותר גבוהה, ואם תעשו זאת היא תצויין כתכונת ה-<code>96</code> באובייקט <code>icons</code> אשר ב-manifest.json:</p>
<pre class="brush: json">"icons": {
"48": "icons/border-48.png",
"96": "icons/border-96.png"
}</pre>
<p>לחלופין, תוכלו לספק כאן קובץ SVG , ומימדיו ישונו בהתאם. (למרות ב: אם תשתמשו ב- SVG והצלמית תכלול טקסט, ייתכן שתרצו להשתמש בכלי "convert to path" של עורך ה-SVG כדי לשטח את הטקס , כך שהמידות יותאמו עם size/position עקביים.)</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">למדו עוד על ציון צלמיות.</a></li>
</ul>
<h3 id="borderify.js">borderify.js</h3>
<p>לסיום, צרו קובץ בשם "borderify.js" ישירות תחת התיקייה "borderify" . שימו בו את התוכן הזה:</p>
<pre class="brush: js">document.body.style.border = "5px solid red";</pre>
<p>תסריט זה ייטעאן לתוך דפים התואמים את התבנית הנתונה במפתח <code>content_scriptsב-m</code>anifest.json . לתסריט יש גישה ישירה למסמך כמו לתסקיטים הנטענים על ידי הדף עצמ .</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">למדו עוד על תסריטי תוכן.</a></li>
</ul>
<h2 id="לבדוק_שזה_עובד">לבדוק שזה עובד</h2>
<p>תחילה, בדקו היטב שכל הקבצים נמצאים במקומות הנכונים:</p>
<pre>borderify/
icons/
border-48.png
borderify.js
manifest.json</pre>
<h3 id="התקנה">התקנה</h3>
<p>פתחו את "about:debugging" בפיירפוקס, , הקליקו "טעינת תוספות זמניות..." and ובחרו כל קובץ שהוא בתיקיית ההרחבה:</p>
<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
<p>כעת ההרחבה תותקן, ותישאר עד שתתחילו מחדש את פיירפוקס.</p>
<p>לחלופין, תועלו להריץ את ההרחבה משורת הפקודה באמצעות הכלי <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>.</p>
<h3 id="בדיקה">בדיקה</h3>
<p>כעת נסו לבקר בעמוד תחת "mozilla.org", ותראו רקע אדום מסביב לדף :</p>
<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
<div class="note">
<p>אך אל תנסו זאת ב- addons.mozilla.org! תסריטי תוכן בשלב זה חסומים באותו מתחם.</p>
</div>
<p>ערכו ניסוי קטן. ערכו את תסריט התוכן לשנות את צבע הרקע, או עשו משהו אחר לתוכן הדף. שמרו את תוכן התסריט , ואז טענו את קבצי ההרחבה בהקלקה על קישור ה "טעינה מחדש" ב- about:debugging. תוכלו לראות את השינויים מיד:</p>
<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">למדו עוד על טעינת הרחבות</a></li>
</ul>
<h2 id="אריזה_ופרסום">אריזה ופרסום</h2>
<p>כדי לאפשר לאחרים להשתמש בהרחבתך, יש לארוז אותה ולשלוח למוזילה לחתימה. כדי ללמוד עוד, יש לראות <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"פרסום ההרחבה שלך"</a>.</p>
<h2 id="מה_הלאה">מה הלאה?</h2>
<p>כעת יש לך מושג בנושא תהליך הפיתוח של הרחבות רשת לפיירפוקס , נסה/י:</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">קריאה נוספת אודות האנטומיה של הרחבה</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">כתיבת הרחבות יותר מורכבות</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/API">קריאה אודות ממשקי פיתוח בג'אווהסקריפט הזמינים להרחבות.</a></li>
</ul>
|
