initial commit

21 files changed, 3116 insertions, 0 deletions

diff --git a/files/he/mozilla/add-ons/index.html b/files/he/mozilla/add-ons/index.html
new file mode 100644
index 0000000000..ca718d6324
--- /dev/null
+++ b/files/he/mozilla/add-ons/index.html
@@ -0,0 +1,104 @@
+---
+title: Add-ons
+slug: Mozilla/Add-ons
+tags:
+  - Add-ons
+  - Extension
+  - Extensions
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Add-ons
+---
+<p><span class="seoSummary">Add-ons allow developers to extend and modify the functionality of Firefox.</span> They are written using standard Web technologies - JavaScript, HTML, and CSS - plus some dedicated JavaScript APIs.</p>
+
+<p>Among other things, an add-on could:</p>
+
+<ul>
+ <li>Change the appearance or content of particular websites</li>
+ <li>Modify the Firefox user interface</li>
+ <li>Add new features to Firefox</li>
+</ul>
+
+<p>There are several types of add-ons, but the most common type are extensions.</p>
+
+<h2 id="Developing_extensions">Developing extensions</h2>
+
+<p>In the past, there were several toolsets for developing Firefox extensions, but as of November 2017, extensions must be built using <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions APIs</a>. Other toolsets, such as overlay add-ons, bootstrapped add-ons, and the Add-on SDK, are no longer supported.</p>
+
+<p>If you are writing a new extension, use <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions APIs</a>.</p>
+
+<p>Extensions written using WebExtensions APIs for Firefox are designed to be cross-browser compatible. In most cases, it will run in Chrome, Edge, and Opera with few if any changes. They are also fully compatible with multiprocess Firefox.<br>
+ <br>
+ <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">See the APIs currently supported in Firefox and other browsers</a>. We're continuing to design and implement new APIs in response to developer needs.<br>
+ <br>
+ Most of the WebExtensions APIs are also available on Firefox for Android.</p>
+
+<h3 id="Migrate_an_existing_extension">Migrate an existing extension</h3>
+
+<p>If you maintain a legacy extension, such as an XUL overlay, bootstrapped, or Add-on SDK-based extension, you can still port it to use WebExtension APIs.  There are some <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">porting resources on MDN</a>.</p>
+
+<p>For more information about transition support, please visit our <a href="//wiki.mozilla.org/Add-ons/developer/communication">wiki page.</a></p>
+
+<h2 id="Publishing_add-ons">Publishing add-ons</h2>
+
+<p><a href="https://addons.mozilla.org">Addons.mozilla.org</a>, commonly known as "AMO," is Mozilla's official site for developers to list add-ons, and for users to discover them. By uploading your add-on to AMO, you can participate in our community of users and creators and find an audience for your add-on.</p>
+
+<p>You are not required to list your add-on on AMO, but your add-on must be signed by Mozilla else users will not be able to install it.</p>
+
+<p>For an overview for the process of publishing your add-on see, <a href="/en-US/docs/Mozilla/Add-ons/Distribution">Signing and distributing your add-on</a>.</p>
+
+<h2 id="Other_types_of_add-ons">Other types of add-ons</h2>
+
+<p>In addition to extensions, there are a few other add-on types that allow users to customize Firefox. Those add-ons include:</p>
+
+<ul>
+ <li>
+  <p><a href="/en-US/docs/Web/OpenSearch">Search engine plugins</a> add new search engines to the browser's search bar.</p>
+ </li>
+ <li>
+  <p><a href="/en-US/docs/Mozilla/Creating_a_spell_check_dictionary_add-on">User dictionaries</a> let you spell-check in different languages.</p>
+ </li>
+ <li>
+  <p><a href="https://support.mozilla.org/kb/use-firefox-interface-other-languages-language-pack">Language packs</a> let you have more languages available for the user interface of Firefox. </p>
+ </li>
+</ul>
+
+<h2 id="Contact_us">Contact us</h2>
+
+<p>You can use the links below to get help, keep up to date with news around add-ons and give us feedback.</p>
+
+<h3 id="Add-ons_forum">Add-ons forum</h3>
+
+<p>Use the <a href="https://discourse.mozilla.org/c/add-ons">Add-ons Discourse forum</a> to discuss all aspects of add-on development and to get help.</p>
+
+<h3 id="Mailing_lists">Mailing lists</h3>
+
+<p>Use the <strong>dev-addons</strong> list to discuss development of the add-ons ecosystem, including the development of the WebExtensions system and of AMO:</p>
+
+<ul>
+ <li><a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons list info</a></li>
+ <li><a href="https://mail.mozilla.org/pipermail/dev-addons/">dev-addons archives</a></li>
+</ul>
+
+<h3 id="IRC">IRC</h3>
+
+<p>If you're a fan of IRC (Internet Relay Chat), you can get in touch at:</p>
+
+<ul>
+ <li><a href="irc://irc.mozilla.org/addons">#addons</a> (discussion of the add-ons ecosystem)</li>
+ <li><a href="irc://irc.mozilla.org/webextensions">#webextensions</a> (discussion around the WebExtensions API in particular)</li>
+</ul>
+
+<h3 id="Report_problems">Report problems</h3>
+
+<h4 id="Security_vulnerabilities">Security vulnerabilities</h4>
+
+<p>If you discover a security vulnerability in an add-on, even if it is not hosted on a Mozilla site, let us know and we will work with the developer to correct the issue. Please report them <a href="http://www.mozilla.org/projects/security/security-bugs-policy.html">confidentially </a>in <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=addons.mozilla.org&amp;component=Add-on%20Security&amp;maketemplate=Add-on%20Security%20Bug&amp;bit-23=1&amp;rep_platform=All&amp;op_sys=All">Bugzilla </a>or by emailing <a href="mailto:amo-admins@mozilla.com">amo-admins@mozilla.com</a>.</p>
+
+<h4 id="Bugs_on_addons.mozilla.org_(AMO)">Bugs on addons.mozilla.org (AMO)</h4>
+
+<p>If you find a problem with the site, we'd love to fix it. Please <a href="https://github.com/mozilla/addons/issues/new">file a bug report </a>and include as much detail as possible.</p>
+
+<div>{{AddonSidebar}}</div>
diff --git a/files/he/mozilla/add-ons/themes/index.html b/files/he/mozilla/add-ons/themes/index.html
new file mode 100644
index 0000000000..4c0c59c553
--- /dev/null
+++ b/files/he/mozilla/add-ons/themes/index.html
@@ -0,0 +1,49 @@
+---
+title: Themes
+slug: Mozilla/Add-ons/Themes
+tags:
+  - Add-ons
+  - Look & Feel
+  - NeedsTranslation
+  - Themes
+  - TopicStub
+translation_of: Mozilla/Add-ons/Themes
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Themes allow you to change the look and feel of the user interface and personalize it to your tastes. Learn how to create and share themes!</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 class="Documentation" id="Documentation" name="Documentation">Browser Themes</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Add-ons/Themes/Theme_concepts">Browser theme concepts</a></dt>
+ <dd>Get an introduction to creating themes for the latest versions of Firefox</dd>
+ <dt><a href="/en-US/docs/Mozilla/Add-ons/Themes/Using_the_AMO_theme_generator">Using the AMO theme generator</a></dt>
+ <dd>Use the theme generator to create and submit a new theme to AMO</dd>
+</dl>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">Lightweight Themes</h2>
+
+<div class="warning">
+<p>Lightweight themes have been deprecated and are no longer accepted by AMO. Only browser themes will be accepted going forward.</p>
+</div>
+</div>
+
+<div class="column-half">
+<h2 id="Tools_Resources">Tools &amp; Resources</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">Browser theme manifest.json keys</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme">Browser extensions theme API</a></li>
+ <li><a href="https://discourse.mozilla.org/c/add-ons/themes">Discourse forum</a></li>
+ <li><a href="https://blog.mozilla.org/addons/category/personas/">Theme related blog posts</a></li>
+ <li><a href="/en-US/Mozilla/Add-ons/Themes/Obsolete">Archived resources</a></li>
+</ul>
+</div>
+</div>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/he/mozilla/add-ons/themes/theme_concepts/index.html b/files/he/mozilla/add-ons/themes/theme_concepts/index.html
new file mode 100644
index 0000000000..3ca8dedc96
--- /dev/null
+++ b/files/he/mozilla/add-ons/themes/theme_concepts/index.html
@@ -0,0 +1,248 @@
+---
+title: קונספטי ערכות נושא
+slug: Mozilla/Add-ons/Themes/Theme_concepts
+tags:
+  - ערכת נושא
+  - תוסף
+translation_of: Mozilla/Add-ons/Themes/Theme_concepts
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>ערכות נושא המפותחות באמצעות <a href="/en-US/Add-ons/WebExtensions">Iממשקי פיתוח הרחבות רשת</a> בפיירפוקס מאפשרות לך לשנות את מראה הדפדפן על ידי הוספת תמונות לאיזור הכותרות של דפדפן הפיירפוקס: זהו האזור מאחורי סרגל התפריטים, סרגל הכלים, שדה הכתובת,סרגל החיפוש ופס הלשוניות.</p>
+
+<p>אפשרויות ערכת נושא אלה יכולות להיות מיושמות כערגות נושא סטטיות (למרות שתמונות ערכת הנושא עצמן יכולות להיות מונפשות) או כערכות נושא דינמיות המיוצרות בהרחבת הדפדפן.</p>
+
+<div class="note">
+<p>אם יש לך ערכת נושא קלת משקל היא תומר לפורמט החדש של ערכות נושא באופן אוטומטי לפני שערכות נושא קלות משקל יוצאות משימוש. אין צורך לנייד את ערכת הנושא שלך. אולם, אנא הרגש/י חופשי/ה לעסכן את ערכת הנושא שלך להשתמש בתכונות החדשות המתוארות כאן.</p>
+</div>
+
+<h2 id="ערכות_נושא_סטטיות">ערכות נושא סטטיות</h2>
+
+<p>ערכות נושא סטטיות מצויינות על ידי שימוש במשאבים כגון הרחבות דפדפן: קובץ  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> להגדיר רכיבי ערכת נושא עם רכיבים אלה מאוחסניחם באותה תיקייה כמו הקובץ   manifest.json רו בתת-תיקייה. משאבים אלה נארזים אחר-כך בקובץ דחוס לפרסום ב-  <a href="https://addons.mozilla.org">addons.mozilla.org</a> (AMO) או בהפצה עצמית. למידע נוסף על הפצה עצמית, בקרו ב- <a href="/en-US/docs/Mozilla/Add-ons/Distribution">חתימה והפצה של התוסף שלך</a>.</p>
+
+<p>ץוכלו להשתמש גם ב <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Themes/Using_the_AMO_theme_generator">מחולל ערכות הנושא-ב-</a> AMO ליצור ערכת נושא סטטית. בנוסף, ניתן להשתמש ב- <a href="https://color.firefox.com">Firefox Color</a> לצפות בהתאמות לערכת הנושא של הדפדפן עם אפשרויות לשתף ולייצא ערכת נושא. .</p>
+
+<div class="note">
+<p>ערכת נושא ופונקציונליות של הרחבות דפדפן אינן יכולות להיות מוגדרות בחבילה אחת, כמו לכלול ערכת נושא שתשלים הרחבה. אולם ניתן בדרכים תכנותיות לכלול ערכת נושא בתוך הרחבה באמצעות ממשק הפיתוח של ערכת הנושא. ראו  <a href="#Dynamic_themes">ערכות מושא דינמיות</a>.</p>
+</div>
+
+<h3 id="הגדרץ_ערכת_נושא">הגדרץ ערכת נושא</h3>
+
+<p>ליצירת ערכת נושא (בדוגמא זו ערכת תמונה בודדת פשוטה):</p>
+
+<ul>
+ <li>צרו תיקייה במיקום מתאים על המחשב שלכם.</li>
+ <li>הוסיפו את קובץ תמונת ערכת הנושא בתיקייה:
+  <pre>&lt;mytheme&gt;
+ &lt;your_header_image&gt;.&lt;type&gt;</pre>
+ </li>
+ <li>צרו קובץ בשם manifest.json בתיקייה וערכו את תוכנו כדלהלן :
+  <pre class="brush: json">{
+  "manifest_version": 2,
+  "version": "1.0",
+  "name": "&lt;your_theme_name&gt;",
+  "theme": {
+    "images": {
+      "headerURL": "&lt;your_header_image&gt;.&lt;type&gt;"
+    },
+    "colors": {
+      "accentcolor": "#FFFFFF",
+      "textcolor": "#000"
+    }
+  }
+}
+</pre>
+  כאשר:
+
+  <ul>
+   <li><code>"accentcolor":</code> הוא בצבע הרקע של אזור הכותרות של ערכת הנושא שלכם.</li>
+   <li><code>"</code><code>textcolor</code><code>":</code> צבע הטקסט באזור הכותרות.</li>
+  </ul>
+ </li>
+ <li>ארזו את ערכת הנושא ושלחו ל- AMO, <a href="/en-US/Add-ons/WebExtensions/Publishing_your_WebExtension">במילוי הוראות אלה</a>. ערכות נושא יכוללות להישלח ל- AMO לצורך אירוח או הפצה עצמית.</li>
+</ul>
+
+<h3 id="גישות_ערכת_נושא_סטטית">גישות ערכת נושא סטטית</h3>
+
+<p>קיימות שתי גישות ל"ציור" אזור הכותרת של פיירפוקס :  באמצעות תמונה אחת או באמצעות ריבוי תמונות. ניתן לשלב את שתיהן אך יותר קל להתיחחס לכל אחת בנפרד.</p>
+
+<h4 id="ערכות_נושא_של_תמונה_אחת">ערכות נושא של תמונה אחת</h4>
+
+<p>זו אפשרות ה"ציור" הבסיסית או המינימלית בה ניתן להגדיר:</p>
+
+<ul>
+ <li>תמונה יחידה , המעוגנת לפינה ימנית עליונה של אזור הכותרת .</li>
+ <li>צבע לטקסט הכותרת.</li>
+</ul>
+
+<p>על שטח תמונת הכותרת שלך למלא מקסימום גובה של 200 פיקסלים. מקסימום רוחב התמונה נקבע על ידי הרזולוציה של הצג עליו פיירפוקס מציג ובכמה מהצג פיירפוקס משתמש. בפועל, זאת אומרת שיהיה צורך להתיר קוחב של עד 5120 פיקסלים (לדור הבא של צגי 5K). אולם, על פני יצירת תמונה רחבה מאוד גישה עדיפה היא ליצור תמונה יותר צרה עם קצה שמאלי שקוף כך שהיא תדהה לצבע הרקע. לדוגמא, נוכל להשתמש בתמונה הבאה:</p>
+
+<p><img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left edge fading to total transparency." src="https://mdn.mozillademos.org/files/15215/weta.png" style="height: 200px; width: 406px;"><br>
+ בשילוב עם צבע רקע משלים לליצירת אפקט זה בכותרת<br>
+ <img alt="A single image theme using the weta.png image" src="https://mdn.mozillademos.org/files/15217/basic_theme.png" style="height: 113px; width: 679px;"></p>
+
+<p>ראו פרטים על ערכת נושא זו בדוגמת  <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">ערכות הנושא </a><a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade">weta_fade</a>.</p>
+
+<p>בבירור, ניתן עדיין לספק תמונה רחבה יחידה אם זה עדיף לך.</p>
+
+<h4 id="ערכות_נושא_של_ריבוי_תמונות">ערכות נושא של ריבוי תמונות</h4>
+
+<p>כחלופה ליצירת ערכת נושא בת תמונה אחת, קיימת האופציה להשתמש ביותר תמונות. תמונות אלה יכולות להיות מעוגנות אינדיבידואלית למיקומים בתוך הכותרת, אם האפשרות ליצירת אריח לכל תמונה.</p>
+
+<p>בתלות באפקט שברצונך ליצור ייתכן ויהיה צורך לדכא את התמונה המחוייבת <code>"</code><code>headerURL</code><code>":</code> בתמונה ריקה או שקופה. שימוש בתמונה ריקה או שקופה יעשה , לדוגמא , אם ברצונך להכניס תמונהמיושרת למרכז באריח כמו<br>
+ <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left and right edges fading to total transparency." src="https://mdn.mozillademos.org/files/15219/weta_for_tiling.png" style="height: 200px; width: 270px;"><br>
+ ליצירת האפקס הזה<br>
+ <img alt="A single image theme using the additional images option to align an image to the center of the heading and tile it. " src="https://mdn.mozillademos.org/files/15221/tiled_theme.png" style="height: 113px; width: 679px;"><br>
+ כאן תוכלו לציין תמונת weta כך:</p>
+
+<pre class="brush: json" dir="ltr">"images": {
+  "headerURL": "empty.png",
+  "additional_backgrounds": [ "weta_for_tiling.png"]
+},</pre>
+
+<p dir="ltr">ואת הכנסת התמונות לאריחים כך:</p>
+
+<pre class="brush: json" dir="ltr">"properties": {
+  "additional_backgrounds_alignment": [ "top" ],
+  "additional_backgrounds_tiling": [ "repeat"  ]
+},</pre>
+
+<p>פרטים מלאים אודות איך לאתחל ערכת נושא זו ניתן למצוא בדוגמת  <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">ערכות הנושא</a> <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_tiled">weta_tiled</a>. פאטים מלאים אודות ישור ואפשרויות יצירת אריחים ניתן למצוא ב - <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>.</p>
+
+<p>לחלופין, ניתן להשתמש ביותר מתמונה אחת , למשל בשילוב תמונות ה weta המקוריות עם זאת המעוגנת לשמאל הכותרת<br>
+ <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the right edge fading to total transparency." src="https://mdn.mozillademos.org/files/15223/weta-left.png" style="height: 200px; width: 406px;"><br>
+ ליצירת האפקט<br>
+ <img alt="A theme using the additional images option to place two mirrored image to the left and right of the browser header." src="https://mdn.mozillademos.org/files/15225/multi_image_theme.png" style="height: 113px; width: 679px;"></p>
+
+<p>בו התמונה מצויינת על ידי:</p>
+
+<pre class="brush: json" dir="ltr">"images": {
+  "headerURL": "empty.png",
+  "additional_backgrounds": [ "weta.png", "weta-left.png"]
+},</pre>
+
+<p>והיישור  שלה על ידי:</p>
+
+<pre class="brush: json" dir="ltr">"properties": {
+  "additional_backgrounds_alignment": [ "right top" , "left top" ]
+},</pre>
+
+<p>פרטים מלאים אודות איך לאתחל ערכת נושא זו ניתן למצוא בדוגמת   <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">ערכות הנושא</a>  <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_mirror">weta_mirror</a>. פרטים מלאים אודות אפשרויות היישור ניתן למצוא ב-  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>.</p>
+
+<h3 id="ערכות_נושא_סטטיות_מונפשות">ערכות נושא סטטיות מונפשות</h3>
+
+<p>ניתן ליצור ערכת נושא מונפשת באמצעות פורמט התמונות  APNG , כמו בדוגמת <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">ערכות הנושא</a> <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/animated">animated</a>. אולם, יש לזכור כי אנימציות מהירות כמו זו שבדוגמא יכולה להיות מסיחת דעת מדי עבור ערכת נושא מעשית.</p>
+
+<p>ניתן גם להנפיש ערכות נושא תכנותית, ובזה נדון ב<a href="#Dynamic_themes">ערכות נושא דינמיות</a>.</p>
+
+<h3 id="עדכון_ערכות_נושא_סטטיות">עדכון ערכות נושא סטטיות</h3>
+
+<p>אם ערכת הנושא הסטטית שלך מאורחת ב- AMO, ניתן להעלות גרסה חדשה באמצעות <a href="https://addons.mozilla.org/en-US/developers/">Developer Hub</a> על ידי הצעדים הבאים:</p>
+
+<ol>
+ <li>ביקור בעמוד המוצר עבור ההרחבה שלך דרך  <a href="https://addons.mozilla.org/en-US/developers/">Developer Hub</a></li>
+ <li>בחירת "Upload New Version" בצד שמאל</li>
+ <li>העלאת הקובץ הארוז לוידוא או שינוי באמצעות מחולל ערכות הנושא</li>
+</ol>
+
+<p>עבור ערכות נושא מאורחות עצמית, ניתן להעלות גרסה חדשה דרך AMO על ידי ביצוע הצעדים דלעיל או שיטופלו על ידך דרך כתובת URL מעודכנת  או עדכוני יישום חיצוני. גירסה חדשה תצטרך להיחתם דרך Developer Hub.</p>
+
+<div class="note">
+<p>אם מעלים קובץ ארוז, מספר הגירסה צריךלהיות גבוה ממספר הגרסה הנוכחית.</p>
+</div>
+
+<h2 id="ערכות_נושא_דינמיות">ערכות נושא דינמיות</h2>
+
+<p>כחלופה להגדרת ערכת נושא סטטית, ניתן להשתמש בממשק הפיתוח  {{WebExtAPIRef("theme")}} כדי לשלוט בערכת הנושא שבשימוש על ידי פיירפוקס מתוך הרחבת דפדפן. יש מספר מקרי שימוש באפשרות זו:</p>
+
+<ul>
+ <li>לאחד ערכת נושא עם הרחבת דפדפן, כתוספת.</li>
+ <li>ליצור ערכת נושא דינמית שמשתנה תחת שליטה תכנותית.</li>
+</ul>
+
+<p>וכמובן, ניתן לשלב את השתיים ולאגד ערכת נושא הנשלטת על ידי תכנות עם ההרחבה שלך.</p>
+
+<p>השימוש בממשק ה- {{WebExtAPIRef("theme")}} הוא ישיר. תחילה, יש לבקש <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions"> הרשאת </a> "theme" בקובץ<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json"> manifest.json</a> של ההרחבה. השלב הגא, בונים אובייקט JSON המכיל אותה אינפורמציה שתשתמשו בה בקובץ manifest.json של ערכת נושא סטטית, לבסוף, יש להעביר את אובייקט ה- JSON בקריאת  {{WebExtAPIRef("theme.update()")}}.</p>
+
+<p>לדוגמא, הקוד הבא מתוך  <a href="https://github.com/mdn/webextensions-examples/tree/master/dynamic-theme">dynamic theme example</a> מגדיר את התוכן עבור אלמנטי היום והלילה של ערכת הנושא הדינמית</p>
+
+<pre class="brush: js" dir="ltr">const themes = {
+  'day': {
+    images: {
+     headerURL: 'sun.jpg',
+    },
+    colors: {
+     accentcolor: '#CF723F',
+     textcolor: '#111',
+    }
+  },
+  'night': {
+    images: {
+     headerURL: 'moon.jpg',
+    },
+    colors: {
+     accentcolor: '#000',
+     textcolor: '#fff',
+    }
+  }
+};</pre>
+
+<p>עכת הנושא.אובייקט ערכת הנושא מועבר אז ל- {{WebExtAPIRef("theme.update()")}} לשינוי ערכת הנושא של הכותרת, כבקטע קוד זה מתוך אותה דוגמא</p>
+
+<pre class="brush: js" dir="ltr">function setTheme(theme) {
+  if (currentTheme === theme) {
+    // No point in changing the theme if it has already been set.
+    return;
+  }
+  currentTheme = theme;
+  browser.theme.update(themes[theme]);
+}</pre>
+
+<p>לימדו עוד אודות ערכות נושא דינמיות, וראו דוגמאות נוספות בסרטון הבא::</p>
+
+<p dir="ltr">{{EmbedYouTube("ycckyrUN0AY")}}</p>
+
+<p dir="ltr"></p>
+
+<p>אם טרם יצרת הרחבת דפדפן, צפה/י ב- <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">ההרחבה הראשונה שלך</a> להדרכה צעד-צעד.</p>
+
+<h2 id="תאימות_בין_דפדפנים">תאימות בין דפדפנים</h2>
+
+<p>קיימת תאימות מוגבלת בין ערכות נושא בדפדפנים המובילים. לדפדפן אופרה גישה שונה לחלוטין , וערכות הנושא של  Microsoft Edge אינן פתוחות עדיין למפחתים/ות.</p>
+
+<p>יש איזו שהיא תאימות בין ערכות נושא של פיירפוקס  ועאכות נושא של כרום, בתנאי שהיכולת לנייד ערכת נושא של הרחבה בת תמונה יחידה מפיירפוקס לכרום.  זה נעשה על ידי תיקון המפתחות ב-manifest.json  כלהלן:</p>
+
+<ul>
+ <li><code>"headerURL":</code> ישונה ל- <code>"theme_frame":</code></li>
+ <li><code>"accentcolor":</code> ישונה ל- <code>"frame":</code></li>
+ <li><code>"textcolor":</code> ישונה ל- <code>"tab_background_text":</code></li>
+</ul>
+
+<p>בשתומת לב לכך ש- "frame": ו- "tab_background_text": תומכים רק בהגדרות מערך צבעים  RGB בכרום.</p>
+
+<p>אז, בדוגמת ערכת הנושא בת התמונה היחידה (weta_fade) יכולה להיתמך בכרום  באמצעות קובץ ה-manifest.json הבא:</p>
+
+<pre class="brush: json" dir="ltr">{
+  "manifest_version": 2,
+  "version": "1.0",
+  "name": "&lt;your_theme_name&gt;",
+  "theme": {
+    "images": {
+      "theme_frame": "weta.png"
+    },
+    "colors": {
+      "frame": [ 173 , 176 , 159 ],
+      "tab_background_text": [ 0 , 0 , 0 ]
+    }
+  }
+}</pre>
+
+<p>אולם, יהיו מספר הבדלים</p>
+
+<ul>
+ <li>כרום מכניס תמונות לאריחי <code>“theme_frame”:</code> משמאל אזור הכותרת.</li>
+</ul>
+
+<p dir="ltr"><img alt="The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented." src="https://mdn.mozillademos.org/files/15227/basic_in_chrome.png" style="height: 113px; width: 679px;"></p>
+
+<p>לעוד מידע , ראו רשימות ב-<a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">Chrome compatibility</a>.</p>
diff --git a/files/he/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/he/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html
new file mode 100644
index 0000000000..049dfbd389
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html
@@ -0,0 +1,144 @@
+---
+title: אנטומיה של הרחבה
+slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<p>הרחבה מורכבת מאוסף של קבצים, ארוזים להפצה והתקנה. במאמר זה, נסקור במהירות את הקבצים העשויים להיות נוכחים בהרחבה.</p>
+
+<h2 id="manifest.json">manifest.json</h2>
+
+<p>זהו הקובץ היחיד שחייב להימצא בכל הרחבה הוא כולל מטאדאטה בסיסית כגון שם, גירסה וההרשאות הדרושות. הוא גם מספק מצביעים לקבצים אחרים בהרחבה.</p>
+
+<p>מניפסט זה יכול לכלול גם מצביעים לעוד מספר טיפוסי קבצים </p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/he/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#%D7%AA%D7%A1%D7%A8%D7%99%D7%98%D7%99_%D7%A8%D7%A7%D7%A2">תסריטי רקע</a>: מימוש לוגיקה לטווח רחוק.</li>
+ <li>צלמיות להרחבות ולכל הכפתורים שיוגדרו. .</li>
+ <li><a href="https://wiki.developer.mozilla.org/he/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#%D7%A1%D7%A8%D7%92%D7%9C%D7%99%D7%9D_%D7%A6%D7%93%D7%93%D7%99%D7%99%D7%9D_%D7%97%D7%9C%D7%95%D7%A0%D7%95%D7%AA_%D7%A7%D7%95%D7%A4%D7%A6%D7%99%D7%9D_%D7%93%D7%A4%D7%99_%D7%90%D7%95%D7%A4%D7%A6%D7%99%D7%95%D7%AA">סרגלים צדדיים, חלונות קופצים ודפי אופציות</a>: מסמכי HTML המספקים תוכן לרכיבי ממשק משתמש שונים.</li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">תסריטי תוכן</a>: ג'אווהסקריפט הכלול בהרחבה שלך, שיוחדרו לתוך דפי רשת.</li>
+ <li><a href="https://wiki.developer.mozilla.org/he/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#%D7%A1%D7%A8%D7%92%D7%9C%D7%99%D7%9D_%D7%A6%D7%93%D7%93%D7%99%D7%99%D7%9D_%D7%97%D7%9C%D7%95%D7%A0%D7%95%D7%AA_%D7%A7%D7%95%D7%A4%D7%A6%D7%99%D7%9D_%D7%93%D7%A4%D7%99_%D7%90%D7%95%D7%A4%D7%A6%D7%99%D7%95%D7%AA">משאבים נגישים לרשת</a>: הכנת תוכן ארוז מגיש לדפי רשת ותסריטי תוכן.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13669/webextension-anatomy.png" style="display: block; height: 581px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+
+<p>ראו דף סימוכין לממשק  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> לכל הפרטים.</p>
+
+<p>יחד עם כל אלה הרשומים במניפסט , הרחבה יכולה לכלול גם   <a dir="ltr" href="https://mdn.mozillademos.org/files/11553/browser-action.png">דפי הרחבה</a> נוספים וקבצים תומכים.</p>
+
+<h2 id="תסריטי_רקע">תסריטי רקע</h2>
+
+<p>הרחבות צריכות לעתים קרובות לשמור מצב ארוך טווח או לבצע םעולות ארוכות טווח ללא תלות בזמן החיים של דף רשת זה או אחר או בחלון דפדפן. בשביל זה יש תסריטי רקע.</p>
+
+<p>תסריטי רקע נטענים מייד כאשר ההרחבה נטענת ונשארים טעונים עד שההרחבה מושבתת או מוסרת. נתין להשתמש בכל אחד מ<a href="/en-US/Add-ons/WebExtensions/API">ממשקי פיתוח הרחבות הרשת</a> בתסריט, כל עוד ביקשת את ה<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">הרשאות</a> הדרושות.</p>
+
+<h3 id="ציון_תסריטי_הרקע">ציון תסריטי הרקע</h3>
+
+<p>ניתן לכלול תסריט רקע באמצעות המפתח  <code>background</code>  ב-"manifest.json":</p>
+
+<pre class="brush: json">// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}</pre>
+
+<p>ניתן לציין מספר תסריטי רקע: אם תעשו כן, הם  ירוצו באותו הקשר. , בדיוק כמו תסריטים מרובים הנטענים לתוך דף רשת יחיד.</p>
+
+<p>במקום לציין תסריטי רקע, ניתן לציין דף רקע שיש לו יתרונות נוספים של תמיכה במודולי ES6:</p>
+
+<p style="margin-bottom: 0em;"><strong>manifest.json</strong></p>
+
+<pre class="brush: json">// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}</pre>
+
+<p style="margin-bottom: 0em;"><strong>background-page.html</strong></p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;script type="module" src="background-script.js"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="סביבת_תסריטי_רקע">סביבת תסריטי רקע</h3>
+
+<h4 id="ממשקי_פיותח_DOM">ממשקי פיותח DOM</h4>
+
+<p>תסריטי רקע רצים בהקשר של דף מיוחד הקרוי דף רקע . זה נותן להם את המשתנה הגלובלי <code><a href="/en-US/docs/Web/API/Window">window</a></code>, יחד עם כל ממשקי פיתוח ה-  DOM המסופקים עם אובייקט זה</p>
+
+<div class="blockIndicator warning">
+<p> בפיירפוקס תסריטי רקע אינם תומכים בשימוש ב-, background pages do not support - <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert">alert()</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm">confirm()</a></code>, או <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt">prompt()</a></code>.</p>
+</div>
+
+<h4 id="ממשקי_פיתוח_הרחבות_רשת">ממשקי פיתוח הרחבות רשת</h4>
+
+<p>תסריטי רקע יכולים להשתמש בכל <a href="/en-US/Add-ons/WebExtensions/API">ממשקי פיתוח הרחבות הרשת</a> בתסריט, כל עוד להרחבה יש את <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">ההרשאות</a> הדרושות.</p>
+
+<h4 id="גישה_בין_מקורות">גישה בין מקורות</h4>
+
+<p>תסריטי רקע יכולים ליצור בקשות XHR לכל מארח עבורו יש להם  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">הרשאות מארח</a>.</p>
+
+<h4 id="תוכן_ברשת">תוכן ברשת</h4>
+
+<p>תסריטי רקע אינם מקבלים גישה ישירה לדפי רשת. אולם הם יכולים לטעון,  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">תסריטי תוכן</a> לתוך דפי רשת ויכולים  <a href="/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">לתקשר עם תסריטי תוכן אלה באמצעות ממשקי פיתוח להעברת הודעות</a></p>
+
+<h4 id="מדיניות_אבטחת_תוכן">מדיניות אבטחת תוכן</h4>
+
+<p>תסריטי תוכן מוגבלים מביצוע פעולות בעלות פוטנציאל סיכון , כמו שימוש ב-<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> .דרך מדיניות אבטחת תוכן. ראו <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">מדיניות אבטחת תוכן</a> לפרטים נוספים על כך.</p>
+
+<h2 id="סרגלים_צדדיים_חלונות_קופצים_דפי_אופציות">סרגלים צדדיים, חלונות קופצים, דפי אופציות</h2>
+
+<p>ההרחבה שלך יכולה לכלול רכיבי ממשק משתמש שונים שהתוכן שלהם מוגדר על ידי מסמך HTML :</p>
+
+<ul>
+ <li> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">סרגל צדדי</a> הוא לוח המוצג בצד שמאל של חלון הדפדפן, על יד דף הרשת</li>
+ <li> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">חלון קופץ</a> הוא דיאלוג שניתן להציג כאשר המשתמש/ת מקליקשה על  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">כפתור בסרגל הכלים</a> או <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">כפתור בסרגל הכתובת</a></li>
+ <li> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">דף אופציות</a> הינו דף המוצג כאשר המשתמש/ת ניגש/ת להעדפות שלך במנהל ההרחבות המקומי של הדפדפן.</li>
+</ul>
+
+<p>עבור כל אחד מרכיבים אלה ניתן ליצור קובץ HTML ולהצביע אליו באמצעות תכונה ספציפית ב-  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>. קובץ ה- HTML יכול לכלול  CSS וקבצי ג'אווהסקריפט, בדיוק כמו דף רשת נורמלי.</p>
+
+<p>כל אלה הם טיפוס של  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">דפי הרחבה</a>, ושלא כמו דף רשת רגיל, הג'אווהסקריפט שלך יכול להשתמש בכל אותם ממשקי פיתוח פריבילגיים להרחבות רשת כמו תסריט הרקע. הם יכולים גם לגשת ישירות למשתנים בדך הרקע באמצעות  {{WebExtAPIRef("runtime.getBackgroundPage()")}}.</p>
+
+<h2 id="דפי_הרחבה">דפי הרחבה</h2>
+
+<p>ניתן לכלול בהרחבה שלך  גם מסמכי  HTML שאינם מחוברים לרכיב ממשק משתמש מוגדר מראש כלשהו . שלא כמו מסמכים שניתן לספק עבור סרגלים צדדיים, חלונות קופצים, או דפי אופציות, אין להם הגדרה ב- manifest.json. אולם , יש להם גישה לכל אותם ממשקי פיתוח הרחבות רשת פריבילגיים כמו תסריט הרקע שלך.</p>
+
+<p>באופן טיפוסי, דף כזה ייטען באמצעות  {{WebExtAPIRef("windows.create()")}} או {{WebExtAPIRef("tabs.create()")}}.</p>
+
+<p>ראו <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">דפי הרחבה</a> כדי ללמוד עוד.</p>
+
+<h2 id="Content_scripts">Content scripts</h2>
+
+<p>Use content scripts to access and manipulate web pages. Content scripts are loaded into web pages and run in the context of that particular page.</p>
+
+<p>Content scripts are extension-provided scripts which run in the context of a web page; this differs from scripts which are loaded by the page itself, including those which are provided in {{HTMLElement("script")}} elements within the page.</p>
+
+<p>Content scripts can see and manipulate the page's DOM, just like normal scripts loaded by the page.</p>
+
+<p>Unlike normal page scripts, they can:</p>
+
+<ul>
+ <li>Make cross-domain XHR requests.</li>
+ <li>Use a small subset of the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">WebExtension APIs</a>.</li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">Exchange messages with their background scripts</a> and can in this way indirectly access all the WebExtension APIs.</li>
+</ul>
+
+<p>Content scripts cannot directly access normal page scripts but can exchange messages with them using the standard <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage()</a></code> API.</p>
+
+<p>Usually, when we talk about content scripts, we are referring to JavaScript, but you can inject CSS into web pages using the same mechanism.</p>
+
+<p>See the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> article to learn more.</p>
+
+<h2 id="משאבים_נגישים_לרשת">משאבים נגישים לרשת</h2>
+
+<p>משאבים נגישים לרשת עם משאבים כגון תמונות, HTML, CSS, ו- JavaScript הנכללים בהרחבה  וייתכן שתרצו לאפשר להם גישה לתסריטי תוכן ותסריטי דף. ניתן להפנות למשאבים הנוצרים נגישים לרשת על ידי תסריטי דף ותסריטי תוכן באמצעות סכמת   URI מיוחדת.</p>
+
+<p>לדוגמא, אם תסריט תוכן מעוניין להכניס קצת תמונות לתוך דפי רשת , ניתן לכלול אותם בהרחבה ולעשות אותם נגישים לרשת . אז תסריט התוכן יכול ליצור ולהוסיף תגיות   <code><a href="/en-US/docs/Web/HTML/Element/img">img</a></code> המפנות לתמונות דרך המאפיין <code>src</code>.</p>
+
+<p>כדי ללמוד עוד, אטו טת התיעוד עבור המפתח <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a>  ב-manifest.json .</p>
diff --git a/files/he/mozilla/add-ons/webextensions/api/alarms/index.html b/files/he/mozilla/add-ons/webextensions/api/alarms/index.html
new file mode 100644
index 0000000000..30a42d1d02
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/api/alarms/index.html
@@ -0,0 +1,60 @@
+---
+title: השכמות
+slug: Mozilla/Add-ons/WebExtensions/API/alarms
+tags:
+  - API
+  - הרחבות
+  - הרחבות רשת
+  - השכמות
+  - ממשק
+  - ממשק פיתוח
+  - סימוכין
+translation_of: Mozilla/Add-ons/WebExtensions/API/alarms
+---
+<div>{{AddonSidebar}}</div>
+
+<p>מתזמנות קוד לרוץ בזמן שצויין. זה כמו <code><a href="/en-US/docs/Web/API/WindowTimers/setTimeout">setTimeout()</a></code> ו- <code><a href="/en-US/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code>, פרט לכך שפונקציות אלה לא עובדות עם דפי רקע הנטענים על פי דרישה. השכמות אינן מתמידות לאורך מפגשי הדפדפן.</p>
+
+<p>לשימוש בממשק פיתוח זה יש לכלול   <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">הרשאת</a> "alarms".</p>
+
+<h2 id="טיפוסים">טיפוסים</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("alarms.Alarm")}}</dt>
+ <dd>מידע אודות השכמה מסוימת.</dd>
+</dl>
+
+<h2 id="שיטות">שיטות</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("alarms.clear()")}}</dt>
+ <dd>מחק השכמה מסויימת בהינתן שמה.</dd>
+ <dt>{{WebExtAPIRef("alarms.clearAll()")}}</dt>
+ <dd>מחק את כל ההשכמות המתוזמנות.</dd>
+ <dt>{{WebExtAPIRef("alarms.create()")}}</dt>
+ <dd>צור השכמה חדשה.</dd>
+ <dt>{{WebExtAPIRef("alarms.get()")}}</dt>
+ <dd>שלוף השכמה מסויימת בהינתן שמה.</dd>
+ <dt>{{WebExtAPIRef("alarms.getAll()")}}</dt>
+ <dd>שלוף את כל ההשכמות המתוזמנות.</dd>
+</dl>
+
+<h2 id="אירועים">אירועים</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("alarms.onAlarm")}}</dt>
+ <dd>משוגר כאשר מגיע זמן ההשכמה.</dd>
+</dl>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<h2 id="תאימות_דפדפנים">תאימות דפדפנים</h2>
+
+<p>{{Compat("webextensions.api.alarms")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>ממשק פיתוח זה מבוסס על ממשק הפיתוח <a href="https://developer.chrome.com/extensions/alarms"><code>chrome.alarms</code></a> של כרומיום.</p>
+
+<p>מידע התאימות של Microsoft Edge סופק על ידי תאגיד מיקרוסופט וכלול פה תחת רשיון Creative Commons Attribution 3.0 ארה"ב.</p>
+</div>
diff --git a/files/he/mozilla/add-ons/webextensions/api/browseraction/index.html b/files/he/mozilla/add-ons/webextensions/api/browseraction/index.html
new file mode 100644
index 0000000000..195f81d304
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/api/browseraction/index.html
@@ -0,0 +1,124 @@
+---
+title: browserAction
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction
+translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction
+---
+<div>{{AddonSidebar}}</div>
+
+<p>מוסיף כפתור לסרגל הכלים של הדפדפן.</p>
+
+<p> <a href="/he/docs/Mozilla/Add-ons/WebExtensions/Browser_action">פעולת דפדפן</a> הינה כפתור בסרגל הכלים של הדפדפן.</p>
+
+<p>ניתן לקשר חלון קופץ עם הכפתור. החלון הקופץ מצויין באמצעות HTML, CSS וג'אווה-סקריפט , בדומה לדף רשת רגיל. לקוד ג'אווה-סקריפט המורץ בחלון הקופץ גישה לכל ממשקי פיתוח היישומים של הרחבת הרשת כמו תסריטי הרקע שלך, אך ההקשר הגלובלי שלו הוא החלון הקופץ, ולא הדף הנוכחי המוצג על ידי הדפדפן. כדי להספיע לע הדפים מהרשת יש לתקשר איתם דרך  <a href="/en-US/Add-ons/WebExtensions/Modify_a_web_page#Messaging">messages</a>.</p>
+
+<p>If you specify a popup, it will be shown — and the content will be loaded — when the user clicks the icon. If you do not specify a popup, then when the user clicks the icon an event is dispatched to your extension.</p>
+
+<p>You can define most of a browser action's properties declaratively using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> key in the manifest.json.</p>
+
+<p>With the <code>browserAction</code> API, you can:</p>
+
+<ul>
+ <li>use {{WebExtAPIRef("browserAction.onClicked")}} to listen for clicks on the icon.</li>
+ <li>get and set the icon's properties — icon, title, popup, and so on. You can get and set these globally across all tabs, or for a specific tab by passing the tab ID as an additional argument.</li>
+</ul>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("browserAction.ColorArray")}}</dt>
+ <dd>An array of four integers in the range 0-255 defining an RGBA color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.ImageDataType")}}</dt>
+ <dd>Pixel data for an image. Must be an <code><a href="/en-US/docs/Web/API/ImageData">ImageData</a></code> object (for example, from a {{htmlelement("canvas")}} element).</dd>
+</dl>
+
+<h2 id="Functions">Functions</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("browserAction.setTitle()")}}</dt>
+ <dd>Sets the browser action's title. This will be displayed in a tooltip.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getTitle()")}}</dt>
+ <dd>Gets the browser action's title.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setIcon()")}}</dt>
+ <dd>Sets the browser action's icon.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setPopup()")}}</dt>
+ <dd>Sets the HTML document to be opened as a popup when the user clicks on the browser action's icon.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getPopup()")}}</dt>
+ <dd>Gets the HTML document set as the browser action's popup.</dd>
+ <dt>{{WebExtAPIRef("browserAction.openPopup()")}}</dt>
+ <dd>Open the browser action's popup.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setBadgeText()")}}</dt>
+ <dd>Sets the browser action's badge text. The badge is displayed on top of the icon.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getBadgeText()")}}</dt>
+ <dd>Gets the browser action's badge text.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setBadgeBackgroundColor()")}}</dt>
+ <dd>Sets the badge's background color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getBadgeBackgroundColor()")}}</dt>
+ <dd>Gets the badge's background color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setBadgeTextColor()")}}</dt>
+ <dd>Sets the badge's text color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getBadgeTextColor()")}}</dt>
+ <dd>Gets the badge's text color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.enable()")}}</dt>
+ <dd>Enables the browser action for a tab. By default, browser actions are enabled for all tabs.</dd>
+ <dt>{{WebExtAPIRef("browserAction.disable()")}}</dt>
+ <dd>Disables the browser action for a tab, meaning that it cannot be clicked when that tab is active.</dd>
+ <dt>{{WebExtAPIRef("browserAction.isEnabled()")}}</dt>
+ <dd>Checks whether the browser action is enabled or not.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("browserAction.onClicked")}}</dt>
+ <dd>Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("webextensions.api.browserAction")}}</p>
+
+<div class="hidden note">
+<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p>
+
+<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p>
+</div>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/browserAction"><code>chrome.browserAction</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json"><code>browser_action.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre class="notranslate">// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/he/mozilla/add-ons/webextensions/api/index.html b/files/he/mozilla/add-ons/webextensions/api/index.html
new file mode 100644
index 0000000000..4cbd4a2a8a
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/api/index.html
@@ -0,0 +1,55 @@
+---
+title: ממשקי פיתוח יישומים בג'אווה-סקריפט
+slug: Mozilla/Add-ons/WebExtensions/API
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Add-ons/WebExtensions/API
+---
+<div>{{AddonSidebar}}</div>
+
+<div>
+<p>בממשקי פיתוח היישומים עבור הרחבות רשת בג'אווה-סקריפט ניתן להשתמש בתוך</p>
+
+<p>  <a href="https://wiki.developer.mozilla.org/he/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#%D7%AA%D7%A1%D7%A8%D7%99%D7%98%D7%99_%D7%A8%D7%A7%D7%A2">תסריטי הרקע</a> של ההרחבה ובכל המסמכים האחרים הכלולים בהרחבה, כולל  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> or <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">page action</a> popups, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">sidebars</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">options pages</a>, or <a href="/en-US/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">new tab pages</a>. A few of these APIs can also be accessed by an extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">content scripts</a> (see the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">list in the content script guide</a>).</p>
+
+<p>To use the more powerful APIs you need to <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">request permission</a> in your extension's manifest.json.</p>
+
+<p>You can access the APIs using the <code>browser</code> namespace:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<div>
+<p>Many of the APIs are asynchronous, returning a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span>okie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<div>
+<p>Note that this is different from Google Chrome's extension system, which uses the <code>chrome</code> namespace instead of <code>browser</code>, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports <code>chrome</code> and callbacks as well as <code>browser</code> and promises. Mozilla has also written a polyfill which enables code that uses <code>browser</code> and promises to work unchanged in Chrome: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p>
+
+<p>Firefox also implements these APIs under the <code>chrome</code> namespace using callbacks. This allows code written for Chrome to run largely unchanged in Firefox for the APIs documented here.</p>
+
+<p>Microsoft Edge uses the <code>browser</code> namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.</p>
+
+<p>Not all browsers support all the APIs: for the details, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a>.</p>
+
+<h2 id="JavaScript_API_listing">JavaScript API listing</h2>
+
+<p>See below for a complete list of JavaScript APIs:</p>
+</div>
+
+<div>{{SubpagesWithSummaries}}</div>
diff --git a/files/he/mozilla/add-ons/webextensions/api/storage/index.html b/files/he/mozilla/add-ons/webextensions/api/storage/index.html
new file mode 100644
index 0000000000..f866b07efa
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/api/storage/index.html
@@ -0,0 +1,102 @@
+---
+title: storage
+slug: Mozilla/Add-ons/WebExtensions/API/storage
+translation_of: Mozilla/Add-ons/WebExtensions/API/storage
+---
+<div>{{AddonSidebar}}</div>
+
+<p>מאפשר להרחבות לאחסן ולשלוף נתונים, ולהאזין לשינויים בפריטים המאוחסנים.</p>
+
+<p>מערכת האחסון מבוססת על <a href="/he/docs/Web/API/Web_Storage_API">ממשק פיתוח היישומים Web Storage</a>, עם מספר הבדלים. בין ההבדלים ניתן למצוא כי:</p>
+
+<ul>
+ <li>היא אסינכרונית.</li>
+ <li>הערכים הם בתוחם של ההרחבה, לא של מתחם כלשהו (כלומר. אותה קבוצה של זוגות מפתח/ערך זמינה לכל התסריטים בהקשר הרקע ובתסריטי התוכן).</li>
+ <li>הערכים המאוחסנים יכולים להיות כל ערך הניתן לסריאליזציית , לא רק <code><a href="/he/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. בין היתר, זה כולל: <code><a href="/he/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> ו-<code><a href="/he/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>, אך רק כשהתוכן שלהם יכול להיות מיוצג ב- JSON, שאינו כולל צמתי DOM. אין צורך בהסבת הערים למחרוזות JSON בטרם יאוחסנו, אך הם מיוצגים פנימית כערכי JSON, ולכן הדרישה כי יוכלו להיות מיוצגים בפורמט JSON.</li>
+ <li>ניתן לקבוע ערכם של  זוגות מפתח/ערך מרובים יכולים  או לשלוף אותם באותה קריאה לממשק פיתוח היישומים.</li>
+</ul>
+
+<p>To use this API you need to include the <code>"storage"</code> <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> in your <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></code> file.</p>
+
+<p>Each extension has its own storage area, which can be split into different types of storage.</p>
+
+<p>Although this API is similar to {{domxref("Window.localStorage")}} it is recommended that you don't use <code>Window.localStorage</code> in the extension code to store extension-related data. Firefox will clear data stored by extensions using the localStorage API in various scenarios where users clear their browsing history and data for privacy reasons, while data saved using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/local">storage.local</a></code> API will be correctly persisted in these scenarios.</p>
+
+<p>You can examine the stored data under the Extension Storage item in the <a href="/en-US/docs/">Storage Inspector</a> tab of the <a href="https://extensionworkshop.com/documentation/develop/debugging/">developer toolbox</a>, accessible from <code>about:debugging</code>.</p>
+
+<div class="note">The storage area is not encrypted and shouldn't be used for storing confidential user information.</div>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.StorageArea")}}</dt>
+ <dd>An object representing a storage area.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageChange")}}</dt>
+ <dd>An object representing a change to a storage area.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><code>storage</code> has three properties, which represent the different types of available storage area.</p>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.sync")}}</dt>
+ <dd>Represents the <code>sync</code> storage area. Items in <code>sync</code> storage are synced by the browser, and are available across all instances of that browser that the user is logged into, across different devices.</dd>
+ <dt>{{WebExtAPIRef("storage.local")}}</dt>
+ <dd>Represents the <code>local</code> storage area. Items in <code>local</code> storage are local to the machine the extension was installed on.</dd>
+ <dt>{{WebExtAPIRef("storage.managed")}}</dt>
+ <dd>Represents the <code>managed</code> storage area. Items in <code>managed</code> storage are set by the domain administrator and are read-only for the extension. Trying to modify this namespace results in an error.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.onChanged")}}</dt>
+ <dd>Fired when one or more items change in a storage area.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("webextensions.api.storage")}}</p>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre class="notranslate">// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/he/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/he/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html
new file mode 100644
index 0000000000..90b11fb246
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html
@@ -0,0 +1,24 @@
+---
+title: Browser support for JavaScript APIs
+slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
+tags:
+  - הרחבות רשת
+  - סימוכין
+translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
+---
+<div>{{AddonSidebar}}</div>
+
+<div class="hidden">תאימות הטבלאות בעמוד זה מופקת מנתונים במבנה. אם ברצונך לתרום למידע זה,נא לשלוף קבצים לעריכה מ- <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ולשלוח לנו בקשת משיכה..</div>
+
+<p>{{WebExtAllCompatTables}}</p>
+
+<div class="note"><strong>תודות</strong>
+
+<p>נתוני התאימות לדפדפן Microsoft Edge מסופקים על ידי תאגיד מיקרוסופט ונכללים כאם ץחת רשיון Creative Commons Attribution 3.0 ארה"ב.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">Browser compatibility for manifest.json</a></li>
+</ul>
diff --git a/files/he/mozilla/add-ons/webextensions/content_scripts/index.html b/files/he/mozilla/add-ons/webextensions/content_scripts/index.html
new file mode 100644
index 0000000000..727114978d
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/content_scripts/index.html
@@ -0,0 +1,493 @@
+---
+title: תסריטי תוכן
+slug: Mozilla/Add-ons/WebExtensions/Content_scripts
+tags:
+  - הרחבות רשת
+translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts
+---
+<div>{{AddonSidebar}}</div>
+
+<p>תסריט תוכן הוא חלק מההרחבה שלך שרץ בהקשר של דף מסויים ברשת  (בניגוד לתסריטי רקע שהם חלק מהרחבה, או תסריטים שהם חלק מאתר הרשת עצמו , כגון אלה הנטענים באמצעות אלמנט ה-{{HTMLElement("script")}} ).</p>
+
+<p><a href="/en-US/Add-ons/WebExtensions/Background_scripts">תסריטי רקע</a> יכולים לגשת לכל  <a href="/en-US/Add-ons/WebExtensions/API">ממשקי הפיתוח בג'אווהסקריפט של הרחבות הרשת</a>,   אך אינם ניגשים ישירות לתוכן של עמודי רשת.  לכן אם ההרחבה שלך צריכה לעשות זאת, עליך לכתוב תסריט תוכן.</p>
+
+<p>בדיוק כפי שהתסריטים נטענים על ידי דפי רשת נורמליים, תסריטי תוכן יכולים לקרוא ולשנות תוכן הדפים שלהם באמצעות ממשקי פיתוח יישומי DOM.</p>
+
+<p>תסריטי תוכן יכולים לגשת רק ל<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">תת קבוצה קטנה של ממשקי פיתוח הרחבות הרשת</a>,   אך <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">לתקשר עם תסריטי רקע</a> באמצעות מערכת שליחת הודעות, ובאמצעותן לגשת בעקיפין לממשקי הפיתוח של הרחבות הרשת.</p>
+
+<div class="note">
+<p>לתשומת לבך תסריטי תוכן חסומים במתחמים הבאים:</p>
+
+<ul style="display: grid;">
+ <li>accounts-static.cdn.mozilla.net</li>
+ <li>accounts.firefox.com</li>
+ <li>addons.cdn.mozilla.net</li>
+ <li>addons.mozilla.org</li>
+ <li>api.accounts.firefox.com</li>
+ <li>content.cdn.mozilla.net</li>
+ <li>content.cdn.mozilla.net</li>
+ <li>discovery.addons.mozilla.org</li>
+ <li>input.mozilla.org</li>
+ <li>install.mozilla.org</li>
+ <li>oauth.accounts.firefox.com</li>
+ <li>profile.accounts.firefox.com</li>
+ <li>support.mozilla.org</li>
+ <li>sync.services.mozilla.com</li>
+ <li>testpilot.firefox.com</li>
+</ul>
+
+<p>נסיון להחדיר תסריט תוכן לאתרים אלה ייכשל טהעמוד ירשום שגיאת  <a href="/en-US/docs/Web/HTTP/CSP">CSP</a> ללוג.</p>
+
+<p>משום שמגבלות אלו כוללות את  addons.mozilla.org, משתמשים עשויים לנסות להשתמש בהרחבה שלך מיד אחרי ההתקנה —רק כדי לגלות שאינה עובדת! ייתכן ותרצה/י להוסיף אזהרה הולמת, או   <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/onboarding_upboarding_offboarding_best_practices">דף onboarding</a> להרחיק משתמשים מ- addons.mozilla.org.</p>
+</div>
+
+<div class="note">
+<p>ערכים הנוספים לסקופ הגלובלי של תסריט תוכן באמצעות <code>var foo</code> או <code>window.foo = "bar"</code> עלולים להיעלם עקב באג <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1408996">1408996</a>.</p>
+</div>
+
+<h2 id="טעינת_תסריט_תוכן">טעינת תסריט תוכן</h2>
+
+<p>ניתן לטעון תסריט תוכן לאתר רשת בשלוש דרכים:</p>
+
+<ol>
+ <li><strong>בעת ההתקנה, לתוך דפים התואמים תבניות URL:</strong> באמצעות מפתח ה-<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> בקובץ ה-manifest.json שלך, ניתן  לבקש מהדפדפן לטעון תסריט תוכן בכל פעם שהדפדפן מעלה דף שה-URL שלו <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">תואם תבנית נתונה</a>.</li>
+ <li><strong>בזמן ריצה, לתוך דפים התואמים תבניתו URL :</strong> באמצעות ממשק פיתוח היישומים {{WebExtAPIRef("contentScripts")}} API, ניתן לבקש מהדפדפן לטעון  תסריט תוכן בכל ]עפ שהדפדפן טוען דף שה-URL שלו  <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">תואם תבנית נתונה matches a given pattern</a>. זה בפשטות כמו בשיטה  (1), פרט לכך שניתן להוסיף ולהסיר תסריט תוכן בזמן ריצה.</li>
+ <li><strong>בזמן ריצה, לתוך לשוניות מסוימות  into specific tabs:</strong> באמצאות צצשק הפיתוח  <code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/executeScript">tabs.executeScript()</a></code> , ניתן לטעון תסריט תוכן בכל עת שיהיה ברצונך: למשל, סתגובה להקשת משתמש/ת על <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">פעולת דפדפן</a>.</li>
+</ol>
+
+<p><em>קיים רק סקופ גלובלי אחד למסגרת, להרחבה</em>. זאת אומרת שניתן לגשת למשתני תסריט תוכן אחד ישירות על ידי תסריט תוכן אחר , ללא קשר לדרך בה נטען תסריט התוכן.</p>
+
+<p>באמצעות שיטות (1) ו- (2), ניתן לטעון תסריטים לתוך דפים שה- URL-ים שלהם  יכולים להיות מיוצגים באמצעות <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">תבניות התאמה</a>.</p>
+
+<p>באמצעות שיטה (3), ניתן גם לטעון תסריטים לתוך דפים ארוזים עם ההרחבה שלך, אך לא ניתן לטעון תסריטים לתוך דפי דפדפן בעלי פריבילגיה  (כגון "about:debugging" או "about:addons").</p>
+
+<h2 id="סביבת_תסריטי_תוכן">סביבת תסריטי תוכן</h2>
+
+<h3 id="גישה_ל-DOM">גישה ל-DOM</h3>
+
+<p>תסריטים יכולים לגשת ולשנות את ה-DOM של הדף , בדיוק כפי שיכולים לעשות זת תסריטי דף נורמליים. הם יכולים לראות גם שינווים שנעשו ב- DOM על ידי תסריטי דפים.</p>
+
+<p>אולם, תסריטי תוכן מקבלים "מראה נקי של ה-DOM". כלומר::</p>
+
+<ul>
+ <li>תסריטי תוכן אינם יכולים לראות משתני ג'אווהסקריפט המוגדרים על ידי תסריטי דף.</li>
+ <li>אם תסריט דף משנה תכונה מובנית ב- DOM , תפריט התוכן יראה את הגרסה המקורית של התכונה, ולא את הגרסה המוגדרת מחדש.</li>
+</ul>
+
+<p>בפיירפוקס התנהגות זו קרויה <a href="/en-US/docs/Xray_vision">ראיית רנטגן</a>.</p>
+
+<p>חשבו על דף רשת כזה:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;script src="page-scripts/page-script.js"&gt;&lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>התסריט "page-script.js" עושה את זה:</p>
+
+<pre class="brush: js">// page-script.js
+
+// add a new element to the DOM
+var p = document.createElement("p");
+p.textContent = "This paragraph was added by a page script.";
+p.setAttribute("id", "page-script-para");
+document.body.appendChild(p);
+
+// define a new property on the window
+window.foo = "This global variable was added by a page script";
+
+// redefine the built-in window.confirm() function
+window.confirm = function() {
+  alert("The page script has also redefined 'confirm'");
+}</pre>
+
+<p>כעת  הרחבה מחדירה תסריט תוכן לתוך הדף:</p>
+
+<pre class="brush: js">// content-script.js
+
+// can access and modify the DOM
+var pageScriptPara = document.getElementById("page-script-para");
+pageScriptPara.style.backgroundColor = "blue";
+
+// can't see page-script-added properties
+console.log(window.foo);  // undefined
+
+// sees the original form of redefined properties
+window.confirm("Are you sure?"); // calls the original window.confirm()</pre>
+
+<p>אותו הדבר נכון גם להיפך: תסריטי דף אינם יכולים לראות משתני ג'אווהסקריפט  שנוספו על ידי תסריטי תוכן</p>
+
+<p>זאת אומרת שתסריטי תוכן יכולים להסתמך על תכונות  DOM שהתנהגותן צפויה. , בלי להיות מודאגים מהתנגשויות משתנים עם משתנים מתסריטי הדף.</p>
+
+<p>אחת ההשלכות המעשיות של התנהגות זו היא שלתסריט תוכן לא תהיה גישה לאף ספריית ד'אווהסקריפט שנטענה על ידי הדף. לכן לדוגמא, אם דף מכיל jQuery, תסריט התוכן לא יוכל לראותו.</p>
+
+<p>היה ותסריט תוכן כן רוצה להשתמש בספריית ג'אווהסקריפט, הספריה עצנה צריכה להיות מוחדרת כתסריט תוכן לצד תסריט התוכן המעוניין להשתמש בה::</p>
+
+<pre class="brush: json">"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["jquery.js", "content-script.js"]
+  }
+]</pre>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לבך:</strong> פיירפוקס <em>כן</em> מספק כמה ממשקי פיתוח יישומים המאפשרים לתסריטי תוכן לגשת לאובייקטי ג'אווהסקריפט הנוצרים על ידי תסריטי דף, ולחשוף את אובייקטי הג'אווהסקריפט שלהם לתסריטי דף.</p>
+
+<p>ראו  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">שיתוף אובייקטים עם תסריטי דף</a> לפרטים נוספים.</p>
+</div>
+
+<h3 id="ממשקי_פיתוח_יישומים_של_הרחבות_רשת">ממשקי פיתוח יישומים של הרחבות רשת</h3>
+
+<p>בנוסף לממשקי הפיתוח הסטנדרטיים של ה-DOM , ,תסריטי התוכן יכולים להשתמש בממשקי פיתוח היישומים הבאים של הרחבות הרשת:</p>
+
+<p>מתוך <code><a href="/en-US/Add-ons/WebExtensions/API/extension">extension</a></code>:</p>
+
+<ul>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/extension#getURL()">getURL()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/extension#inIncognitoContext">inIncognitoContext</a></code></li>
+</ul>
+
+<p>מתוך <code><a href="/en-US/Add-ons/WebExtensions/API/runtime">runtime</a></code>:</p>
+
+<ul>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#connect()">connect()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#getManifest()">getManifest()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#getURL()">getURL()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onConnect">onConnect</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onMessage">onMessage</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#sendMessage()">sendMessage()</a></code></li>
+</ul>
+
+<p>מתוך <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n">i18n</a></code>:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getMessage">getMessage()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getAcceptLanguages">getAcceptLanguages()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getUILanguage">getUILanguage()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/detectLanguage">detectLanguage()</a></code></li>
+</ul>
+
+<p>מתוך <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus">menus</a></code>:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement">getTargetElement</a></code></li>
+</ul>
+
+<p>הכל מתוך <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code>.</p>
+
+<h3 id="XHR_ו-Fetch">XHR ו-Fetch</h3>
+
+<p>.תסריטי תוכן יכולים להכין בקשות באמצעות ממשקי פיתוח היישומים <code><a href="/en-US/docs/Web/API/XMLHttpRequest">window.XMLHttpRequest</a></code> ו- <code><a href="/en-US/docs/Web/API/Fetch_API">window.fetch()</a></code>.</p>
+
+<div class="blockIndicator note">
+<p>בפיירפוקס, בקשות תסריטי התוכן (לדוגמא, באמצעות <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">fetch()</a>) קורות בהקשר של הרחבה, כך שיש לספק כתובת  URL מוחלטת  כדי להתייחס לתוכן דף. בכרום, בקשות אלה קורות בהקשר של דף, כך שכתובות ה-URL הן יחסיות,  לדוגמא, <code>/api</code> נשלחת ל- <code>https://[current page URL]/api</code>.</p>
+</div>
+
+<p>תסריטי תוכן מקבלים את אותן פריבילגיות חוצות מתחמים כמו שאר ההרחבות, כך שאם הרחבה בקשה גישה חוצת מתחמים עבור מתחם באמצעות מפתח  <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> ב- manifest.json, אזי תסריט התוכן יקבל גישה גם למתחם זה. </p>
+
+<p>זה יושג על ידי חשיפת יותר מופעי   XHR ו- fetch  בעלי יותר פריבילגיות בתסריט התוכן, להם תופעת הלוואי של אי הגדרת כותרות ה<code><a href="/en-US/docs/Web/HTTP/Headers/Origin">origin</a></code> והr<code><a href="/en-US/docs/Web/HTTP/Headers/Referer">eferer</a></code> כמו לבקשות מהדף עצמו, לעתים תכופות זה מועדף כדי למנוע מבקשה לחשוף את הטבע חוצה המקורות שלה.  מגרסה 58 ואילך  הרחבות הצריכות לבצע בקשות המתנהגות כאילו משלחו מהתוכן עצמו  יכולות להשתמש ב- <code>content.XMLHttpRequest</code> וב-<code>content.fetch()</code> במקום. להרחבות חוצות דפדפנים נוכחותן חייבת להיו מגולת תכונות.</p>
+
+<h2 id="תקשורת_עם_תסריטי_רקע">תקשורת עם תסריטי רקע</h2>
+
+<p>למרות שתסריטי תוכן אינם יכולים לגשת ישירות לממשקי פיתוח של הרחבות רשת, הם יכולים להתקשר עם תסריטי הרקע של ההרחבות באמצעות ממשקי הפיתוח של שליחת ההודעות ולכן יכולים לגשת בעקיפין לכל אותם הממשקים שתסריטי הרקע יכולים.</p>
+
+<p>קיימות שתי תבניות בסיסיות להתקשרות בין תסריטי הרקע לתסריטי התוכן: ניתן לשלוח הודעות בודדות, עם אפשרות למענה, או להגדיר התחברות לטווח יותר ארוך בין שני הצדדים, ולהחליף הודעות באמצעות התחברות זאת.</p>
+
+<h3 id="הודעות_בודדות">הודעות בודדות</h3>
+
+<p>לשליחת הודעה בודדת עם אפשרות למענה, ניתן להשתמש בממשקי הפיתוח הבאים:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col">בתסריט התוכן</th>
+   <th scope="col">בתסריט הרקע</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">שליחת הודעה</th>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/sendMessage">browser.runtime.sendMessage()</a></code></td>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/sendMessage">browser.tabs.sendMessage()</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">קבלת הודעה</th>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>לדוגמא, להלן תסריט תוכן המאזין לאירועי להקלקה בדף הרשת.</p>
+
+<p>עם ההקלקה הייתה על קישור, יישלח URL המטרה לדף הרקע:</p>
+
+<pre class="brush: js">// content-script.js
+
+window.addEventListener("click", notifyExtension);
+
+function notifyExtension(e) {
+  if (e.target.tagName != "A") {
+    return;
+  }
+  browser.runtime.sendMessage({"url": e.target.href});
+}</pre>
+
+<p>תסריט הרקע מאזין להודעות האלה ומציג התראה באמצעוץ ממשק ה-<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></code> :</p>
+
+<pre class="brush: js">// background-script.js
+
+browser.runtime.onMessage.addListener(notify);
+
+function notify(message) {
+  browser.notifications.create({
+    "type": "basic",
+    "iconUrl": browser.extension.getURL("link.png"),
+    "title": "You clicked a link!",
+    "message": message.url
+  });
+}
+</pre>
+
+<p>(הקוד לדוגמא מעובד קלות מהדוגמא <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a>   ב-GitHub.)</p>
+
+<h3 id="טיפול_בהודעות_מבוסס_התחברות">טיפול בהודעות מבוסס התחברות</h3>
+
+<p>שליחת הודעות בודדות עלול להיות מסורבל אם מתבצעת תחלופה מרובה של הודעות בין תסריט רקע לתסריט תוכן. כך שעל תבנית חליפית להיווסד לצורך התחברות לטוח ארוך יותר בין שני ההקשרים, ולהשתמש בהתחברות זו לחילופי הודעות.</p>
+
+<p>לכל צד יש אובייקט <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code>, המשמש החלפת הודעות.</p>
+
+<p>ליצירת התחברות:</p>
+
+<ul>
+ <li>צד אחד מאזין להתחברויות באמצעות <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code></li>
+ <li>הצד השני קורא ל:
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/connect">tabs.connect()</a></code> (אם מתחבר לתסריט תוכן); או</li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect">runtime.connect()</a></code> (אם מתחבר לתסריט רקע).</li>
+  </ul>
+ </li>
+</ul>
+
+<p>זה מחזיר אובייקט מסוג <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code>.</p>
+
+<ul>
+ <li>מאזין ה-<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code> מועבר לאובייקט <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> משלו.</li>
+</ul>
+
+<p>ברגע שלכל צד יש פתחה , שני הצדדים יכולים:</p>
+
+<ul>
+ <li>לשלוח הודעות באמצעות <code>runtime.Port.postMessage()</code>, וגם</li>
+ <li>לקבל הודעות באמצעות <code>runtime.Port.onMessage()</code></li>
+</ul>
+
+<p>לדוגמא, מייד כשנטען, תסריט התוכן:</p>
+
+<ul>
+ <li>מתחבר לתסריט הרקע</li>
+ <li>מאחסן את ה-<code>Port</code> במשתנה <code>myPort</code></li>
+ <li>מאזין להודעות על גבי <code>myPort</code>, ורושם אותן ליומן</li>
+ <li>משתמש ב-<code>myPort</code> לשלוח הודעות לתסריט הרקע  כשהמתמש/ת מקליק/ה על המסמך</li>
+</ul>
+
+<pre class="brush: js">// content-script.js
+
+var myPort = browser.runtime.connect({name:"port-from-cs"});
+myPort.postMessage({greeting: "hello from content script"});
+
+myPort.onMessage.addListener(function(m) {
+  console.log("In content script, received message from background script: ");
+  console.log(m.greeting);
+});
+
+document.body.addEventListener("click", function() {
+  myPort.postMessage({greeting: "they clicked the page!"});
+});</pre>
+
+<p>תסריט הרקע המכותב:</p>
+
+<ul>
+ <li>מאזין לנסיונות ההתחברות של תסריט התוכן</li>
+ <li>כשמקבל נסיון התחברות:
+  <ul>
+   <li>שומר את הפתחה במשתנה בשם <code>portFromCS</code></li>
+   <li>שולח לתסריט התוכן הודעה באמצעות הפתחה</li>
+   <li>מתחיל להאזין להודעות המתקבלות על גבי הפתחה, ורושם אותן ליומן</li>
+  </ul>
+ </li>
+ <li>שולח הודעות לתסריט התוכן, using <code>portFromCS</code>, כשהמשתמש/ת מקליק/ה על פעולת הדפדפן של ההרחבה.</li>
+</ul>
+
+<pre class="brush: js">// background-script.js
+
+var portFromCS;
+
+function connected(p) {
+  portFromCS = p;
+  portFromCS.postMessage({greeting: "hi there content script!"});
+  portFromCS.onMessage.addListener(function(m) {
+    console.log("In background script, received message from content script");
+    console.log(m.greeting);
+  });
+}
+
+browser.runtime.onConnect.addListener(connected);
+
+browser.browserAction.onClicked.addListener(function() {
+  portFromCS.postMessage({greeting: "they clicked the button!"});
+});
+</pre>
+
+<h4 id="תסריטי_תוכן_מרובים">תסריטי תוכן מרובים</h4>
+
+<p>אם יש לך תסריטי תוכן מרובים המתקשרים בו זמנית, ייתכן שתרצה/י לאחסן כל התחברות במערך.</p>
+
+
+
+<pre class="brush: js">// background-script.js
+
+var ports = []
+
+function connected(p) {
+  ports[p.sender.tab.id]    = p
+  //...
+}
+
+browser.runtime.onConnect.addListener(connected)
+
+browser.browserAction.onClicked.addListener(function() {
+  ports.forEach(p =&gt; {
+        p.postMessage({greeting: "they clicked the button!"})
+    })
+});
+</pre>
+
+<ul>
+</ul>
+
+<h2 id="תקשורת_עם_דף_רשת">תקשורת עם דף רשת</h2>
+
+<p>למרות שכברירת מחדל תסריט תוכן אינם מקבלים הרשאת גישה לאובייקטים שנוצרו על ידי תסריטי דף, הם יכולים להתקשר עם תסריטי דף באמצעות ממשקי ה-DOM  <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage</a></code> ו-<code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">window.addEventListener</a></code> .</p>
+
+<p>לדוגמא:</p>
+
+<pre class="brush: js">// page-script.js
+
+var messenger = document.getElementById("from-page-script");
+
+messenger.addEventListener("click", messageContentScript);
+
+function messageContentScript() {
+  window.postMessage({
+    direction: "from-page-script",
+    message: "Message from the page"
+  }, "*");</pre>
+
+<pre class="brush: js">// content-script.js
+
+window.addEventListener("message", function(event) {
+  if (event.source == window &amp;&amp;
+      event.data &amp;&amp;
+      event.data.direction == "from-page-script") {
+    alert("Content script received message: \"" + event.data.message + "\"");
+  }
+});</pre>
+
+<p>לדוגמא שלמה עובדת של זה, <a href="https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html">בקרו בדף ההדגמה של- GitHub</a> ובצעו את ההוראות</p>
+
+<div class="warning">
+<p>יש לקחת בחשבון שכבל פעם שמתקשרים עם תוכן שאין בו אמון בדרך זו, יש לנקוט זהירות רבה. הרחבות הן קוד בעל פריבילגיות שיכולות להיות לו יכולות בעלות כוח עצום, ודפי תוכן עויינים יכולים לרמות אותם בקלות לדשת ליכולות אלה.</p>
+
+<p>לצורך דוגמא טריוויאלית, הניחו כי קוד של תסריט תוכן שמקבל את ההודעה עושה דבר כזה:</p>
+
+<pre class="brush: js">// content-script.js
+
+window.addEventListener("message", function(event) {
+  if (event.source == window &amp;&amp;
+      event.data.direction &amp;&amp;
+      event.data.direction == "from-page-script") {
+    eval(event.data.message);
+  }
+});</pre>
+
+<p>כעת תסריט הדף יכול להריץ כל קוד עם כל הפריביליגיות של תסריט התוכן.</p>
+</div>
+
+<h2 id="שימוש_ב-_eval()_בתסריטי_תוכן">שימוש ב- <code>eval()</code> בתסריטי תוכן</h2>
+
+<p>בכרום, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> תמיד מריץ קוד בהקשר של תסריט התוכן, לא בהקשר של הדף.</p>
+
+<p>בפיירפוקס:</p>
+
+<ul>
+ <li>אם נקראת הפונקציה <code>eval()</code>, היא מריצה קוד בהקשר של <strong>תסריט תוכן</strong>.</li>
+ <li>אם נקראת הפונקציה <code>window.eval()</code>, היא מריצה קוד בהקשר של ה<strong>דף</strong>.</li>
+</ul>
+
+<p>לדוגמא, ניקח תסריט תוכן כזה:</p>
+
+<pre class="brush: js">// content-script.js
+
+window.eval('window.x = 1;');
+eval('window.y = 2');
+
+console.log(`In content script, window.x: ${window.x}`);
+console.log(`In content script, window.y: ${window.y}`);
+
+window.postMessage({
+  message: "check"
+}, "*");</pre>
+
+<p>הקוד רק יוצר משתנים <code>x</code> ו- <code>y</code> באמצעות <code>window.eval()</code> ו-<code>eval()</code>, ואז רושם את ערכיהם ליומן, ואז שולח הודעה לדף.</p>
+
+<p>בהתקבל ההודעה, תסריט הדף רושם ליומן את אותם המשתנים:</p>
+
+<pre class="brush: js">window.addEventListener("message", function(event) {
+  if (event.source === window &amp;&amp; event.data &amp;&amp; event.data.message === "check") {
+    console.log(`In page script, window.x: ${window.x}`);
+    console.log(`In page script, window.y: ${window.y}`);
+  }
+});</pre>
+
+<p>בכרום, מופק פלט כזה:</p>
+
+<pre>In content script, window.x: 1
+In content script, window.y: 2
+In page script, window.x: undefined
+In page script, window.y: undefined</pre>
+
+<p>בפיירפוקס מופק הפלט הבא:</p>
+
+<pre>In content script, window.x: undefined
+In content script, window.y: 2
+In page script, window.x: 1
+In page script, window.y: undefined</pre>
+
+<p>אותו הדבר תקף עבור <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>, <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>, ו- <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>.</p>
+
+<div class="blockIndicator warning">
+<p>בעת הרצת קוד בהקשר של דף, יש להיזהר מאוד. סביבת הדף נשלטת על ידי דפי רשת בעלי פוטנציאל לזדוניות, דבר היכול להגדיר מחדש אובייקטים איתם את/ה מתקשר/ת להתנהג בדרכים לא צפויות.</p>
+
+<pre class="brush: js">// page.js redefines console.log
+
+var original = console.log;
+
+console.log = function() {
+  original(true);
+}
+</pre>
+
+
+<pre class="brush: js">// content-script.js calls the redefined version
+
+window.eval('console.log(false)');
+</pre>
+</div>
diff --git a/files/he/mozilla/add-ons/webextensions/index.html b/files/he/mozilla/add-ons/webextensions/index.html
new file mode 100644
index 0000000000..221ec714ca
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/index.html
@@ -0,0 +1,147 @@
+---
+title: הרחבות לדפדפנים
+slug: Mozilla/Add-ons/WebExtensions
+tags:
+  - הרחבות
+  - נחיתה
+  - תוספים
+translation_of: Mozilla/Add-ons/WebExtensions
+---
+<div>{{AddonSidebar}}</div>
+
+<p dir="rtl"><span class="seoSummary">הרחבות יכולות להרחיב ולשנות את יכולות הדפדפן. הרחבות של Firefox נבנות על-ידי <em>WebExtensions</em> API, מערכת חוצת-דפדפנים לפיתוח הרחבות.</span>המערכת תואמת ל- <a href="https://developer.chrome.com/extensions">extension API</a> הנתמך על-ידי Google Chrome ו- Opera ו- <a href="https://browserext.github.io/browserext/">W3C Draft Community Group</a> במידה נרחבת.</p>
+
+<p dir="rtl">הרחבות הנכתבות לדפדפנים אלה ירוצו ברוב המקרים ב- Firefox או ב-<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> עם <a href="/he/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome">שינויים מועטים בלבד</a>. ה- API גם תואם באופן מלא <a href="/he/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</p>
+
+<p dir="rtl">אם יש לך רעיונות או שאלות, או צורך בעזרה בהעברת תוספים ישנים ל-WebExtensions APIs, ניתן ליצור עימנו קשר ב-<a href="https://mail.mozilla.org/listinfo/dev-addons">רשימת התפוצה של dev-addons</a> או ב- <a dir="ltr" href="irc://irc.mozilla.org/webextensions">#webextensions</a> ב- <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+
+<div class="topicpage-table" dir="rtl">
+<div class="section">
+<h2 id="תחילת_עבודה">תחילת עבודה</h2>
+
+<ul>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">מהן הרחבות?</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">ההרחבה הראשונה שלך</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension">ההרחבה השנייה שלך</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">האנטומיה של ההרחבה</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Firefox_workflow_overview">סקירת תזרים העבודה של Firefox</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Examples">הרחבות לדוגמא</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/What_next_">מה הלאה?</a></li>
+</ul>
+
+<h2 id="מושגים">מושגים</h2>
+
+<ul>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/API">סקירת JavaScript API</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">תבניות חיפוש</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">עבודה עם קבצים</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Internationalization">גלובליזציה</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Security_best_practices">שיטות אבטחה מומלצות</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">מדיניות אבטחת תוכן</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">תקשורת עם Native</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Using_the_devtools_APIs">שימוש ב- devtools APIs</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">שיטות חווית משתמש מומלצות</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Native_manifests">Native manifests</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/User_actions">פעולות משתמש</a></li>
+</ul>
+
+<h2 id="ממשק_משתמש">ממשק משתמש</h2>
+
+<ul>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface">מבוא</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">לחצן בסרגל כלים בדפדפן</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">לחצן בסרגל כלים בדפדפן עם פופ-אפ</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">לחצן בשורת הכתובת</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">לחצן בשורת הכתובת עם פופ-אפ</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">תפריט</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">סרגלי צד</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">עמוד האפשרויות</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">עמודי הרחבה</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">התרעות (נוטיפיקציות)</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">הצעות לשורת הכתובת</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">פאנלים לכלי מפתחים</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">סגנונות דפדפנים</a></li>
+</ul>
+
+<h2 id="איך_לעשות">איך לעשות</h2>
+
+<ul>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">ליירט בקשות HTTP</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">לשנות עמוד אינטרנט</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">להוסיף לחצן לשורת הכלים</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">ליצור עמוד הגדרות</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">עבודה עם לוח ההעתקה</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API">עבודה עם טאבים (Tabs API)</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Bookmarks_API">עבודה עם לשוניות (Bookmarks API)</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API">עבודה עם עוגיות (Cookies API)</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities">עבודה עם זהות הקשרית (contextual identities)</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page">להכניס תוכן חיצוני</a></li>
+</ul>
+
+<ul>
+</ul>
+
+<h2 id="הסבה">הסבה</h2>
+
+<ul>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Firefox_differentiators">מאבחני שונות של Firefox</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome">הסבת הרחבה של Google Chrome</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">הסבת הרחבה ישנה של Firefox</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">פיתוח ל- Firefox ב- Android</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Thunderbird">פיתוח ל- Thunderbird</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">WebExtensions מוטמעות</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">השוואה מול Add-on SDK</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">השוואה מול הרחבות XUL/XPCOM</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">חוסר תאימות עם Chrome</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android">הבדלים בין שולחן עבודה (דסקטופ) ו- Android</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Differences_between_API_implementations">הבדלים בין מימושי API</a></li>
+</ul>
+
+<h2 id="תרשים_עבודה_של_Firefox">תרשים עבודה של Firefox</h2>
+
+<ul>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">חווית משתמש</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">התקנה</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Debugging">ניפוי שגיאות (Debugging)</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features">בדיקת אפשרויות מתמשכות ואתחול</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">תחילת עבודה עם web-ext</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">רשימת פקודות של web-ext</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">מזהים של הרבחות ותוספים</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Distribution_options">אפשרויות הפצה</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Request_the_right_permissions">בקשת הרשאות נכונות</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">שיתוף אובייקטים עם סקריפט עמוד</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Retiring_your_extension">סיום חיי ההרחבה שלך</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Tips">טיפים וטריקים</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Development_Tools">כלי פיתוח הרחבות לדפדפנים</a></li>
+</ul>
+</div>
+
+<div class="section">
+<h2 id="רשימת_מקורות">רשימת מקורות</h2>
+
+<h3 id="JavaScript_APIs">JavaScript APIs</h3>
+
+<ul>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/API">סקירת JavaScript API</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">טבלאות השוואת תאימות של JavaScript APIs</a></li>
+</ul>
+
+<div class="twocolumns">{{ListSubpages("/en-US/docs/Mozilla/Add-ons/WebExtensions/API")}}</div>
+
+<h3 id="מפתחות_מניפסט">מפתחות מניפסט</h3>
+
+<ul>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/manifest.json">סקירת manifest.json</a></li>
+ <li><a href="/he/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">תאימות דפדפן ל- manifest.json</a></li>
+</ul>
+
+<div class="twocolumns">{{ListSubpages("/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json")}}</div>
+</div>
+</div>
+
+<div class="SnapLinksContainer" style="margin-left: 0px; margin-top: 0px; display: none;">
+<div class="SL_SelectionRect">
+<div class="SL_SelectionLabel"> </div>
+</div>
+</div>
diff --git a/files/he/mozilla/add-ons/webextensions/manifest.json/background/index.html b/files/he/mozilla/add-ons/webextensions/manifest.json/background/index.html
new file mode 100644
index 0000000000..cbd429b6f9
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/manifest.json/background/index.html
@@ -0,0 +1,116 @@
+---
+title: background
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/background
+tags:
+  - Manifest
+  - WebExtensions
+  - הרחבות
+  - הרחבות רשת
+  - עיון
+  - תוספים
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/background
+---
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">טיפוס</th>
+   <td><code>Object</code></td>
+  </tr>
+  <tr>
+   <th scope="row">חובה</th>
+   <td>לא</td>
+  </tr>
+  <tr>
+   <th scope="row">דוגמה</th>
+   <td>
+    <pre class="brush: json no-line-numbers notranslate">
+"background": {
+  "scripts": ["background.js"]
+}</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>השתמשו במפתח <code>background</code> כדי לכלול תסריט רקע אחד או יותר, עם אפשרות לדף רקע בהרחבתכם.</p>
+
+<p>תסריטי רקע הם המקום לשים קוד שצריך לתחזק מצב לטווח ארוך, או לבצע פעולות לטווח ארוך, ללא תלות בזמן החיים של דף מסוים מהרשת או חלון דפדפן.</p>
+
+<p>תסריטי רקע נטענים מיד כשההרחבה נטענת והם נשארים טעונים עד אשר ההרחבה מושבתת או מבוטלת, אלא אם <code>persistent</code> מקבל את הערך <code>false</code>. תוכלו להשתמש בכל אחד ממשקי פיתוח היישומים של הרחבות הרשת בתסריט, כל עוד ביקשתם את <a href="/he/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">ההרשאות</a> הנחוצות.</p>
+
+<p>ראו גם את הקטע "תסריטי רקע" ב- <a href="/he/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">אנטומיה של הרחבה</a> לפרטים נוספים.</p>
+
+<p>המפתח <code>background</code> הוא אובייקט שעשויות להיות לו שתי תכונות, ושתיהן אופציונליות:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>scripts</code></td>
+   <td>
+    <p>מערך <code>(Array)</code> של מחרוזות ( <code>Strings</code>), שכל אחת מהן היא מסלול למקור בג'אווה-סקריפט. המסלול יחסי לקובץ manifest.json עצמו. אלה התסריטים שיבוצעו בדף הרקע של ההרחבה.</p>
+
+    <p>התסריט משתף את אותו הקשר גלובלי  <code>window</code>.</p>
+
+    <p>התסריטים נטענים על פי הסדר בו הם מופיעים במערך.</p>
+
+    <p>אם תציינו ערך עבור <code>scripts</code>, דף ריק יווצר בו יורץ התסריט.</p>
+
+    <div class="note">
+    <p><strong>לתשומת לבך:</strong> אם ברצונך להביא תסריט ממיקום מרוחק עם התגית <code>&lt;script&gt;</code>  (לדוגמה,. <code>&lt;script src = "https://code.jquery.com/jquery-1.7.1.min.js"&gt;</code>), יהא עליך לשנות גם את המפתח <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy">content_security_policy</a></code> בקובץ manifest.json של ההרחבה שלך.</p>
+    </div>
+
+    <div class="note">
+    <p><strong>לתשומת לבך:</strong> בגרסאות פיירפוקס שקדמו לגרסה 50, כשהדיבאגר היה פתוח, תסריטים לא תמיד נטענו על פי הסדר הניתן במערך . כדי לעקוף באג זה, ניתן להשתמש בתכונה <code>page</code> ולכלול תסריטי רקע מהדף באמצעות תגיות  <code>&lt;script&gt;</code>. באג זה תוקן בפיירפוקס 50. מנקודה זו ואילך,  תסריטים נטענים תמיד על פי הסדר הנתון במערך.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>page</code></td>
+   <td>
+    <p>אם יש לך צורך בתוכן כלשהו בדף, ניתן להגדיר דף משלך באמצעות התכונה  <code>page</code>, שהיא מחרוזת ( <code>String</code> ), המייצגת מסלול, יחסי לקובץ manifest.json, למסמך HTML הכלול בחבילת ההרחבה שלך.</p>
+
+    <p>אם נעשה שימוש בתכונה זו, לא יהיה ניתן לציין תסריטי רקע באמצעות <code>scripts</code>, אך יהיה ניתן לכלול תסריטים משלך מהדף, בדיוק כשם שזה נעשה בדף רגיל מהרשת.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>המפתח <code>background</code> יכול לכלול גם את התכונה האופציונלית הבאה:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>persistent</code></td>
+   <td>
+    <p>ערך בוליאני( <code>Boolean</code> ).</p>
+
+    <ul>
+     <li><code>true</code> מציין כי דף הרקע נועד להישמר בזכרון מהרגע שההרחבה נטענה או שהדפדפן הופעל  עד שההרחבה מבוטלת או מושבתת, או שהדפדפן נסגר (כלומר, דף הרקע תמידי).</li>
+     <li><code>false</code> מציין כי דף הרקע עשוי להיות מוסר מהזיכרון כשלא פעיל ולהיווצר מחדש במידת הצורך. דפי רקע כאלה קרויים לפעמים דפי אירוע כי הם נטענים לזיכרון כדי לאפשר לדף הרקע לטפל באירועים להם הוא הוסיף מאזינים. רישום המאזיננים הוא תמידי כאשר הדף מוסר מהזיכרון, אך ערכים אחרים אינם ץמידי. אם תרצו לשמור מידע תמידית בדף אירועים , תוכלו להשתמש ב  <a href="/he/docs/Mozilla/Add-ons/WebExtensions/API/storage">ממשק הפיתוח storage</a>.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="דוגמה">דוגמה</h2>
+
+<pre class="brush: json no-line-numbers notranslate">  "background": {
+    "scripts": ["jquery.js", "my-background.js"]
+  }</pre>
+
+<p>טוען שני תסריט רקע.</p>
+
+<pre class="brush: json notranslate">  "background": {
+    "page": "my-background.html"
+  }</pre>
+
+<p>תואן דף רקע מותאם אישית.</p>
+
+<h2 id="תאימות_דפדפנים">תאימות דפדפנים</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.background", 10)}}</p>
diff --git a/files/he/mozilla/add-ons/webextensions/manifest.json/index.html b/files/he/mozilla/add-ons/webextensions/manifest.json/index.html
new file mode 100644
index 0000000000..13e7d0f8f8
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/manifest.json/index.html
@@ -0,0 +1,125 @@
+---
+title: manifest.json
+slug: Mozilla/Add-ons/WebExtensions/manifest.json
+tags:
+  - Add-ons
+  - Extensions
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+  - WebExtensions
+  - manifest.json
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json
+---
+<p>{{AddonSidebar}}</p>
+
+<div class="blockIndicator note">
+<p>This article describes manifest.json for web extensions. If you are looking for information about the manifest.json in PWAs, check out the <a href="/en-US/docs/Web/Manifest">Web App Manifest</a> article.</p>
+</div>
+
+<p>The <code>manifest.json</code> file is the only file that every extension using WebExtension APIs must contain.</p>
+
+<p>Using <code>manifest.json</code>, you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension's functionality, such as background scripts, content scripts, and browser actions.</p>
+
+<p>It is a <a href="/en-US/docs/Glossary/JSON">JSON</a>-formatted file, with one exception: it is allowed to contain "<code>//</code>"-style comments.</p>
+
+<p><code>manifest.json</code> keys are listed below:</p>
+
+<div class="index">{{ListSubpages("/en-US/Add-ons/WebExtensions/manifest.json")}}</div>
+
+<p><code>"manifest_version"</code>, <code>"version"</code>, and <code>"name"</code> are the only mandatory keys. <code>"default_locale"</code> must be present if the "_locales" directory is present and must be absent otherwise. <code>"browser_specific_settings"</code> is not supported in Google Chrome.</p>
+
+<p>You can access your extension's manifest from the extension's JavaScript using the {{WebExtAPIRef("runtime.getManifest()")}} function:</p>
+
+<pre class="brush: js; no-line-numbers">browser.runtime.getManifest().version;</pre>
+
+<h2 id="Example">Example</h2>
+
+<p>The block below contains shows the basic syntax for some common manifest keys. Note that it is not intended to be used as a copy-paste-ready example: which keys you need will depend on the extension you are developing. For complete example extensions, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples">Example extensions</a>.</p>
+
+<pre class="brush: json;">{
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "addon@example.com",
+      "strict_min_version": "42.0"
+    }
+  },
+
+  "background": {
+    "scripts": ["jquery.js", "my-background.js"],
+    "page": "my-background.html"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
+    },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "commands": {
+    "toggle-feature": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+Y",
+        "linux": "Ctrl+Shift+U"
+      },
+      "description": "Send a 'toggle-feature' event"
+    }
+  },
+
+  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
+
+  "content_scripts": [
+    {
+      "exclude_matches": ["*://developer.mozilla.org/*"],
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "default_locale": "en",
+
+  "description": "...",
+
+  "icons": {
+    "48": "icon.png",
+    "96": "icon@2x.png"
+  },
+
+  "manifest_version": 2,
+
+  "name": "...",
+
+  "page_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
+    },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "permissions": ["webNavigation"],
+
+  "version": "0.1",
+
+  "user_scripts": {
+    "api_script": "apiscript.js",
+  },
+
+  "web_accessible_resources": ["images/my-image.png"]
+}</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>For a full overview of all manifest keys and their sub-keys, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">see the full <code>manifest.json</code> browser compatibility table</a>.</p>
+
+
+
+<p>{{Compat("webextensions.manifest")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>{{WebExtAPIRef("permissions")}} JavaScript API</p>
diff --git a/files/he/mozilla/add-ons/webextensions/manifest.json/הרשאות/index.html b/files/he/mozilla/add-ons/webextensions/manifest.json/הרשאות/index.html
new file mode 100644
index 0000000000..9221f0cf8c
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/manifest.json/הרשאות/index.html
@@ -0,0 +1,198 @@
+---
+title: הרשאות
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/הרשאות
+tags:
+  - manifest.json
+  - הפניה
+  - הרחבות
+  - הרחבות רשת
+  - הרשאות
+  - תוספים
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/permissions
+---
+<p>{{AddonSidebar}}</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">טיפוס</th>
+   <td><code>Array</code></td>
+  </tr>
+  <tr>
+   <th scope="row">חובה</th>
+   <td>לא</td>
+  </tr>
+  <tr>
+   <th scope="row">דוגמה</th>
+   <td>
+    <pre class="brush: json; no-line-numbers">
+"permissions": [
+  "*://developer.mozilla.org/*",
+  "webRequest"
+]</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>השתמשו במפתח <code>permissions</code> לבקש כוחות מיוחדים עבור ההרחבה שלכם. מפתח זה הינו מערך של מחרוזות, וכל אחת ממחרוזות אלו היא בקשת הרשאה.</p>
+
+<p>אם תבקשו הרשאות באמצעות מפתח זה, אזי הדפדפן עשוי  לדווח למשתמש/ת בעת ההתקנה שההרבה מבקשת פריבילגיות מסויימות, ולבקש ממנו/ה לאשר כי  ישמח/תשמח להעניק פריבילגיות אלו. הדפדפן עשוי גם להתיר למשתמש/ץ לבדוק פריבילגיות ההרחבה אחרי ההתקנה. כשם שהבקשה להעניק פריבילגיות עשויה להשפיע על נכונות המשתמש/ת להתקין את ההרחבה, בקשת פריבילגיות שווה הפעלה זהירה של שיקול דעת.  לדוגמה, אם תרצו להימנע מלבקש הרשאות לא נחוצות  ותרצו לספק מידע עודות הסיבה לבקשת הרשאות בתיאור המוצר של ההרחבה שלכם. מידע נוסף על העניינים שיש לקחת בחשבון תוכלו למצוא במאמר  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Request_the_right_permissions">Request the right permissions</a>.</p>
+
+<p>למידע נוסף כיצד לבחון ולצפות בבקשת הרשאות ראו <a href="https://extensionworkshop.com/documentation/develop/test-permission-requests/">Test permission requests</a>  באתר Extension Workshop site.</p>
+
+<p>המפתח יכול להכיל שלושה סוגי הרשאות:</p>
+
+<ul>
+ <li>הרשאות מארח</li>
+ <li>הרשאות ממשק פיתוח יישומים</li>
+ <li>הרשאות לשונית פעילה</li>
+</ul>
+
+<h2 id="הרשאות_מארח">הרשאות מארח</h2>
+
+<p>הרשאות מארח מפורטות ב- <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>, וכל תבנית מזהה קבוצה של כתובות  URLs עבורן ההרחבה מבקשת פריבילגיות נוספות. לדוגמה, בקשת מארח יכולה להיות  <code>"*://developer.mozilla.org/*"</code>.</p>
+
+<p>פריבילגיות נוספות כוללות:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest">גישת XMLHttpRequest</a> ו- <a href="/en-US/docs/Web/API/Fetch_API">fetch</a> למקורות ללא  מגבלות בין מקורות (אפילו עבור בקשות שנעשו מתוך תסריטי תוכן)</li>
+ <li>היכולת להחדיר תסריטים על ידי תכנות (באמצעות <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript</a>) לתוך דפים המוגשים מתמקורות אלו.</li>
+ <li>היכולת לקבל אירועים מתוך ממשקי הפיתוח של  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest">webRequest</a> עבור מארחים אלה</li>
+ <li>היכולת לקבל עוגיות עבור אותו מארח באמצעות ממשק הפיתוח של  <a href="/en-US/Add-ons/WebExtensions/API/cookies">cookies</a> , כל עוד גם הרשאות ממשק הפיתוח "cookies" כלולות.</li>
+ <li>עקיפת ההגנות מפני  מעקב אם המארח הוא שם מתחם מלא בלי ג'וקרים . לא עובד עם <code>&lt;all_urls&gt;</code>.</li>
+</ul>
+
+<p>בפירפוקס, מגירסה 56 ואילך, הרחבות מקבלות אוטומטית הרשאות מארח  עבור המקור של עצמן, שהוא בצורה:</p>
+
+<pre><code>moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/</code></pre>
+
+<p>כש-  <code>60a20a9b-1ad4-af49-9b6c-c64c98c37920</code> הוא המזהה הפנימי של ההרחבה. ההרחבה יכולה לקבל את ה- URL תכנותית על ידי קריאה ל- <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/extension/getURL">extension.getURL()</a>:</p>
+
+<pre class="brush: js;">browser.extension.getURL("");
+// moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
+</pre>
+
+<h2 id="הרשאות_ממשק_פיתוח_יישומים">הרשאות ממשק פיתוח יישומים</h2>
+
+<p>הרשאות ממשק פיתוח היישומים מפורטות כמילות מפתח, וכל מילת מפתח מהווה שם של  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">WebExtension API</a> שההרחבה מעוניינת להשתמש בו.</p>
+
+<p>כעת זמינות מילות המפתח הבאות:</p>
+
+<ul>
+ <li><code>activeTab</code></li>
+ <li><code>alarms</code></li>
+ <li><code>background</code></li>
+ <li><code>bookmarks</code></li>
+ <li><code>browserSettings</code></li>
+ <li><code>browsingData</code></li>
+ <li><code>clipboardRead</code></li>
+ <li><code>clipboardWrite</code></li>
+ <li><code>contentSettings</code></li>
+ <li><code>contextMenus</code></li>
+ <li><code>contextualIdentities</code></li>
+ <li><code>cookies</code></li>
+ <li><code>debugger</code></li>
+ <li><code>dns</code></li>
+ <li><code>downloads</code></li>
+ <li><code>downloads.open</code></li>
+ <li><code>find</code></li>
+ <li><code>geolocation</code></li>
+ <li><code>history</code></li>
+ <li><code>identity</code></li>
+ <li><code>idle</code></li>
+ <li><code>management</code></li>
+ <li><code>menus</code></li>
+ <li><code>menus.overrideContext</code></li>
+ <li><code>nativeMessaging</code></li>
+ <li><code>notifications</code></li>
+ <li><code>pageCapture</code></li>
+ <li><code>pkcs11</code></li>
+ <li><code>privacy</code></li>
+ <li><code>proxy</code></li>
+ <li><code>search</code></li>
+ <li><code>sessions</code></li>
+ <li><code>storage</code></li>
+ <li><code>tabHide</code></li>
+ <li><code>tabs</code></li>
+ <li><code>theme</code></li>
+ <li><code>topSites</code></li>
+ <li><code>unlimitedStorage</code></li>
+ <li><code>webNavigation</code></li>
+ <li><code>webRequest</code></li>
+ <li><code>webRequestBlocking</code></li>
+</ul>
+
+<p>ברוב המקרים ההרשאה רק מעניקה גישה לממשק פיתוח היישומים, עם יוצאי הדופן הבאים:</p>
+
+<ul>
+ <li><code>tabs</code> מאפשר לך גישה ל <a href="/en-US/Add-ons/WebExtensions/API/tabs">חלקים בעלי הפריבילגיות של ממשק ה-t<code>abs </code> </a>:<code>Tab.url</code>, <code>Tab.title</code>, ו- <code>Tab.faviconUrl</code>. בפיירפוקס, יש צורך ב- <code>tabs</code> אם ברצונך לכלול גם  <code>url</code> בפרמטר <code>queryInfo</code>  ל-<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">tabs.query()</a></code>. בכל יתר ממשק הפחתוח של  <code>tabs</code> ניתן להשתמש בלי לבקש כל הרשאה.</li>
+ <li><code>webRequestBlocking</code> מאפשר לך להשתמש גם בארגומנט "blocking", כך שיהיה ניתן  <a href="/en-US/Add-ons/WebExtensions/API/WebRequest">לשנות ולבטל הרשאות</a>.</li>
+ <li><code>downloads.open</code> מאפשר לך להשתמש ב- {{WebExtAPIRef("downloads.open()")}} API.</li>
+ <li><code>tabHide</code> מאפשר לך להשתמש ב- {{WebExtAPIRef("tabs.hide()")}} API.</li>
+</ul>
+
+<h2 id="הרשאת_activeTab">הרשאת activeTab</h2>
+
+<p>הרשאה זו מצויינת כ- <code>"activeTab"</code>. אם להרחבה יש הרשאה זו , אזי בעת תקשורת בין משתמש/ת להרחבה, מוענקות להרחבה פריבילגיות  נוספות ללשונית הפעילה בלבד.</p>
+
+<p>"תקשורת עם המשתמש" כוללת:</p>
+
+<ul>
+ <li>כאשר המשתמש/ת מקיש.ה על פעולת הדפדפן או פעולת הדף של ההרחבה</li>
+ <li>כאשר המשתמש/ת בוחר'ת את פריט תפריט ההקשר שלה.</li>
+ <li>the user activates a keyboard shortcut defined by the extension</li>
+</ul>
+
+<p>הפריבילגיות הנוספות הן:</p>
+
+<ul>
+ <li>היכולת להחדיר JavaScript או CSS באמצעות תכנות לתוך הלשונית באמצעות,  <code><a href="/en-US/Add-ons/WebExtensions/API/tabs/executeScript">browser.tabs.executeScript</a></code> ו-<code><a href="/en-US/Add-ons/WebExtensions/API/tabs/insertCSS">browser.tabs.insertCSS</a></code></li>
+ <li>גישה לחלקים הפריבילגיים של ממשק פיתוח הלשונית עבור הלשונית הנוכחית: <code>Tab.url</code>, <code>Tab.title</code>, ו-<code>Tab.faviconUrl</code>.</li>
+</ul>
+
+<p>הכוונה בהרשאה זו היא לאפשר להרחבות להגשים מקרה שימוש נפוץ, ללא הצורך לתת להן הרשאות בעלות כוח רב מדי. הרשאות רבוטת יהיו מעונינות "לעשות משהו לדף הנוכחי כאשר המשתמש/ת מבקש/ת". לדוגמה, קחו בחשבון הרחבה המבקשת להריץ תסריט בדף הנוכחי כאשר המשתמש/ת מקישה על פעולת דפדפן. אם ההרשאה  <code>activeTab</code> לא הייתה קיימת, ההרחבה הייתה צריכה לבקש את ההרשאת המארח   <code>&lt;all_urls&gt;</code>. אבל זה נותן להרחבה יותר כוח ממה שדרוש לה:  היא הייתה יכולה כעת לבצע תסריטים בכל לשונית, בכל עת שתרצה, במקום רק בלשונית הפעילה ורק בתגובה לפעולת משתמש/ת.</p>
+
+<p>שימו לב כי תוכלו לקבל גישה רק ללשונית/מידע שכבר שם, כאשר ההתקשרות מצד המשתמש/ת התקיימה (למשל. ההקשה). כאשר הלשונית הפעילה מנווטת למקום אחר, למשל עקב סיום טעינה או אירוע אחר כלשהו, ההרשאה אינה מעניקה לך יותר גישה ללשונית.</p>
+
+<p>בדרך כלל הלשונית המקבלת את הרשאת <code>activeTab</code> היא רק הלשונית הפעילה באותו רגע, פרט למקרה אחד. ממשק היישומים <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus">menus</a></code> מאפשר להרחבה ליצור פריט תפריט המוצג כאשר המשתמש/ת מקיש/ה הקשת הקשר בלשונית  (כלומר, על הרכיב בפס הלשוניות המשאפשר למשתמש/ת לעבור מלשונית ללשונית). אם המשתמש/ת מקיש/ה על פריט כזה, אזי הרשאת  <code>activeTab</code> מוענקת ללשונית שהוקש עליה, אף אם זו אינה הלשונית הפעילה (נכון לפיירפוקס 63, {{bug(1446956)}}).</p>
+
+<h2 id="גישה_ללוח_הגזירים">גישה ללוח הגזירים</h2>
+
+<p>קיימות שתי הרשאות המאפשרות להרחבה  לתקשר עם לוח הגזירים:</p>
+
+<ul>
+ <li><code>clipboardWrite</code>: כותבת ללוח הגזירים באמצעות {{DOMxRef("Clipboard.write()")}}, {{DOMxRef("Clipboard.writeText()")}}, <code>document.execCommand("copy")</code> or <code>document.execCommand("cut")</code></li>
+ <li><code>clipboardRead</code>: קוראת מלוח הגזירים באמצעות {{DOMxRef("Clipboard.read()")}}, {{DOMxRef("Clipboard.readText()")}} or <code>document.execCommand("paste")</code></li>
+</ul>
+
+<p>ראו <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">Interact with the clipboard</a> לכל הפרטים אודות הדבר.</p>
+
+<h2 id="אחסון_ללא_הגבלה">אחסון ללא הגבלה</h2>
+
+<p>הרשאת <code>unlimitedStorage</code>:</p>
+
+<ul>
+ <li>מאפשרת להרחבה לחרוג מכל מכסה הנאכפת על ידי ממשק היישומים  {{WebExtAPIRef("storage.local")}}</li>
+ <li>בפיירפוקס, מאפשרת להרחבה ליצור  <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Firefox_specifics">"persistent" IndexedDB database</a>, מבלי שהדפדפן יעצור לקבלת הרשאות מהמשתמ/ת בעת יצירת בסיב הנתונים.</li>
+</ul>
+
+<h2 id="דוגמה">דוגמה</h2>
+
+<pre class="brush: json no-line-numbers"> "permissions": ["*://developer.mozilla.org/*"]</pre>
+
+<p>לבקשת הרשאה בעלת פריבילגיה  לדפים תחת developer.mozilla.org.</p>
+
+<pre class="brush: json no-line-numbers">  "permissions": ["tabs"]</pre>
+
+<p>לבקשת גישה לחלקים בעלי פריבילגיה של ממשק הפיתוח  <code>tabs</code>.</p>
+
+<pre class="brush: json no-line-numbers">  "permissions": ["*://developer.mozilla.org/*", "tabs"]</pre>
+
+<p>לבקשת שתי ההרשאות שלעיל.</p>
+
+<h2 id="תאימות_דפדפנים">תאימות דפדפנים</h2>
+
+<p class="hidden">טבלת התאימות בדף זה נוצרת ממידע ממובנה. אם תרצה לתרום לנתונים, נא לשלוף <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ולשלוח לנו בקשת משיכה.</p>
+
+<p>{{Compat("webextensions.manifest.permissions")}}</p>
diff --git a/files/he/mozilla/add-ons/webextensions/modify_a_web_page/index.html b/files/he/mozilla/add-ons/webextensions/modify_a_web_page/index.html
new file mode 100644
index 0000000000..8ad3ab8cc5
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/modify_a_web_page/index.html
@@ -0,0 +1,252 @@
+---
+title: שינוי דפים מהרשת
+slug: Mozilla/Add-ons/WebExtensions/Modify_a_web_page
+translation_of: Mozilla/Add-ons/WebExtensions/Modify_a_web_page
+---
+<div>{{AddonSidebar}}</div>
+
+<p>אחד השימושים הנפוצים להרחגה הוא לשנות דף מהרשת. לדוגמה,  הרחבה עשויה לרצות שלנות את הסגנון שבשימוש הדף , להסתיר צמתי DOM מסויימים, או להחדיר צמתי DOM נוןספים לדף.</p>
+
+<p>קיימות שתי דרכים לעשות זאת עם ממשקי פיתוח הרחבות הרשת:</p>
+
+<ul>
+ <li><strong>הצהרתית</strong>: על ידי הגדרת תבנית התואמת קבוצה של כתובות URL, וטעינת קבוצה של תסריטים לתוך בדפים שכתובת ה-URL שלהם תואמת את התבנית.</li>
+ <li><strong>תכנותית</strong>: באמתעות ממשקי פיתוח יישומי ג'אווה-סקריפט, טעינת התסריט לתוך הדף המאורח בלשונית מסויימת.</li>
+</ul>
+
+<p>בכל דרך, תסריטים אלה קרויים תסריטי תוכן, והם שונים מתסריטים אחרים שההרחבה עשויה מהם:</p>
+
+<ul>
+ <li>יש להם גישה רק לקבוצה קטנה של ממשקי פיתוח ההרחבות הרשת.</li>
+ <li>יש להם גישה ישירה לדפי הרשת אליהם הם נטענו.</li>
+ <li>הם מתקשרים עם שאר ההרחבה באמצעות ממשק פיתוח היישמוים של מערכת ההודעות.</li>
+</ul>
+
+<p>במאמר זה נתבונן בשתי השיטות של טעינת תסריט.</p>
+
+<h2 id="שינויים_בדפים_התואמים_תבנית_URL">שינויים בדפים התואמים תבנית URL</h2>
+
+<p>קודם כל, צרו תיקייה חדשה בשם "modify-page". בתיקייה זו, צרו קובץ בשם   "manifest.json", המכיל את התוכן הבא:</p>
+
+<pre class="brush: json notranslate">{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["https://developer.mozilla.org/*"],
+      "js": ["page-eater.js"]
+    }
+  ]
+
+}</pre>
+
+<p>המפתח <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> הוא הדרך לטעון תסריטים לתוך דפים התואמים תבניות  URL  במקרה זה, <code>content_scripts</code> מורה לדפדפן לטעון תסריט בשם   "page-eater.js" לתוך כל הדפים תחת <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p>
+
+<div class="note">
+<p>מאחר שהתכונה <code>"js"</code> של  <code>content_scripts</code> היא מערך, תוכלו להשתמש בה כדי להחדיר יותר מתסריט אחד לתוך דפים תואמים . אם תעשו זאת דף יחלוק את אותו התחום, כשם שתסריטים מרובים הנטענים על ידי דף, והם ייטענו בסדר שנרשמו בתוך המערך.</p>
+</div>
+
+<div class="note">
+<p>למפתח <code>content_scripts</code> יש גם תכונת <code>"css"</code> בה תוכלו להשתמש כדי להחסיר דפי סגנונות המקודדים ב-CSS</p>
+</div>
+
+<p>כעת, צרו קובץ בשם "page-eater.js" בתוך התיקייה "modify-page" , ושימו בו את התוכן הבא:</p>
+
+<pre class="brush: js notranslate">document.body.textContent = "";
+
+var header = document.createElement('h1');
+header.textContent = "This page has been eaten";
+document.body.appendChild(header);</pre>
+
+<p>כעת <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">iהתקינו את ההרחבה</a>, ובקרו בדף <a href="https://developer.mozilla.org/">https://developer.mozilla.org:/</a></p>
+
+<p>{{EmbedYouTube("lxf2Tkg6U1M")}}</p>
+
+<div class="note">
+<p>שימו לב כי למרות שבסרטון מוצג תסריט תוכן הפועל ב- <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>, תסריטי תוכן לעת עתה חסומים באתר זה.</p>
+</div>
+
+<h2 id="שינוי_דפים_תכנותית">שינוי דפים תכנותית</h2>
+
+<p>מה אם תרצו לאכול דפים, אבל רק כשהמשתמש/ת מבקש/ת זאת? הבה נעדכן את הדוגמה הבאה כך שנחדיר תסריט תוכן כאשר משתמש/ת מקיש/ה על פריט מתפריט ההקשר.</p>
+
+<p>תחילה, עדכנו את  "manifest.json" כך שיכיל את התוכן הבא:</p>
+
+<pre class="brush: json notranslate">{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "permissions": [
+    "activeTab",
+    "contextMenus"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}</pre>
+
+<p>כאן, הוצאנו את המפתח <code>content_scripts</code>, והוספנו שני מפתחות חדשים:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>: להחדיר תסריטים לתוך דפים שדרושות הרשאות לדפים שאנו מעדכנים. ההרשאה <a href="/he/docs/Mozilla/Add-ons/WebExtensions/manifest.json/הרשאות#הרשאות_ממשק_פיתוח_יישומים"><code>activeTab</code></a> היא דרך להשיג זאת זמנית עבור הלשונית הפעילה באותו רגע . דרושה לנו גם ההרשאה <code>contextMenus</code> כדי שנוכל להוסיף פריטים לתפריט ההקשר.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background">background</a></code>: We're using this to load a persistent <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">"background script"</a> called "background.js", in which we'll set up the context menu and inject the content script.</li>
+</ul>
+
+<p>Let's create this file. Create a new file called "background.js" in the "modify-page" directory, and give it the following contents:</p>
+
+<pre class="brush: js notranslate">browser.contextMenus.create({
+  id: "eat-page",
+  title: "Eat this page"
+});
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "eat-page") {
+    browser.tabs.executeScript({
+      file: "page-eater.js"
+    });
+  }
+});
+</pre>
+
+<p>In this script we're creating a <a href="/en-US/Add-ons/WebExtensions/API/ContextMenus/create">context menu item</a>, giving it a specific id and title (the text to be displayed in the context menu). Then we set up an event listener so that when the user clicks a context menu item, we check to see if it is our <code>eat-page</code> item. If it is, we inject "page-eater.js" into the current tab using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code> API. This API optionally takes a tab ID as an argument: we've omitted the tab ID, which means that the script is injected into the currently active tab.</p>
+
+<p>At this point the extension should look like this:</p>
+
+<pre class="line-numbers  language-html notranslate"><code class="language-html">modify-page/
+    background.js
+    manifest.json
+    page-eater.js</code></pre>
+
+<p>Now <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">reload the extension</a>, open a page (any page, this time) activate the context menu, and select "Eat this page":</p>
+
+<p>{{EmbedYouTube("zX4Bcv8VctA")}}</p>
+
+<div class="note">
+<p>Note that although this video shows the content script working in <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>, content scripts are currently blocked for this site.</p>
+</div>
+
+<h2 id="Messaging">Messaging</h2>
+
+<p>Content scripts and background scripts can't directly access each other's state. However, they can communicate by sending messages. One end sets up a message listener, and the other end can then send it a message. The following table summarises the APIs involved on each side:</p>
+
+<table class=" fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col">In content script</th>
+   <th scope="col">In background script</th>
+  </tr>
+  <tr>
+   <th scope="row">Send a message</th>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#sendMessage()">browser.runtime.sendMessage()</a></code></td>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/sendMessage">browser.tabs.sendMessage()</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">Receive a message</th>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onMessage">browser.runtime.onMessage</a></code></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="blockIndicator note">
+<p>In addition to this method of communication, which sends one-off messages, you can also use a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Connection-based_messaging">connection-based approach to exchange messages</a>. For advice on choosing between the options, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Choosing_between_one-off_messages_and_connection-based_messaging">Choosing between one-off messages and connection-based messaging</a>.</p>
+</div>
+
+<p>Let's update our example to show how to send a message from the background script.</p>
+
+<p>First, edit "background.js" so that it has these contents:</p>
+
+<pre class="brush: js notranslate">browser.contextMenus.create({
+  id: "eat-page",
+  title: "Eat this page"
+});
+
+function messageTab(tabs) {
+  browser.tabs.sendMessage(tabs[0].id, {
+    replacement: "Message from the extension!"
+  });
+}
+
+function onExecuted(result) {
+    var querying = browser.tabs.query({
+        active: true,
+        currentWindow: true
+    });
+    querying.then(messageTab);
+}
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "eat-page") {
+    let executing = browser.tabs.executeScript({
+      file: "page-eater.js"
+    });
+    executing.then(onExecuted);
+  }
+});
+</pre>
+
+<p>Now, after injecting "page-eater.js", we use <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">tabs.query()</a></code> to get the currently active tab, and then use <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code> to send a message to the content scripts loaded into that tab. The message has the payload <code>{replacement: "Message from the extension!"}</code>.</p>
+
+<p>Next, update "page-eater.js" like this:</p>
+
+<pre class="brush: js notranslate">function eatPageReceiver(request, sender, sendResponse) {
+  document.body.textContent = "";
+  var header = document.createElement('h1');
+  header.textContent = request.replacement;
+  document.body.appendChild(header);
+}
+browser.runtime.onMessage.addListener(eatPageReceiver);
+</pre>
+
+<p>Now instead of just eating the page right away, the content script listens for a message using <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code>. When a message arrives, the content script runs essentially the same code as before, except that the replacement text is taken from <code>request.replacement</code>.</p>
+
+<p>Since <code><a href="/en-US/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code> is an asynchronous function, and to ensure we send message only after listener has been added in "page-eater.js", we use <code>onExecuted</code> which will be called after "page-eater.js" executed.</p>
+
+<div class="note">
+<p>Press Ctrl+Shift+J (or Cmd+Shift+J on a Mac) OR <code>web-ext run --bc</code> to open <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a> to view <code>console.log</code> in background script. Alternatively use <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>  which allows you set breakpoint. There is currently no way to <a href="https://github.com/mozilla/web-ext/issues/759">start Add-on Debugger directly from web-ext</a>.</p>
+</div>
+
+<p>If we want send messages back from the content script to the background page,  we would use <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code> instead of <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code>, e.g.:</p>
+
+<pre class="brush: js notranslate">browser.runtime.sendMessage({
+    title: "from page-eater.js"
+});</pre>
+
+<div class="note">
+<p>These examples all inject JavaScript; you can also inject CSS programmatically using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS()</a></code> function.</p>
+</div>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Content scripts</a> guide</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> manifest key</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> manifest key</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code></li>
+ <li>Examples using <code>content_scripts</code>:
+  <ul>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/borderify">borderify</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/emoji-substitution" rel="noopener">emoji-substitution</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/page-to-extension-messaging">page-to-extension-messaging</a></li>
+  </ul>
+ </li>
+ <li>Examples using <code>tabs.executeScript()</code>:
+  <ul>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/context-menu-copy-link-with-types">context-menu-copy-link-with-types</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/he/mozilla/add-ons/webextensions/user_interface/browser_action/index.html b/files/he/mozilla/add-ons/webextensions/user_interface/browser_action/index.html
new file mode 100644
index 0000000000..d3ae50e9d9
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/user_interface/browser_action/index.html
@@ -0,0 +1,51 @@
+---
+title: כפתור בסרגל הכלים
+slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action
+tags:
+  - WebExtension
+  - הרחבת רשת
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action
+---
+<div>{{AddonSidebar}}</div>
+
+<p>קרוי בשימוש נפוץ <a href="/he/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">פכולת דפדפן</a>, אפשרות זו של ממשק המשתמש  היא כפתור המתוסף לסרגל הכלים של הדפדפן. המשתמשים מקישים על הכפתור כדי לתקשר עם ההרחבה שלך.<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="display: block; height: 182px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<p>הכפתור בסרגל הכלים (פעולת דפדפן) דומה לכפתור של שur, הכתובת (פעולת דף). להבדלים ולהדרכה מתי להשתמש במה,ראו <a href="/en-US/Add-ons/WebExtensions/user_interface/Page_actions#Page_actions_and_browser_actions">Page actions and browser actions</a>.</p>
+
+<h2 id="Specifying_the_browser_action">Specifying the browser action</h2>
+
+<p>You define the browser action's properties using the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> key in manifest.json:</p>
+
+<pre class="brush: json notranslate"><code class="language-json">"browser_action": {
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?"
+}</code></pre>
+
+<p>The only mandatory key is <code>default_icon</code>.</p>
+
+<p>There are two ways to specify a browser action: with or without a <a href="/en-US/Add-ons/WebExtensions/Popups">popup</a>. If you don't specify a popup, when the user clicks the button an event is dispatched to the extension, which the extension listens for using <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/BrowserAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>browserAction.onClicked</code></a>:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">browser.browserAction.onClicked.addListener(<var>handleClick</var>);</code></pre>
+
+<p>If you specify a popup, the click event is not dispatched: instead, the popup is shown when the user clicks the button. The user is able to interact with the popup and it closes automatically when the user clicks outside it. See the <a href="/en-US/Add-ons/WebExtensions/Popups">Popup</a> article for more details on creating and managing popups.</p>
+
+<p>Note that your extension can have only one browser action.</p>
+
+<p>You can change many of the browser action properties programmatically using the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> API.</p>
+
+<h2 id="Icons">Icons</h2>
+
+<p>For details on how to create icons to use with your browser action, see <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> in the <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> documentation.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The <code><a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a></code> repository on GitHub contains two examples of extensions that implement browser actions:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/webextensions-examples/blob/master/bookmark-it/">bookmark-it</a> uses a browser action without a popup</li>
+ <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> uses a browser action with a popup</li>
+</ul>
diff --git a/files/he/mozilla/add-ons/webextensions/user_interface/index.html b/files/he/mozilla/add-ons/webextensions/user_interface/index.html
new file mode 100644
index 0000000000..78b988a523
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/user_interface/index.html
@@ -0,0 +1,97 @@
+---
+title: User interface
+slug: Mozilla/Add-ons/WebExtensions/user_interface
+tags:
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - User Interface
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Extensions that use WebExtension APIs are provided with several user interface options so that their functionality can be made available to the user. A summary of those options is provided below, with a more detailed introduction to each user interface option in this section.</p>
+
+<div class="note">
+<p>For advice on using these UI components to create a great user experience in your extension, please see the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a> article.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">UI option</th>
+   <th scope="col">Description</th>
+   <th scope="col" style="width: 350px;">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Browser_action">Toolbar button</a> (browser action)</td>
+   <td>A button on the browser toolbar that dispatches an event to the extension when clicked. By default, the button is visible in all tabs.</td>
+   <td><img alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>Toolbar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td>
+   <td>A popup on a button in the browser toolbar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td>
+   <td><img alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a> (page action)</td>
+   <td>A button on the browser address bar that dispatches an event to the extension when clicked. By default, the button is hidden in all tabs.</td>
+   <td><img alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>Address bar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td>
+   <td>A popup on a button in the browser address bar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td>
+   <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu item</a></td>
+   <td>Menu items, checkboxes, and radio buttons on one or more of the browser's context menus. Also, menus can be structured by adding separators. When menu items are clicked, an event is dispatched to the extension.</td>
+   <td><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebar</a></td>
+   <td>
+    <p dir="ltr">An HTML document displayed next to a web page, with the option for unique content per page. The sidebar is opened when the extension is installed, then obeys the user's sidebar visibility selection. User interaction within the sidebar is handled by its HTML document.</p>
+   </td>
+   <td><img alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options page</a></td>
+   <td>A page that enables you to define preferences for your extension that your users can change. The user can access this page from the browser's add-ons manager.</td>
+   <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td>
+  </tr>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</a></td>
+   <td>Use web pages included in your extension to provide forms, help, or any other content required, within windows or tabs.</td>
+   <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notification</a></td>
+   <td>Transient notifications displayed to the user through the underlying operating system's notifications mechanism. Dispatches an event to the extension when the user clicks a notification, or when a notification closes (either automatically or at the user's request).</td>
+   <td><img alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestion</a></td>
+   <td>Offer custom address bar suggestions when the user enters a keyword.</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panel</a></td>
+   <td>A tab with an associated HTML document that displays in the browser's developer tools.</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The following how-to guides provide step-by-step guidance to creating some of these user interface options:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Accessibility_guidelines">Accessibility guidelines</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">Browser styles</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li>
+</ul>
diff --git a/files/he/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/he/mozilla/add-ons/webextensions/what_are_webextensions/index.html
new file mode 100644
index 0000000000..2dbe632f44
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/what_are_webextensions/index.html
@@ -0,0 +1,59 @@
+---
+title: מהן הרחבות?
+slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+tags:
+  - הרחבות
+  - הרחבות רשת
+translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+---
+<div>{{AddonSidebar}}</div>
+
+<p>הרחבה מוסיפה תכונות ותפקודים לדפדפן. היא נוצרת באמצעות טכנולוגיות מוכרות מבוססות רשת—HTML, CSS, וג'אווהסקריפט. החא משתמשת באותם ממשקי פיתוח לרשת כמו ג'אווה סקריפט  בדף רשת, אך בנוסף ההרחבה ניגשת לקבוצת ממשקי פיתוח בג'אווהסקריפט משלה. . זאת אומרת שניתן לעשות הרבה יותר בהרחבה מאשר עם קוד בדף הרשת. . הנה לפניכם מספר דוגמאות של דברים שניתן לעשות:</p>
+
+<p><strong>שדרוג או השלמה של אתר</strong>: השתמשו בתוסף למסור תכונות פנים דפדפן או מידע מתוך האתר שלכם. הרשו למשתמשים לאסוף פרטים מתוך דפים שהם מבקרים בהם כדי לשפר את השירות שאתם מציעים.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15808/Amazon_add_on.png"></p>
+
+<p>Examples: <a href="https://addons.mozilla.org/en-US/firefox/addon/amazon-browser-bar/">Amazon Assistant for Firefox</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/onenote-clipper/">OneNote Web Clipper</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/">Grammarly for Firefox</a></p>
+
+<p><strong>לתת למשתמשים להציג את האישיות שלהם</strong>: הרחבות דפדפן יכולות לטפל בתוכן של דפים ברשת; לדוגמא, לתת למשתמשים להוסיף את הלוגו או התמונה המועדפים עליהם כרקע לכל דף שהם מבקרים בו. הרחבות יכולות גם לאפשר למשתמשים לעדכן את המראה של ממשק משתמש פיירפוקס, באותה דרך שמאפשרים זאת  <a href="https://developer.mozilla.org/en-US/Add-ons/Themes/Theme_concepts">תוסף ערכת נושא </a> עצמאיים.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15809/MyWeb_New_Tab_add_on.png" style="height: 398px; width: 540px;"></p>
+
+<p>לדוגמא:: <a href="https://addons.mozilla.org/en-US/firefox/addon/myweb-new-tab/">MyWeb New Tab</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/tabliss/">Tabliss</a>, ו-<a href="https://addons.mozilla.org/en-US/firefox/addon/vivaldifox/">VivaldiFox</a></p>
+
+<p><strong>להוסיף או להסיר תוכן מדפים ברשת</strong>: ייתכן ותרצו לעזור למשתמשים לחסום פרסומות פולשניותמהדפים ברשת , לספק גישה למדריך טיולים בכל עת בה ארץ או עיר מוזכרים בדף ברשת, או לעצב מחדש תוכן עמוד כדי להציע חוויית קריאה עקבית . עם היכולת לגשת ולעדכן הן את ה-HTML והן את ה CSS של הדף, הרחבות יכולות לאפשר למשתמשים לראות את הרשת כפי שירצו.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15807/ublock_origin_add_on.png" style="height: 480px; width: 640px;"></p>
+
+<p>דוגמאות: <a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/">uBlock Origin</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/reader/">Reader</a>, ו-<a href="https://addons.mozilla.org/en-US/firefox/addon/toolbox-google-play-store/">Toolbox for Google Play Store™</a></p>
+
+<p><strong>להוסיף כלים ותכונות דפדפן חדשים</strong>: הוסיפו תכונות חדשות ללוח מטלות, או צרו תמונות קוד QR מכתובות  URL, קישורים לאינטרנט, או טקסט דף. עם אפשרויות  UI גמישות והכוח של  <a href="/en-US/Add-ons/WebExtensions">ממשקי פיתוח של הרחבות רשת</a> תוכלו להוסיף בקלות  תכונות חדשות לדפדפן . כמו כן, תוכלו לשדרג כממעט עכל תכונת אתר אינטרנט או תפקודו, הוא לא חייב להיות האתר שלכם.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15806/QR_Code_Image_Generator_add_on.png"></p>
+
+<p>דוגמאות: <a href="https://addons.mozilla.org/en-US/firefox/addon/qr-code-image-generator/">QR Code Image Generator</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/swimlanes-for-trello/">Swimlanes for Trello</a>, ו-<a href="https://addons.mozilla.org/en-US/firefox/addon/tomato-clock/">Tomato Clock</a></p>
+
+<p><strong>משחקים</strong>: הציעו משחקי מחשב מסורתיים עם תכונות משחק לא-מקוונות , או גלו אפשרויות משחק חדשות; לדוגמא, על ידי שילוב המשחק בגלישה היום יומית.</p>
+
+<p> <img alt="" src="https://mdn.mozillademos.org/files/15805/Asteroids_in_Popup_add_on%20.png" style="height: 438px; width: 700px;"></p>
+
+<p>דוגמאות: <a href="https://addons.mozilla.org/en-US/firefox/addon/asteroids-in-popup/">Asteroids in Popup</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/solitaire-card-game-new-tab/">Solitaire Card Game New Tab</a>, ו-<a href="https://addons.mozilla.org/en-US/firefox/addon/2048-prime/">2048 Prime</a>.</p>
+
+<p><strong>הוספת כלי פיתוח</strong>: ייתכן שתרצו להספק כלי פיתוח לרשת כעסק שלכם או פיתחתם טכניקה או גישה שימושיות לפיתוח לרשת שתרצו לשתף. בכל אחת מהדרכים, תוכלו לשדרג את כלי הפיתוח המובנים של פיירפוקס על ידי הוספת לשונית חדשה לסרגל הכלים של המפתח/ת.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15804/aXe_Developer_Tools_add_on.png" style="height: 261px; width: 700px;"></p>
+
+<p>דוגמאות: <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/react-devtools/">Web React Developer Tools</a>, ו-<a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">aXe Developer Tools</a></p>
+
+<p>הרחבות לפיירפוקס נבנות באמצעות <a href="/en-US/Add-ons/WebExtensions">ממשקי הפיתוח להרחבות רשת</a>, מערכת לדפדפנים שוניםלפיתוח הרחבות. במידה רבה , tממשק הפיתוח תואם ל-<a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a> הנתמכים על ידי כרום ואופרה. הרחבות הנכתבותעבור דפדפנים אלה ירוצו ברוב המקרים על פיירפוקס will in most cases run inאו  פ Microsoft Edge ב<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">שינויים</a> קלים בלבד. ממשק הפיתוח גם תואם באופן מלא ל<a href="/en-US/Firefox/Multiprocess_Firefox">פיירפוקס מרובה תהליכים</a>.</p>
+
+<p>אם יש לך הצעות אושאלות, או שיש לך צורך בעזרה לעבור מתוסף מהדור הישן לממשקח הפיתוח של הרחבות הרשת , ניתון להשיגנו ב- <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> או בערוץ <a href="irc://irc.mozilla.org/extdev">#addons</a> ב-<a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+
+<h2 id="מה_הלאה">מה הלאה?</h2>
+
+<ul>
+ <li>הדרכה צעד צעד לפיתוח הרחבה פשוטה ב- <a href="/he-IL/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">ההרחבה הראשונה שלך.</a></li>
+ <li>למדו על מבנה ההרחבה ב <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">אנטומיה של הרחבה</a>.</li>
+ <li>נסו עוד הרחבות לדוגמא ב<a href="/en-US/Add-ons/WebExtensions/Examples">הרחבות לדוגמא</a>.</li>
+</ul>
diff --git a/files/he/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/he/mozilla/add-ons/webextensions/your_first_webextension/index.html
new file mode 100644
index 0000000000..a167a224b4
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/your_first_webextension/index.html
@@ -0,0 +1,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>
diff --git a/files/he/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/he/mozilla/add-ons/webextensions/your_second_webextension/index.html
new file mode 100644
index 0000000000..528daff645
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/your_second_webextension/index.html
@@ -0,0 +1,458 @@
+---
+title: ההרחבה השניה שלך
+slug: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
+tags:
+  - הרחבות רשת
+translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
+---
+<div>{{AddonSidebar}}
+<p>אם כבר עברת את המאמר <a href="/he-IL/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">ההרחבה הראשונה שלך</a> , כבר קיבלת מושג איך לכתוב הרחבה. <span class="seoSummary">במאמר זה, נכתוב הרחבה קצת יותר מורכבת המדגימה עוד קצת מממשקי הפיתוח.</span></p>
+
+<p>ההרחבה מוסיפה כפתור חדש לסרגל הכלים של פיירפוקס. כשהמשתמש/ת מקליק/ה על הכפתור, נציג חלון קופץ המאפשר לבחור חיה. בהיבחר חיה, נחליף את תוכן הדף בחיה שנבחרה</p>
+
+<p>כדי לממש זאת, אנו:</p>
+
+<ul>
+ <li><strong>נגדיר <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">פעולת דפדפן</a>, שהיא כפתור המחובר לסרגל הכלים של פיירפוקס</strong>.<br>
+  לכפתור זה נספק:
+  <ul>
+   <li>צלמית בשם "beasts-32.png"</li>
+   <li>חלון קופץ שייפתח כשהכפתור נלחץ. החלון הקופץ יכיל HTML, CSS, ו- JavaScript.</li>
+  </ul>
+ </li>
+ <li><strong>נגדיר צלמית עבור ההרחבה</strong>, ושמה "beasts-48.png". היא תהיה מוצגת  ב"ניהול ההרחבות שלך".</li>
+ <li><strong>נכתוב תסריט תוכן, "beastify.js" שיוחדר לתוך דפי הרשת</strong>.<br>
+  זה הקוד שמשנה בפועל את הדפים.</li>
+ <li><strong>נארוז כמה תמונות של חיות, להחליף תץמונות בדף הרשת</strong>.<br>
+  נכין את התמונות "web accessible resources" כך שדף הרשת יפנה אליהן.</li>
+</ul>
+
+<p>תוכלו לדמיין את המבנה בכללותו של ההרחבה כך:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13671/Untitled-1.png" style="display: block; height: 1200px; margin-left: auto; margin-right: auto; width: 860px;"></p>
+
+<p>זוהי הרחבה פשוטה, אך מציגה רבים מהקונספטים הבסיסיים של ממשק פיתוח הרחבות הרשת:</p>
+
+<ul>
+ <li>הוספת כפתור לסרגל הכלים</li>
+ <li>הוספת פאנל של חלון קו]ץ באמצעות HTML, CSS, ו-JavaScript</li>
+ <li>החדרת תסריט תוכן לתוך דפי רשת</li>
+ <li>תקשורת בין תסריטי תוכן לבין שאר ההרחבה</li>
+ <li>אריזת משאבים היכולים להיות בשימוש על ידי הדפים ברשת עם ההרחבה</li>
+</ul>
+
+<p>תוכלו למצוא <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">complete source code for the extension on GitHub</a>.</p>
+
+<p>כדי לכתוב את ההרחבה, יש צורך בפיירפוקס מגרסא 45 או חדשה יותר.</p>
+
+<h2 id="כתיבת_ההרחבה">כתיבת ההרחבה</h2>
+
+<p>צרו תיקייה חדשה ונווטו לתוכה:</p>
+
+<pre class="brush: bash">mkdir beastify
+cd beastify</pre>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>כעת צרו קובץ בשם "manifest.json", והכניסו בו את התוכן:</p>
+
+<pre class="brush: json">{
+
+  "manifest_version": 2,
+  "name": "Beastify",
+  "version": "1.0",
+
+  "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
+  "icons": {
+    "48": "icons/beasts-48.png"
+  },
+
+  "permissions": [
+    "activeTab"
+  ],
+
+  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Beastify",
+    "default_popup": "popup/choose_beast.html"
+  },
+
+  "web_accessible_resources": [
+    "beasts/frog.jpg",
+    "beasts/turtle.jpg",
+    "beasts/snake.jpg"
+  ]
+
+}
+</pre>
+
+<ul>
+ <li>שלושת המפתחות הראשונים: <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name">name</a></code>, ו- <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version">version</a></code>, הם חובה ומכילים מטאדאדה בסיסית עבור ההרחבה .</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description">description</a></code> ו- <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></code> הם אופציונאליים, אך מומלצים: הם מספקים מידע שימושי אודות ההרחבה.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> הוא אופציונאלי, אך מומלץ: הוא מאפשר לציין צלמית עבור ההרחבה , שתהיה מוצגת ב"ניהול ההרחבות שלך".</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> מהווה את רשימת ההרשאות שההרחבה זקוקה להן . אנו רק מבקשים  <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>הרשאותactiveTab</code></a> כאן.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> מציין את הכפתור בסרגל הכלים. We'רנו מספקים 3 פיסות מידע כאן:
+  <ul>
+   <li><code>default_icon</code> הוא חובה, ומצביע לצלמית שבכפתור</li>
+   <li><code>default_title</code> הוא אופציונאלי, ויוצג כעצת הכלי</li>
+   <li><code>default_popup</code> יהיה בשימוש אם תרצו שחלון קופץ יוצג כאשר המשתמש/ת מקליק/ה על הכפתור . אנו רוצים זאת, אז כללנו את המפתח וגרמנו לו להצביע לקובץ  HTML הכלול בהרחבה.</li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code> מהווה רשימת קבצים שברמטננו להפוך לנגישים לדפי רשת . מאחר וההרחבה מחליפה את תוכן הדף בתמונות  שארזנו בתוך ההרחבה, נצטרך להפוך תמונות אלה לנגישות לדף.</li>
+</ul>
+
+<p>לתשומת לבך כל המסלולים הם יחסיים ל-manifest.json עצמו.</p>
+
+<h3 id="הצלמית">הצלמית</h3>
+
+<p>להרחבה צריכה להיות צלמית. היא תהיה מוצגת על יד רישום ההרחבה ב"ניהול ההרחבות שלך" (תוכלו לפתוח אותה על ידי ביקור בכתובת "about:addons"). ה- manifest.json הבטיח שתהיה לנו צלמית לסרגל הכלים ב-  "icons/beasts-48.png".</p>
+
+<p>צרו את התיקייה "icons" ושמרו שם את הצלמית בשם  "beasts-48.png".  ניתן להשתמש ב- <a href="https://github.com/mdn/webextensions-examples/raw/master/beastify/icons/beasts-48.png">the one from our example</a>, הלקוחה מתוך ה-<a href="https://www.iconfinder.com/iconsets/free-retina-icon-set">Aha-Soft’s Free Retina iconset</a>, ונמצאת בשימוש תחת תנאי ה<a href="http://www.aha-soft.com/free-icons/free-retina-icon-set/">רשיון</a> שלה</p>
+
+<p>אם תבחרו לספק צלמית משלכם, היא צריכה להיות בגודל 48x48 פיקסלים. תוכלו לספק גם צלמית בגודל 96x96 פיקסלים  , לתצוגות ברזולוציה יותר גבוהה, ואם תעשו זאת it היא תהיה מצויינת כתכונה <code>96</code> של אובייקט ה-<code>icons</code> ב-manifest.json:</p>
+
+<pre class="brush: json line-numbers  language-json"><code class="language-json">"icons": {
+  "48": "icons/beasts-48.png",
+  "96": "icons/beasts-96.png"
+}</code></pre>
+
+<h3 id="הכפתור_בסרגל_הכלים">הכפתור בסרגל הכלים</h3>
+
+<p>הכפתור בסרגל הכלים צריך גם צלמית, וה- manifest.json מבטיח שתהיה לנו צלמית לכפתור בסרגל הכלים ב"icons/beasts-32.png".</p>
+
+<p>שמרו צלמית בשם "beasts-32.png" בתיקייה "icons" . תוכלו להשתמש ב<a href="https://github.com/mdn/webextensions-examples/raw/master/beastify/icons/beasts-32.png">זו מהדוגמה שלנו</a>, הלקוחה מתוך <a href="http://www.iconbeast.com/free">IconBeast Lite icon set</a> ובשימוש תחת תנאי <a href="http://www.iconbeast.com/faq/">הרשיון</a>. שלה.</p>
+
+<p>אם לא יסופק חלון קופץ, יישלח אירוע הקלקה להרחבה כאשר המשתמש/ת מקיש/ה על הכפתור. אם כן יסופק חלון קופץ, אירוע ההקלקה לא יישלח , אך במקום זאת, החלון הקופץ ייפתח . אנו רוצים חלון קופץ, אז הבה ניצור אותו כצעד הבא.</p>
+
+<h3 id="החלון_הקופץ">החלון הקופץ</h3>
+
+<p>תפקיד החלון הקופץ הוא לאפשר למשתמש/ת לבחור אחת מתוך שלוש חיות.</p>
+
+<p>צרו תיקייה חדשה בשם "popup" תחת שורש ההרחבה. זה המקום שבו נשמור את הקוד עבור החלון הקופץ. החלון הקופץ יהיה מורכב משלושה קבצים:</p>
+
+<ul>
+ <li><strong><code>choose_beast.html</code></strong> מגדיר את תוכן הלוח</li>
+ <li><strong><code>choose_beast.css</code></strong> מסגנן את התוכן</li>
+ <li><strong><code>choose_beast.js</code></strong> מטפל בבחירת המשתמש/ת על ידי הרצת תסריט תוכן בלשונית הפעילה.</li>
+</ul>
+
+<pre class="brush: bash">mkdir popup
+cd popup
+touch choose_beast.html choose_beast.css choose_beast.js
+</pre>
+
+<h4 id="choose_beast.html">choose_beast.html</h4>
+
+<p>קובץ ה-HTML נראה כך:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;link rel="stylesheet" href="choose_beast.css"/&gt;
+  &lt;/head&gt;
+
+&lt;body&gt;
+  &lt;div id="popup-content"&gt;
+    &lt;div class="button beast"&gt;Frog&lt;/div&gt;
+    &lt;div class="button beast"&gt;Turtle&lt;/div&gt;
+    &lt;div class="button beast"&gt;Snake&lt;/div&gt;
+    &lt;div class="button reset"&gt;Reset&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div id="error-content" class="hidden"&gt;
+    &lt;p&gt;Can't beastify this web page.&lt;/p&gt;&lt;p&gt;Try a different page.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;script src="choose_beast.js"&gt;&lt;/script&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<p>יש לנו אלמנט <code><a href="/en-US/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> עם ID  שערכו <code>"popup-content"</code> המכיל אלמנט עבור כל חיה שנבחרה. יש לנו עוד אלמנט <code>&lt;div&gt;</code> עם ID שערכו <code>"error-content"</code> וסיווגו <code>"hidden"</code>. נשתמש בו במקרה שיש בעיה לאתחל את החלון הקופץ .</p>
+
+<p>יש לשים לב לכך שאני כוללים את קובצי  ה-  CSS וה- JS מקובץ זה, בדיוק כמו דף ברשת.</p>
+
+<h4 id="choose_beast.css">choose_beast.css</h4>
+
+<p>ה- CSS מקבע את מידות החלון הקופץ, מבטיח ששלוש הבחירות ימלאו את החלל, ונותן להם סגנון בסיסי. הוא גם מסתיר אלמנטים עם <code>class="hidden"</code>: כלומר שכברירת מחדל <code>"error-content"</code> <code>&lt;div&gt;</code> יוסתרו.</p>
+
+<pre class="brush: css">html, body {
+  width: 100px;
+}
+
+.hidden {
+  display: none;
+}
+
+.button {
+  margin: 3% auto;
+  padding: 4px;
+  text-align: center;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.beast:hover {
+  background-color: #CFF2F2;
+}
+
+.beast {
+  background-color: #E5F2F2;
+}
+
+.reset {
+  background-color: #FBFBC9;
+}
+
+.reset:hover {
+  background-color: #EAEA9D;
+}
+
+</pre>
+
+<h4 id="choose_beast.js">choose_beast.js</h4>
+
+<p>הנה הג'אווהסקריפט עבור החלון הקופץ:</p>
+
+<pre class="brush: js">/**
+ * CSS to hide everything on the page,
+ * except for elements that have the "beastify-image" class.
+ */
+const hidePage = `body &gt; :not(.beastify-image) {
+                    display: none;
+                  }`;
+
+/**
+ * Listen for clicks on the buttons, and send the appropriate message to
+ * the content script in the page.
+ */
+function listenForClicks() {
+  document.addEventListener("click", (e) =&gt; {
+
+    /**
+     * Given the name of a beast, get the URL to the corresponding image.
+     */
+    function beastNameToURL(beastName) {
+      switch (beastName) {
+        case "Frog":
+          return browser.extension.getURL("beasts/frog.jpg");
+        case "Snake":
+          return browser.extension.getURL("beasts/snake.jpg");
+        case "Turtle":
+          return browser.extension.getURL("beasts/turtle.jpg");
+      }
+    }
+
+    /**
+     * Insert the page-hiding CSS into the active tab,
+     * then get the beast URL and
+     * send a "beastify" message to the content script in the active tab.
+     */
+    function beastify(tabs) {
+      browser.tabs.insertCSS({code: hidePage}).then(() =&gt; {
+        let url = beastNameToURL(e.target.textContent);
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "beastify",
+          beastURL: url
+        });
+      });
+    }
+
+    /**
+     * Remove the page-hiding CSS from the active tab,
+     * send a "reset" message to the content script in the active tab.
+     */
+    function reset(tabs) {
+      browser.tabs.removeCSS({code: hidePage}).then(() =&gt; {
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "reset",
+        });
+      });
+    }
+
+    /**
+     * Just log the error to the console.
+     */
+    function reportError(error) {
+      console.error(`Could not beastify: ${error}`);
+    }
+
+    /**
+     * Get the active tab,
+     * then call "beastify()" or "reset()" as appropriate.
+     */
+    if (e.target.classList.contains("beast")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(beastify)
+        .catch(reportError);
+    }
+    else if (e.target.classList.contains("reset")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(reset)
+        .catch(reportError);
+    }
+  });
+}
+
+/**
+ * There was an error executing the script.
+ * Display the popup's error message, and hide the normal UI.
+ */
+function reportExecuteScriptError(error) {
+  document.querySelector("#popup-content").classList.add("hidden");
+  document.querySelector("#error-content").classList.remove("hidden");
+  console.error(`Failed to execute beastify content script: ${error.message}`);
+}
+
+/**
+ * When the popup loads, inject a content script into the active tab,
+ * and add a click handler.
+ * If we couldn't inject the script, handle the error.
+ */
+browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
+.then(listenForClicks)
+.catch(reportExecuteScriptError);
+
+</pre>
+
+<p>המקום להתחיל פה הוא שורה 96. תסריט החלון הקופץ מבצע תסריט תוכן בלשונית הפעילה מייד כשהחלון הקופץ נטען , באמצעות ממשק הפיתוח <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">browser.tabs.executeScript()</a></code>. אם ביצוע תסריט התוכן הצליח , תסריט התוכן יישאר טעון בעמוד עד שהלשונית נסגרת או שהמשתמש/ת מנווט/ת לדף שונה.</p>
+
+<p>סיבה נפוצה שהקריאה ל- <code>browser.tabs.executeScript()</code> עלולה להיכשל היא שלא ניתן לבתע תסריטי תוכן בכל הדפים. לדוגמא, לא ניתן לבצע אותם בדפים פריגילגיים של הדפדפן כגון "about:debugging" , ולא ניתן לבצע אותם בדפים בתוך המתחם  <a href="https://addons.mozilla.org/">addons.mozilla.org</a>. אם זה נכשל,, <code>reportExecuteScriptError()</code> יסתיר את ה- <code>"popup-content"</code> <code>&lt;div&gt;</code>, יציג את ה- <code>"error-content"</code> <code>&lt;div&gt;</code>, וירשום שגיאה ל-<a href="/en-US/Add-ons/WebExtensions/Debugging">console</a>.</p>
+
+<p>אם ביצוע תסריט התוכן יצליח, נקרא ל- <code>listenForClicks()</code>. הוא יאזין לקליקים בחלון הקופץ..</p>
+
+<ul>
+ <li>אם נלחץ כםתור עם <code>class="beast"</code>, אזי נקרא ל-<code>beastify()</code>.</li>
+ <li>אם נלחץ כפתור עם <code>class="reset"</code>, אזי נקרא ל-<code>reset()</code>.</li>
+</ul>
+
+<p>הפונקציה <code>beastify()</code> מבצעת שלושה דברים:</p>
+
+<ul>
+ <li>ממפה את הכפתור הנלחץ לכתובת URL המצביע לתמונה של חיה מסויימת</li>
+ <li>מסתירה את כל התוכן של הדף על ידי החדרת CSS, באמצעות ממשק הפיתוח <code><a href="/en-US/Add-ons/WebExtensions/API/tabs/insertCSS">browser.tabs.insertCSS()</a></code></li>
+ <li>שולחת הודעת "beastify" לתסריט התוכן באמצעות ממשק הפיתוח <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">browser.tabs.sendMessage()</a></code>, תוך בקשה לשנות את העמוד לתמונת חיה, ושליחת כתובת ה- URL לתמונת החיה.</li>
+</ul>
+
+<p>הפונקציה <code>reset()</code> בהכרח מבטלת את פעולת  beastify:</p>
+
+<ul>
+ <li>מסירה את ה- CSS שהוספנו, באמצעות ממשק הפיתוח  <code><a href="/en-US/Add-ons/WebExtensions/API/tabs/removeCSS">browser.tabs.removeCSS()</a></code></li>
+ <li>שולחת הודעת  "reset" לתסריט התוכן בבקשה להשיב את הדף לקדמותו.</li>
+</ul>
+
+<h3 id="תסריט_התוכן">תסריט התוכן</h3>
+
+<p>צרו תיקייה חדשה, תחת שורש ההרחבה, ששמה "content_scripts" וצרו קובץ חדש ששמו "beastify.js", עם התוכן הבא:</p>
+
+<pre class="brush: js">(function() {
+  /**
+   * Check and set a global guard variable.
+   * If this content script is injected into the same page again,
+   * it will do nothing next time.
+   */
+  if (window.hasRun) {
+    return;
+  }
+  window.hasRun = true;
+
+  /**
+   * Given a URL to a beast image, remove all existing beasts, then
+   * create and style an IMG node pointing to
+   * that image, then insert the node into the document.
+   */
+  function insertBeast(beastURL) {
+    removeExistingBeasts();
+    let beastImage = document.createElement("img");
+    beastImage.setAttribute("src", beastURL);
+    beastImage.style.height = "100vh";
+    beastImage.className = "beastify-image";
+    document.body.appendChild(beastImage);
+  }
+
+  /**
+   * Remove every beast from the page.
+   */
+  function removeExistingBeasts() {
+    let existingBeasts = document.querySelectorAll(".beastify-image");
+    for (let beast of existingBeasts) {
+      beast.remove();
+    }
+  }
+
+  /**
+   * Listen for messages from the background script.
+   * Call "beastify()" or "reset()".
+  */
+  browser.runtime.onMessage.addListener((message) =&gt; {
+    if (message.command === "beastify") {
+      insertBeast(message.beastURL);
+    } else if (message.command === "reset") {
+      removeExistingBeasts();
+    }
+  });
+
+})();
+</pre>
+
+<p>הדבר הראשון שתסריט התוכן עושה  הוא לבדוק שקיים משתנה גלובלי בשם <code>window.hasRun</code>: אם הוא מוגדר כאמת התסריט ירוץ מוקדם, אחרת הוא מציב ערך אמת ל0 <code>window.hasRun</code> וממשיך. הסיבה שאנו עושים זאת היא שכל פעם שהמשתמש/ת פותח/ת את החלון הקופץ , החלון הקופץ מבצע תסריט תוכן בלשונית הפעילה , כך שיכולים להיות לנו מופעים מרובים של התסריט רצים בלשונית יחידה. אם זה קורה, נצטרך לדאוג שרק המופע הראשון יעשה משהו באמת.</p>
+
+<p>אחר כך, המקום להתחיל הוא שורה 40, בה תסריט התוכן מאזין להודעות מהחלון הקופץ, באמצעות ממשק הפיתוח  <code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code>. ראינו לעיל כי תסריט החלון הקופץ יכול לשלוח שני סוגי הודעות שונים : "beastify" ו-"reset".</p>
+
+<ul>
+ <li>אם ההודעה היא "beastify", נצפה ממנה לכלול כתובת URL המצביעה לתמונת חיה. נסיר כל חיה שייתכן ונוספה על ידי קריאות קודמות ל-  "beastify" אז נבנות קריאות ומספחות אלמנט   <code><a href="/en-US/docs/Web/HTML/Element/img">&lt;img&gt;</a></code> שהמאפיין <code>src</code> שלו מוגדר להיות כתובת   URL של חיה.</li>
+ <li>אם ההודעה היא "reset", פשוט נסיר כל חיה  שייתכן שנוספה.</li>
+</ul>
+
+<h3 id="החיות">החיות</h3>
+
+<p>לסיום, עלינו לכלול את התמונות של החיות.</p>
+
+<p>צרו תיקייה חדשה ששמה "beasts", והוסיפו שלוש תמונות לתיקייה זו, אם השמות הנכונים. תוכלו להשיג את התמונות מ<a href="https://github.com/mdn/webextensions-examples/tree/master/beastify/beasts">מאגר ה-GitHub </a>, או מפה:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11459/frog.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11461/snake.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11463/turtle.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"></p>
+
+<h2 id="לנסות_את_זה">לנסות את זה</h2>
+
+<p>תחילה, בדקו היטב שהקבצים הנכונים נמצאים במקומות הנכונים:</p>
+
+<pre>beastify/
+
+    beasts/
+        frog.jpg
+        snake.jpg
+        turtle.jpg
+
+    content_scripts/
+        beastify.js
+
+    icons/
+        beasts-32.png
+        beasts-48.png
+
+    popup/
+        choose_beast.css
+        choose_beast.html
+        choose_beast.js
+
+    manifest.json</pre>
+
+<p>החל מפיירפוקס 45, ניתן להתקין הרחבות זמנית מהדיסק.</p>
+
+<p>פתחו את "about:debugging" בפיירפוקס, הקליקו  "טעינת תוספות זמניות...", ובחרו את ה- manifest.json שלכם. תצטרכו לראות כעת את צלמית ההרחבה מופיעה בסרגל הכלים של פיירפוקס</p>
+
+<p>{{EmbedYouTube("sAM78GU4P34")}}</p>
+
+<p>פתחו דף ברשת, ואז הקליקו על הצלמית, בחרו חיה , ורארו את הדף משתנה:</p>
+
+<p>{{EmbedYouTube("YMQXyAQSiE8")}}</p>
+
+<h2 id="פיתוח_משורת_הפקודה">פיתוח משורת הפקודה</h2>
+
+<p>תוכלו לבצע אוטומציה של צעד ההתקנה הזמנית על ידי שימוש בכלי  <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>. נסו את זה:</p>
+
+<pre class="brush: bash">cd beastify
+web-ext run</pre>
+</div>
diff --git a/files/he/mozilla/add-ons/webextensions/טיפום/index.html b/files/he/mozilla/add-ons/webextensions/טיפום/index.html
new file mode 100644
index 0000000000..57e18c26fa
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/טיפום/index.html
@@ -0,0 +1,57 @@
+---
+title: טיפים וטריקים
+slug: Mozilla/Add-ons/WebExtensions/טיפום
+tags:
+  - ECMAScript
+  - אקמהסקריפט
+  - הרחבות רשת
+  - טיפים
+  - טיפים וטריקים
+  - טריקים
+translation_of: Mozilla/Add-ons/WebExtensions/Tips
+---
+<p>{{AddonSidebar}}</p>
+
+<p>עמוד זה מכיל טיפים וטריקים שוניםהאמורים להיות שימושיים לאנשים רבים המפתחים הרחבות באמצעות ממשקי הפיתוח של הרחבות רשת.</p>
+
+<h2 id="שימוש_בתכונות_ג'אווהסקריפט_מתקדמות_מתוך_ECMAScript_2015_ו-2016">שימוש בתכונות ג'אווהסקריפט מתקדמות  מתוך ECMAScript 2015 ו-2016</h2>
+
+<p>פיירפוקס <a href="/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">תומך בתכונות רבות של  ECMAScript 2015</a> מלוץ לקופסה. תכונות חדשות ונסיוניות אחדות, לעומת זאת, אינן זמינות לרשת או להרחבות רשת כברירת מחדל.   ,אם ברצונך להשתמש בתכונות אלו, הטוב ביותר יהיה לתרגן את הקוד שלך על ידי שימוש בכלי כמו  <a href="https://babeljs.io/">Babel</a>.</p>
+
+<p>יש לתת את הדעת לכך שכל דבר תחת  לשורה זו הינו מידע לא מעודכן והוצא מ-Babel 6.</p>
+
+<p>Babel מספק טרנספורמציות לרוב הרחב של תכונות ES2015, ומאפשר אותן כברירת מחדל. מאחר ופיירפוקס כבר תומך באופן מלא ברובן, הטוב ביותר יהיה לקנפג את Babel להתעלם מהן. אנו ממליצים ליצור  קובץ<code> .babelrc</code> או מקטע <code>babel</code> בקובץ ה-<code>package.json</code> של הפרוייקט המכיל את הקוד הבא"</p>
+
+<pre class="brush: js">{
+  "env": {
+    "firefox": {
+      "sourceMaps": "inline",
+      "blacklist": [
+        "es5.properties.mutators",
+        "es6.arrowFunctions",
+        "es6.destructuring",
+        "es6.forOf",
+        "es6.parameters",
+        "es6.properties.computed",
+        "es6.properties.shorthand",
+        "es6.spec.symbols",
+        "es6.spread",
+        "es6.tailCall",
+        "es6.templateLiterals",
+        "es6.regex.sticky",
+        "es6.regex.unicode"
+      ]
+    }
+  }
+}
+</pre>
+
+<p>ואז, בשביל לקמפל תסרעט אינדיבידואלי, יש פשוט להריץ:</p>
+
+<pre class="brush: sh">BABEL_ENV=firefox babel &lt;filename&gt;
+</pre>
+
+<p>או, כדי לקמפל כל קובץ ג'אווהסקריפט תחת התיקיה <code>src</code> ולמקם את הקבצים המקומפלים ב-<code>compiled</code>, תוך העתקה על קבצים שאינם בג'אווהסקריפט, להריץ</p>
+
+<pre class="brush: sh">BABEL_ENV=firefox babel -Dd compiled src
+</pre>