From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/he/mozilla/add-ons/index.html | 104 +++++ files/he/mozilla/add-ons/themes/index.html | 49 ++ .../add-ons/themes/theme_concepts/index.html | 248 +++++++++++ .../anatomy_of_a_webextension/index.html | 144 ++++++ .../add-ons/webextensions/api/alarms/index.html | 60 +++ .../webextensions/api/browseraction/index.html | 124 ++++++ .../mozilla/add-ons/webextensions/api/index.html | 55 +++ .../add-ons/webextensions/api/storage/index.html | 102 +++++ .../browser_support_for_javascript_apis/index.html | 24 + .../webextensions/content_scripts/index.html | 493 +++++++++++++++++++++ files/he/mozilla/add-ons/webextensions/index.html | 147 ++++++ .../manifest.json/background/index.html | 116 +++++ .../add-ons/webextensions/manifest.json/index.html | 125 ++++++ .../index.html" | 198 +++++++++ .../webextensions/modify_a_web_page/index.html | 252 +++++++++++ .../user_interface/browser_action/index.html | 51 +++ .../webextensions/user_interface/index.html | 97 ++++ .../what_are_webextensions/index.html | 59 +++ .../your_first_webextension/index.html | 153 +++++++ .../your_second_webextension/index.html | 458 +++++++++++++++++++ .../index.html" | 57 +++ files/he/mozilla/index.html | 10 + .../geometry.jsm/index.html | 20 + .../geometry.jsm/point/index.html | 264 +++++++++++ .../he/mozilla/javascript_code_modules/index.html | 147 ++++++ files/he/mozilla/projects/index.html | 15 + files/he/mozilla/projects/rhino/index.html | 26 ++ .../thunderbird_localization/index.html | 98 ++++ 28 files changed, 3696 insertions(+) create mode 100644 files/he/mozilla/add-ons/index.html create mode 100644 files/he/mozilla/add-ons/themes/index.html create mode 100644 files/he/mozilla/add-ons/themes/theme_concepts/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/api/alarms/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/api/browseraction/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/api/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/api/storage/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/content_scripts/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/manifest.json/background/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/manifest.json/index.html create mode 100644 "files/he/mozilla/add-ons/webextensions/manifest.json/\327\224\327\250\327\251\327\220\327\225\327\252/index.html" create mode 100644 files/he/mozilla/add-ons/webextensions/modify_a_web_page/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/user_interface/browser_action/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/user_interface/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/what_are_webextensions/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/your_first_webextension/index.html create mode 100644 files/he/mozilla/add-ons/webextensions/your_second_webextension/index.html create mode 100644 "files/he/mozilla/add-ons/webextensions/\327\230\327\231\327\244\327\225\327\235/index.html" create mode 100644 files/he/mozilla/index.html create mode 100644 files/he/mozilla/javascript_code_modules/geometry.jsm/index.html create mode 100644 files/he/mozilla/javascript_code_modules/geometry.jsm/point/index.html create mode 100644 files/he/mozilla/javascript_code_modules/index.html create mode 100644 files/he/mozilla/projects/index.html create mode 100644 files/he/mozilla/projects/rhino/index.html create mode 100644 files/he/mozilla/projects/thunderbird/thunderbird_localization/index.html (limited to 'files/he/mozilla') 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 +--- +

Add-ons allow developers to extend and modify the functionality of Firefox. They are written using standard Web technologies - JavaScript, HTML, and CSS - plus some dedicated JavaScript APIs.

+ +

Among other things, an add-on could:

+ + + +

There are several types of add-ons, but the most common type are extensions.

+ +

Developing extensions

+ +

In the past, there were several toolsets for developing Firefox extensions, but as of November 2017, extensions must be built using WebExtensions APIs. Other toolsets, such as overlay add-ons, bootstrapped add-ons, and the Add-on SDK, are no longer supported.

+ +

If you are writing a new extension, use WebExtensions APIs.

+ +

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.
+
+ See the APIs currently supported in Firefox and other browsers. We're continuing to design and implement new APIs in response to developer needs.
+
+ Most of the WebExtensions APIs are also available on Firefox for Android.

+ +

Migrate an existing extension

+ +

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 porting resources on MDN.

+ +

For more information about transition support, please visit our wiki page.

+ +

Publishing add-ons

+ +

Addons.mozilla.org, 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.

+ +

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.

+ +

For an overview for the process of publishing your add-on see, Signing and distributing your add-on.

+ +

Other types of add-ons

+ +

In addition to extensions, there are a few other add-on types that allow users to customize Firefox. Those add-ons include:

+ + + +

Contact us

+ +

You can use the links below to get help, keep up to date with news around add-ons and give us feedback.

+ +

Add-ons forum

+ +

Use the Add-ons Discourse forum to discuss all aspects of add-on development and to get help.

+ +

Mailing lists

+ +

Use the dev-addons list to discuss development of the add-ons ecosystem, including the development of the WebExtensions system and of AMO:

+ + + +

IRC

+ +

If you're a fan of IRC (Internet Relay Chat), you can get in touch at:

+ + + +

Report problems

+ +

Security vulnerabilities

+ +

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 confidentially in Bugzilla or by emailing amo-admins@mozilla.com.

+ +

Bugs on addons.mozilla.org (AMO)

+ +

If you find a problem with the site, we'd love to fix it. Please file a bug report and include as much detail as possible.

+ +
{{AddonSidebar}}
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 +--- +

{{AddonSidebar}}

+ +

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!

+ +
+
+

Browser Themes

+ +
+
Browser theme concepts
+
Get an introduction to creating themes for the latest versions of Firefox
+
Using the AMO theme generator
+
Use the theme generator to create and submit a new theme to AMO
+
+ +

Lightweight Themes

+ +
+

Lightweight themes have been deprecated and are no longer accepted by AMO. Only browser themes will be accepted going forward.

+
+
+ +
+

Tools & Resources

+ + +
+
+ +

 

+ +

 

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 +--- +
{{AddonSidebar()}}
+ +

ערכות נושא המפותחות באמצעות Iממשקי פיתוח הרחבות רשת בפיירפוקס מאפשרות לך לשנות את מראה הדפדפן על ידי הוספת תמונות לאיזור הכותרות של דפדפן הפיירפוקס: זהו האזור מאחורי סרגל התפריטים, סרגל הכלים, שדה הכתובת,סרגל החיפוש ופס הלשוניות.

+ +

אפשרויות ערכת נושא אלה יכולות להיות מיושמות כערגות נושא סטטיות (למרות שתמונות ערכת הנושא עצמן יכולות להיות מונפשות) או כערכות נושא דינמיות המיוצרות בהרחבת הדפדפן.

+ +
+

אם יש לך ערכת נושא קלת משקל היא תומר לפורמט החדש של ערכות נושא באופן אוטומטי לפני שערכות נושא קלות משקל יוצאות משימוש. אין צורך לנייד את ערכת הנושא שלך. אולם, אנא הרגש/י חופשי/ה לעסכן את ערכת הנושא שלך להשתמש בתכונות החדשות המתוארות כאן.

+
+ +

ערכות נושא סטטיות

+ +

ערכות נושא סטטיות מצויינות על ידי שימוש במשאבים כגון הרחבות דפדפן: קובץ  manifest.json להגדיר רכיבי ערכת נושא עם רכיבים אלה מאוחסניחם באותה תיקייה כמו הקובץ   manifest.json רו בתת-תיקייה. משאבים אלה נארזים אחר-כך בקובץ דחוס לפרסום ב-  addons.mozilla.org (AMO) או בהפצה עצמית. למידע נוסף על הפצה עצמית, בקרו ב- חתימה והפצה של התוסף שלך.

+ +

ץוכלו להשתמש גם ב מחולל ערכות הנושא-ב- AMO ליצור ערכת נושא סטטית. בנוסף, ניתן להשתמש ב- Firefox Color לצפות בהתאמות לערכת הנושא של הדפדפן עם אפשרויות לשתף ולייצא ערכת נושא. .

+ +
+

ערכת נושא ופונקציונליות של הרחבות דפדפן אינן יכולות להיות מוגדרות בחבילה אחת, כמו לכלול ערכת נושא שתשלים הרחבה. אולם ניתן בדרכים תכנותיות לכלול ערכת נושא בתוך הרחבה באמצעות ממשק הפיתוח של ערכת הנושא. ראו  ערכות מושא דינמיות.

+
+ +

הגדרץ ערכת נושא

+ +

ליצירת ערכת נושא (בדוגמא זו ערכת תמונה בודדת פשוטה):

+ + + +

גישות ערכת נושא סטטית

+ +

קיימות שתי גישות ל"ציור" אזור הכותרת של פיירפוקס :  באמצעות תמונה אחת או באמצעות ריבוי תמונות. ניתן לשלב את שתיהן אך יותר קל להתיחחס לכל אחת בנפרד.

+ +

ערכות נושא של תמונה אחת

+ +

זו אפשרות ה"ציור" הבסיסית או המינימלית בה ניתן להגדיר:

+ + + +

על שטח תמונת הכותרת שלך למלא מקסימום גובה של 200 פיקסלים. מקסימום רוחב התמונה נקבע על ידי הרזולוציה של הצג עליו פיירפוקס מציג ובכמה מהצג פיירפוקס משתמש. בפועל, זאת אומרת שיהיה צורך להתיר קוחב של עד 5120 פיקסלים (לדור הבא של צגי 5K). אולם, על פני יצירת תמונה רחבה מאוד גישה עדיפה היא ליצור תמונה יותר צרה עם קצה שמאלי שקוף כך שהיא תדהה לצבע הרקע. לדוגמא, נוכל להשתמש בתמונה הבאה:

+ +

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.
+ בשילוב עם צבע רקע משלים לליצירת אפקט זה בכותרת
+ A single image theme using the weta.png image

+ +

ראו פרטים על ערכת נושא זו בדוגמת  ערכות הנושא weta_fade.

+ +

בבירור, ניתן עדיין לספק תמונה רחבה יחידה אם זה עדיף לך.

+ +

ערכות נושא של ריבוי תמונות

+ +

כחלופה ליצירת ערכת נושא בת תמונה אחת, קיימת האופציה להשתמש ביותר תמונות. תמונות אלה יכולות להיות מעוגנות אינדיבידואלית למיקומים בתוך הכותרת, אם האפשרות ליצירת אריח לכל תמונה.

+ +

בתלות באפקט שברצונך ליצור ייתכן ויהיה צורך לדכא את התמונה המחוייבת "headerURL": בתמונה ריקה או שקופה. שימוש בתמונה ריקה או שקופה יעשה , לדוגמא , אם ברצונך להכניס תמונהמיושרת למרכז באריח כמו
+ 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.
+ ליצירת האפקס הזה
+ A single image theme using the additional images option to align an image to the center of the heading and tile it.
+ כאן תוכלו לציין תמונת weta כך:

+ +
"images": {
+  "headerURL": "empty.png",
+  "additional_backgrounds": [ "weta_for_tiling.png"]
+},
+ +

ואת הכנסת התמונות לאריחים כך:

+ +
"properties": {
+  "additional_backgrounds_alignment": [ "top" ],
+  "additional_backgrounds_tiling": [ "repeat"  ]
+},
+ +

פרטים מלאים אודות איך לאתחל ערכת נושא זו ניתן למצוא בדוגמת  ערכות הנושא weta_tiled. פאטים מלאים אודות ישור ואפשרויות יצירת אריחים ניתן למצוא ב - "theme" key description.

+ +

לחלופין, ניתן להשתמש ביותר מתמונה אחת , למשל בשילוב תמונות ה weta המקוריות עם זאת המעוגנת לשמאל הכותרת
+ 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.
+ ליצירת האפקט
+ A theme using the additional images option to place two mirrored image to the left and right of the browser header.

+ +

בו התמונה מצויינת על ידי:

+ +
"images": {
+  "headerURL": "empty.png",
+  "additional_backgrounds": [ "weta.png", "weta-left.png"]
+},
+ +

והיישור  שלה על ידי:

+ +
"properties": {
+  "additional_backgrounds_alignment": [ "right top" , "left top" ]
+},
+ +

פרטים מלאים אודות איך לאתחל ערכת נושא זו ניתן למצוא בדוגמת   ערכות הנושא  weta_mirror. פרטים מלאים אודות אפשרויות היישור ניתן למצוא ב-  "theme" key description.

+ +

ערכות נושא סטטיות מונפשות

+ +

ניתן ליצור ערכת נושא מונפשת באמצעות פורמט התמונות  APNG , כמו בדוגמת ערכות הנושא animated. אולם, יש לזכור כי אנימציות מהירות כמו זו שבדוגמא יכולה להיות מסיחת דעת מדי עבור ערכת נושא מעשית.

+ +

ניתן גם להנפיש ערכות נושא תכנותית, ובזה נדון בערכות נושא דינמיות.

+ +

עדכון ערכות נושא סטטיות

+ +

אם ערכת הנושא הסטטית שלך מאורחת ב- AMO, ניתן להעלות גרסה חדשה באמצעות Developer Hub על ידי הצעדים הבאים:

+ +
    +
  1. ביקור בעמוד המוצר עבור ההרחבה שלך דרך  Developer Hub
    2. +
  2. בחירת "Upload New Version" בצד שמאל
    3. +
  3. העלאת הקובץ הארוז לוידוא או שינוי באמצעות מחולל ערכות הנושא
    4. +
+ +

עבור ערכות נושא מאורחות עצמית, ניתן להעלות גרסה חדשה דרך AMO על ידי ביצוע הצעדים דלעיל או שיטופלו על ידך דרך כתובת URL מעודכנת  או עדכוני יישום חיצוני. גירסה חדשה תצטרך להיחתם דרך Developer Hub.

+ +
+

אם מעלים קובץ ארוז, מספר הגירסה צריךלהיות גבוה ממספר הגרסה הנוכחית.

+
+ +

ערכות נושא דינמיות

+ +

כחלופה להגדרת ערכת נושא סטטית, ניתן להשתמש בממשק הפיתוח  {{WebExtAPIRef("theme")}} כדי לשלוט בערכת הנושא שבשימוש על ידי פיירפוקס מתוך הרחבת דפדפן. יש מספר מקרי שימוש באפשרות זו:

+ + + +

וכמובן, ניתן לשלב את השתיים ולאגד ערכת נושא הנשלטת על ידי תכנות עם ההרחבה שלך.

+ +

השימוש בממשק ה- {{WebExtAPIRef("theme")}} הוא ישיר. תחילה, יש לבקש  הרשאת  "theme" בקובץ manifest.json של ההרחבה. השלב הגא, בונים אובייקט JSON המכיל אותה אינפורמציה שתשתמשו בה בקובץ manifest.json של ערכת נושא סטטית, לבסוף, יש להעביר את אובייקט ה- JSON בקריאת  {{WebExtAPIRef("theme.update()")}}.

+ +

לדוגמא, הקוד הבא מתוך  dynamic theme example מגדיר את התוכן עבור אלמנטי היום והלילה של ערכת הנושא הדינמית

+ +
const themes = {
+  'day': {
+    images: {
+     headerURL: 'sun.jpg',
+    },
+    colors: {
+     accentcolor: '#CF723F',
+     textcolor: '#111',
+    }
+  },
+  'night': {
+    images: {
+     headerURL: 'moon.jpg',
+    },
+    colors: {
+     accentcolor: '#000',
+     textcolor: '#fff',
+    }
+  }
+};
+ +

עכת הנושא.אובייקט ערכת הנושא מועבר אז ל- {{WebExtAPIRef("theme.update()")}} לשינוי ערכת הנושא של הכותרת, כבקטע קוד זה מתוך אותה דוגמא

+ +
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]);
+}
+ +

לימדו עוד אודות ערכות נושא דינמיות, וראו דוגמאות נוספות בסרטון הבא::

+ +

{{EmbedYouTube("ycckyrUN0AY")}}

+ +

+ +

אם טרם יצרת הרחבת דפדפן, צפה/י ב- ההרחבה הראשונה שלך להדרכה צעד-צעד.

+ +

תאימות בין דפדפנים

+ +

קיימת תאימות מוגבלת בין ערכות נושא בדפדפנים המובילים. לדפדפן אופרה גישה שונה לחלוטין , וערכות הנושא של  Microsoft Edge אינן פתוחות עדיין למפחתים/ות.

+ +

יש איזו שהיא תאימות בין ערכות נושא של פיירפוקס  ועאכות נושא של כרום, בתנאי שהיכולת לנייד ערכת נושא של הרחבה בת תמונה יחידה מפיירפוקס לכרום.  זה נעשה על ידי תיקון המפתחות ב-manifest.json  כלהלן:

+ + + +

בשתומת לב לכך ש- "frame": ו- "tab_background_text": תומכים רק בהגדרות מערך צבעים  RGB בכרום.

+ +

אז, בדוגמת ערכת הנושא בת התמונה היחידה (weta_fade) יכולה להיתמך בכרום  באמצעות קובץ ה-manifest.json הבא:

+ +
{
+  "manifest_version": 2,
+  "version": "1.0",
+  "name": "<your_theme_name>",
+  "theme": {
+    "images": {
+      "theme_frame": "weta.png"
+    },
+    "colors": {
+      "frame": [ 173 , 176 , 159 ],
+      "tab_background_text": [ 0 , 0 , 0 ]
+    }
+  }
+}
+ +

אולם, יהיו מספר הבדלים

+ + + +

The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented.

+ +

לעוד מידע , ראו רשימות ב-Chrome compatibility.

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 +--- +
{{AddonSidebar}}
+ +

הרחבה מורכבת מאוסף של קבצים, ארוזים להפצה והתקנה. במאמר זה, נסקור במהירות את הקבצים העשויים להיות נוכחים בהרחבה.

+ +

manifest.json

+ +

זהו הקובץ היחיד שחייב להימצא בכל הרחבה הוא כולל מטאדאטה בסיסית כגון שם, גירסה וההרשאות הדרושות. הוא גם מספק מצביעים לקבצים אחרים בהרחבה.

+ +

מניפסט זה יכול לכלול גם מצביעים לעוד מספר טיפוסי קבצים 

+ + + +

+ +

ראו דף סימוכין לממשק  manifest.json לכל הפרטים.

+ +

יחד עם כל אלה הרשומים במניפסט , הרחבה יכולה לכלול גם   דפי הרחבה נוספים וקבצים תומכים.

+ +

תסריטי רקע

+ +

הרחבות צריכות לעתים קרובות לשמור מצב ארוך טווח או לבצע םעולות ארוכות טווח ללא תלות בזמן החיים של דף רשת זה או אחר או בחלון דפדפן. בשביל זה יש תסריטי רקע.

+ +

תסריטי רקע נטענים מייד כאשר ההרחבה נטענת ונשארים טעונים עד שההרחבה מושבתת או מוסרת. נתין להשתמש בכל אחד מממשקי פיתוח הרחבות הרשת בתסריט, כל עוד ביקשת את ההרשאות הדרושות.

+ +

ציון תסריטי הרקע

+ +

ניתן לכלול תסריט רקע באמצעות המפתח  background  ב-"manifest.json":

+ +
// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}
+ +

ניתן לציין מספר תסריטי רקע: אם תעשו כן, הם  ירוצו באותו הקשר. , בדיוק כמו תסריטים מרובים הנטענים לתוך דף רשת יחיד.

+ +

במקום לציין תסריטי רקע, ניתן לציין דף רקע שיש לו יתרונות נוספים של תמיכה במודולי ES6:

+ +

manifest.json

+ +
// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}
+ +

background-page.html

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script type="module" src="background-script.js"></script>
+  </head>
+</html>
+ +

סביבת תסריטי רקע

+ +

ממשקי פיותח DOM

+ +

תסריטי רקע רצים בהקשר של דף מיוחד הקרוי דף רקע . זה נותן להם את המשתנה הגלובלי window, יחד עם כל ממשקי פיתוח ה-  DOM המסופקים עם אובייקט זה

+ +
+

 בפיירפוקס תסריטי רקע אינם תומכים בשימוש ב-, background pages do not support - alert(), confirm(), או prompt().

+
+ +

ממשקי פיתוח הרחבות רשת

+ +

תסריטי רקע יכולים להשתמש בכל ממשקי פיתוח הרחבות הרשת בתסריט, כל עוד להרחבה יש את ההרשאות הדרושות.

+ +

גישה בין מקורות

+ +

תסריטי רקע יכולים ליצור בקשות XHR לכל מארח עבורו יש להם  הרשאות מארח.

+ +

תוכן ברשת

+ +

תסריטי רקע אינם מקבלים גישה ישירה לדפי רשת. אולם הם יכולים לטעון,  תסריטי תוכן לתוך דפי רשת ויכולים  לתקשר עם תסריטי תוכן אלה באמצעות ממשקי פיתוח להעברת הודעות

+ +

מדיניות אבטחת תוכן

+ +

תסריטי תוכן מוגבלים מביצוע פעולות בעלות פוטנציאל סיכון , כמו שימוש ב-eval() .דרך מדיניות אבטחת תוכן. ראו מדיניות אבטחת תוכן לפרטים נוספים על כך.

+ +

סרגלים צדדיים, חלונות קופצים, דפי אופציות

+ +

ההרחבה שלך יכולה לכלול רכיבי ממשק משתמש שונים שהתוכן שלהם מוגדר על ידי מסמך HTML :

+ + + +

עבור כל אחד מרכיבים אלה ניתן ליצור קובץ HTML ולהצביע אליו באמצעות תכונה ספציפית ב-  manifest.json. קובץ ה- HTML יכול לכלול  CSS וקבצי ג'אווהסקריפט, בדיוק כמו דף רשת נורמלי.

+ +

כל אלה הם טיפוס של  דפי הרחבה, ושלא כמו דף רשת רגיל, הג'אווהסקריפט שלך יכול להשתמש בכל אותם ממשקי פיתוח פריבילגיים להרחבות רשת כמו תסריט הרקע. הם יכולים גם לגשת ישירות למשתנים בדך הרקע באמצעות  {{WebExtAPIRef("runtime.getBackgroundPage()")}}.

+ +

דפי הרחבה

+ +

ניתן לכלול בהרחבה שלך  גם מסמכי  HTML שאינם מחוברים לרכיב ממשק משתמש מוגדר מראש כלשהו . שלא כמו מסמכים שניתן לספק עבור סרגלים צדדיים, חלונות קופצים, או דפי אופציות, אין להם הגדרה ב- manifest.json. אולם , יש להם גישה לכל אותם ממשקי פיתוח הרחבות רשת פריבילגיים כמו תסריט הרקע שלך.

+ +

באופן טיפוסי, דף כזה ייטען באמצעות  {{WebExtAPIRef("windows.create()")}} או {{WebExtAPIRef("tabs.create()")}}.

+ +

ראו דפי הרחבה כדי ללמוד עוד.

+ +

Content scripts

+ +

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.

+ +

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.

+ +

Content scripts can see and manipulate the page's DOM, just like normal scripts loaded by the page.

+ +

Unlike normal page scripts, they can:

+ + + +

Content scripts cannot directly access normal page scripts but can exchange messages with them using the standard window.postMessage() API.

+ +

Usually, when we talk about content scripts, we are referring to JavaScript, but you can inject CSS into web pages using the same mechanism.

+ +

See the content scripts article to learn more.

+ +

משאבים נגישים לרשת

+ +

משאבים נגישים לרשת עם משאבים כגון תמונות, HTML, CSS, ו- JavaScript הנכללים בהרחבה  וייתכן שתרצו לאפשר להם גישה לתסריטי תוכן ותסריטי דף. ניתן להפנות למשאבים הנוצרים נגישים לרשת על ידי תסריטי דף ותסריטי תוכן באמצעות סכמת   URI מיוחדת.

+ +

לדוגמא, אם תסריט תוכן מעוניין להכניס קצת תמונות לתוך דפי רשת , ניתן לכלול אותם בהרחבה ולעשות אותם נגישים לרשת . אז תסריט התוכן יכול ליצור ולהוסיף תגיות   img המפנות לתמונות דרך המאפיין src.

+ +

כדי ללמוד עוד, אטו טת התיעוד עבור המפתח web_accessible_resources  ב-manifest.json .

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 +--- +
{{AddonSidebar}}
+ +

מתזמנות קוד לרוץ בזמן שצויין. זה כמו setTimeout() ו- setInterval(), פרט לכך שפונקציות אלה לא עובדות עם דפי רקע הנטענים על פי דרישה. השכמות אינן מתמידות לאורך מפגשי הדפדפן.

+ +

לשימוש בממשק פיתוח זה יש לכלול   הרשאת "alarms".

+ +

טיפוסים

+ +
+
{{WebExtAPIRef("alarms.Alarm")}}
+
מידע אודות השכמה מסוימת.
+
+ +

שיטות

+ +
+
{{WebExtAPIRef("alarms.clear()")}}
+
מחק השכמה מסויימת בהינתן שמה.
+
{{WebExtAPIRef("alarms.clearAll()")}}
+
מחק את כל ההשכמות המתוזמנות.
+
{{WebExtAPIRef("alarms.create()")}}
+
צור השכמה חדשה.
+
{{WebExtAPIRef("alarms.get()")}}
+
שלוף השכמה מסויימת בהינתן שמה.
+
{{WebExtAPIRef("alarms.getAll()")}}
+
שלוף את כל ההשכמות המתוזמנות.
+
+ +

אירועים

+ +
+
{{WebExtAPIRef("alarms.onAlarm")}}
+
משוגר כאשר מגיע זמן ההשכמה.
+
+ +

{{WebExtExamples("h2")}}

+ +

תאימות דפדפנים

+ +

{{Compat("webextensions.api.alarms")}}

+ +
Acknowledgements + +

ממשק פיתוח זה מבוסס על ממשק הפיתוח chrome.alarms של כרומיום.

+ +

מידע התאימות של Microsoft Edge סופק על ידי תאגיד מיקרוסופט וכלול פה תחת רשיון Creative Commons Attribution 3.0 ארה"ב.

+
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 +--- +
{{AddonSidebar}}
+ +

מוסיף כפתור לסרגל הכלים של הדפדפן.

+ +

 פעולת דפדפן הינה כפתור בסרגל הכלים של הדפדפן.

+ +

ניתן לקשר חלון קופץ עם הכפתור. החלון הקופץ מצויין באמצעות HTML, CSS וג'אווה-סקריפט , בדומה לדף רשת רגיל. לקוד ג'אווה-סקריפט המורץ בחלון הקופץ גישה לכל ממשקי פיתוח היישומים של הרחבת הרשת כמו תסריטי הרקע שלך, אך ההקשר הגלובלי שלו הוא החלון הקופץ, ולא הדף הנוכחי המוצג על ידי הדפדפן. כדי להספיע לע הדפים מהרשת יש לתקשר איתם דרך  messages.

+ +

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.

+ +

You can define most of a browser action's properties declaratively using the browser_action key in the manifest.json.

+ +

With the browserAction API, you can:

+ + + +

Types

+ +
+
{{WebExtAPIRef("browserAction.ColorArray")}}
+
An array of four integers in the range 0-255 defining an RGBA color.
+
{{WebExtAPIRef("browserAction.ImageDataType")}}
+
Pixel data for an image. Must be an ImageData object (for example, from a {{htmlelement("canvas")}} element).
+
+ +

Functions

+ +
+
{{WebExtAPIRef("browserAction.setTitle()")}}
+
Sets the browser action's title. This will be displayed in a tooltip.
+
{{WebExtAPIRef("browserAction.getTitle()")}}
+
Gets the browser action's title.
+
{{WebExtAPIRef("browserAction.setIcon()")}}
+
Sets the browser action's icon.
+
{{WebExtAPIRef("browserAction.setPopup()")}}
+
Sets the HTML document to be opened as a popup when the user clicks on the browser action's icon.
+
{{WebExtAPIRef("browserAction.getPopup()")}}
+
Gets the HTML document set as the browser action's popup.
+
{{WebExtAPIRef("browserAction.openPopup()")}}
+
Open the browser action's popup.
+
{{WebExtAPIRef("browserAction.setBadgeText()")}}
+
Sets the browser action's badge text. The badge is displayed on top of the icon.
+
{{WebExtAPIRef("browserAction.getBadgeText()")}}
+
Gets the browser action's badge text.
+
{{WebExtAPIRef("browserAction.setBadgeBackgroundColor()")}}
+
Sets the badge's background color.
+
{{WebExtAPIRef("browserAction.getBadgeBackgroundColor()")}}
+
Gets the badge's background color.
+
{{WebExtAPIRef("browserAction.setBadgeTextColor()")}}
+
Sets the badge's text color.
+
{{WebExtAPIRef("browserAction.getBadgeTextColor()")}}
+
Gets the badge's text color.
+
{{WebExtAPIRef("browserAction.enable()")}}
+
Enables the browser action for a tab. By default, browser actions are enabled for all tabs.
+
{{WebExtAPIRef("browserAction.disable()")}}
+
Disables the browser action for a tab, meaning that it cannot be clicked when that tab is active.
+
{{WebExtAPIRef("browserAction.isEnabled()")}}
+
Checks whether the browser action is enabled or not.
+
+ +

Events

+ +
+
{{WebExtAPIRef("browserAction.onClicked")}}
+
Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
+
+ +

Browser compatibility

+ +

{{Compat("webextensions.api.browserAction")}}

+ + + +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.browserAction API. This documentation is derived from browser_action.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + 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 +--- +
{{AddonSidebar}}
+ +
+

בממשקי פיתוח היישומים עבור הרחבות רשת בג'אווה-סקריפט ניתן להשתמש בתוך

+ +

  תסריטי הרקע של ההרחבה ובכל המסמכים האחרים הכלולים בהרחבה, כולל  browser action or page action popups, sidebars, options pages, or new tab pages. A few of these APIs can also be accessed by an extension's content scripts (see the list in the content script guide).

+ +

To use the more powerful APIs you need to request permission in your extension's manifest.json.

+ +

You can access the APIs using the browser namespace:

+ +
function logTabs(tabs) {
+  console.log(tabs);
+}
+
+browser.tabs.query({currentWindow: true}, logTabs);
+
+ +
+

Many of the APIs are asynchronous, returning a Promise:

+ +
function logCookie(c) {
+  console.log(c);
+}
+
+function logError(e) {
+  console.error(e);
+}
+
+var setCookie = browser.cookies.setokie.then(logCookie, logError);
+
+ +
+

Note that this is different from Google Chrome's extension system, which uses the chrome namespace instead of browser, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports chrome and callbacks as well as browser and promises. Mozilla has also written a polyfill which enables code that uses browser and promises to work unchanged in Chrome: https://github.com/mozilla/webextension-polyfill.

+ +

Firefox also implements these APIs under the chrome namespace using callbacks. This allows code written for Chrome to run largely unchanged in Firefox for the APIs documented here.

+ +

Microsoft Edge uses the browser namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.

+ +

Not all browsers support all the APIs: for the details, see Browser support for JavaScript APIs.

+ +

JavaScript API listing

+ +

See below for a complete list of JavaScript APIs:

+
+ +
{{SubpagesWithSummaries}}
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 +--- +
{{AddonSidebar}}
+ +

מאפשר להרחבות לאחסן ולשלוף נתונים, ולהאזין לשינויים בפריטים המאוחסנים.

+ +

מערכת האחסון מבוססת על ממשק פיתוח היישומים Web Storage, עם מספר הבדלים. בין ההבדלים ניתן למצוא כי:

+ + + +

To use this API you need to include the "storage" permission in your manifest.json file.

+ +

Each extension has its own storage area, which can be split into different types of storage.

+ +

Although this API is similar to {{domxref("Window.localStorage")}} it is recommended that you don't use Window.localStorage 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 storage.local API will be correctly persisted in these scenarios.

+ +

You can examine the stored data under the Extension Storage item in the Storage Inspector tab of the developer toolbox, accessible from about:debugging.

+ +
The storage area is not encrypted and shouldn't be used for storing confidential user information.
+ +

Types

+ +
+
{{WebExtAPIRef("storage.StorageArea")}}
+
An object representing a storage area.
+
{{WebExtAPIRef("storage.StorageChange")}}
+
An object representing a change to a storage area.
+
+ +

Properties

+ +

storage has three properties, which represent the different types of available storage area.

+ +
+
{{WebExtAPIRef("storage.sync")}}
+
Represents the sync storage area. Items in sync storage are synced by the browser, and are available across all instances of that browser that the user is logged into, across different devices.
+
{{WebExtAPIRef("storage.local")}}
+
Represents the local storage area. Items in local storage are local to the machine the extension was installed on.
+
{{WebExtAPIRef("storage.managed")}}
+
Represents the managed storage area. Items in managed storage are set by the domain administrator and are read-only for the extension. Trying to modify this namespace results in an error.
+
+ +

Events

+ +
+
{{WebExtAPIRef("storage.onChanged")}}
+
Fired when one or more items change in a storage area.
+
+ +

Browser compatibility

+ + + +

{{Compat("webextensions.api.storage")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.storage API. This documentation is derived from storage.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + 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 +--- +
{{AddonSidebar}}
+ + + +

{{WebExtAllCompatTables}}

+ +
תודות + +

נתוני התאימות לדפדפן Microsoft Edge מסופקים על ידי תאגיד מיקרוסופט ונכללים כאם ץחת רשיון Creative Commons Attribution 3.0 ארה"ב.

+
+ +

See also

+ + 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 +--- +
{{AddonSidebar}}
+ +

תסריט תוכן הוא חלק מההרחבה שלך שרץ בהקשר של דף מסויים ברשת  (בניגוד לתסריטי רקע שהם חלק מהרחבה, או תסריטים שהם חלק מאתר הרשת עצמו , כגון אלה הנטענים באמצעות אלמנט ה-{{HTMLElement("script")}} ).

+ +

תסריטי רקע יכולים לגשת לכל  ממשקי הפיתוח בג'אווהסקריפט של הרחבות הרשת,   אך אינם ניגשים ישירות לתוכן של עמודי רשת.  לכן אם ההרחבה שלך צריכה לעשות זאת, עליך לכתוב תסריט תוכן.

+ +

בדיוק כפי שהתסריטים נטענים על ידי דפי רשת נורמליים, תסריטי תוכן יכולים לקרוא ולשנות תוכן הדפים שלהם באמצעות ממשקי פיתוח יישומי DOM.

+ +

תסריטי תוכן יכולים לגשת רק לתת קבוצה קטנה של ממשקי פיתוח הרחבות הרשת,   אך לתקשר עם תסריטי רקע באמצעות מערכת שליחת הודעות, ובאמצעותן לגשת בעקיפין לממשקי הפיתוח של הרחבות הרשת.

+ +
+

לתשומת לבך תסריטי תוכן חסומים במתחמים הבאים:

+ + + +

נסיון להחדיר תסריט תוכן לאתרים אלה ייכשל טהעמוד ירשום שגיאת  CSP ללוג.

+ +

משום שמגבלות אלו כוללות את  addons.mozilla.org, משתמשים עשויים לנסות להשתמש בהרחבה שלך מיד אחרי ההתקנה —רק כדי לגלות שאינה עובדת! ייתכן ותרצה/י להוסיף אזהרה הולמת, או   דף onboarding להרחיק משתמשים מ- addons.mozilla.org.

+
+ +
+

ערכים הנוספים לסקופ הגלובלי של תסריט תוכן באמצעות var foo או window.foo = "bar" עלולים להיעלם עקב באג 1408996.

+
+ +

טעינת תסריט תוכן

+ +

ניתן לטעון תסריט תוכן לאתר רשת בשלוש דרכים:

+ +
    +
  1. בעת ההתקנה, לתוך דפים התואמים תבניות URL: באמצעות מפתח ה-content_scripts בקובץ ה-manifest.json שלך, ניתן  לבקש מהדפדפן לטעון תסריט תוכן בכל פעם שהדפדפן מעלה דף שה-URL שלו תואם תבנית נתונה.
    2. +
  2. בזמן ריצה, לתוך דפים התואמים תבניתו URL : באמצעות ממשק פיתוח היישומים {{WebExtAPIRef("contentScripts")}} API, ניתן לבקש מהדפדפן לטעון  תסריט תוכן בכל ]עפ שהדפדפן טוען דף שה-URL שלו  תואם תבנית נתונה matches a given pattern. זה בפשטות כמו בשיטה  (1), פרט לכך שניתן להוסיף ולהסיר תסריט תוכן בזמן ריצה.
    3. +
  3. בזמן ריצה, לתוך לשוניות מסוימות  into specific tabs: באמצאות צצשק הפיתוח  tabs.executeScript() , ניתן לטעון תסריט תוכן בכל עת שיהיה ברצונך: למשל, סתגובה להקשת משתמש/ת על פעולת דפדפן.
    4. +
+ +

קיים רק סקופ גלובלי אחד למסגרת, להרחבה. זאת אומרת שניתן לגשת למשתני תסריט תוכן אחד ישירות על ידי תסריט תוכן אחר , ללא קשר לדרך בה נטען תסריט התוכן.

+ +

באמצעות שיטות (1) ו- (2), ניתן לטעון תסריטים לתוך דפים שה- URL-ים שלהם  יכולים להיות מיוצגים באמצעות תבניות התאמה.

+ +

באמצעות שיטה (3), ניתן גם לטעון תסריטים לתוך דפים ארוזים עם ההרחבה שלך, אך לא ניתן לטעון תסריטים לתוך דפי דפדפן בעלי פריבילגיה  (כגון "about:debugging" או "about:addons").

+ +

סביבת תסריטי תוכן

+ +

גישה ל-DOM

+ +

תסריטים יכולים לגשת ולשנות את ה-DOM של הדף , בדיוק כפי שיכולים לעשות זת תסריטי דף נורמליים. הם יכולים לראות גם שינווים שנעשו ב- DOM על ידי תסריטי דפים.

+ +

אולם, תסריטי תוכן מקבלים "מראה נקי של ה-DOM". כלומר::

+ + + +

בפיירפוקס התנהגות זו קרויה ראיית רנטגן.

+ +

חשבו על דף רשת כזה:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  </head>
+
+  <body>
+    <script src="page-scripts/page-script.js"></script>
+  </body>
+</html>
+ +

התסריט "page-script.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'");
+}
+ +

כעת  הרחבה מחדירה תסריט תוכן לתוך הדף:

+ +
// 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()
+ +

אותו הדבר נכון גם להיפך: תסריטי דף אינם יכולים לראות משתני ג'אווהסקריפט  שנוספו על ידי תסריטי תוכן

+ +

זאת אומרת שתסריטי תוכן יכולים להסתמך על תכונות  DOM שהתנהגותן צפויה. , בלי להיות מודאגים מהתנגשויות משתנים עם משתנים מתסריטי הדף.

+ +

אחת ההשלכות המעשיות של התנהגות זו היא שלתסריט תוכן לא תהיה גישה לאף ספריית ד'אווהסקריפט שנטענה על ידי הדף. לכן לדוגמא, אם דף מכיל jQuery, תסריט התוכן לא יוכל לראותו.

+ +

היה ותסריט תוכן כן רוצה להשתמש בספריית ג'אווהסקריפט, הספריה עצנה צריכה להיות מוחדרת כתסריט תוכן לצד תסריט התוכן המעוניין להשתמש בה::

+ +
"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["jquery.js", "content-script.js"]
+  }
+]
+ +
+

לתשומת לבך: פיירפוקס כן מספק כמה ממשקי פיתוח יישומים המאפשרים לתסריטי תוכן לגשת לאובייקטי ג'אווהסקריפט הנוצרים על ידי תסריטי דף, ולחשוף את אובייקטי הג'אווהסקריפט שלהם לתסריטי דף.

+ +

ראו  שיתוף אובייקטים עם תסריטי דף לפרטים נוספים.

+
+ +

ממשקי פיתוח יישומים של הרחבות רשת

+ +

בנוסף לממשקי הפיתוח הסטנדרטיים של ה-DOM , ,תסריטי התוכן יכולים להשתמש בממשקי פיתוח היישומים הבאים של הרחבות הרשת:

+ +

מתוך extension:

+ + + +

מתוך runtime:

+ + + +

מתוך i18n:

+ + + +

מתוך menus:

+ + + +

הכל מתוך storage.

+ +

XHR ו-Fetch

+ +

.תסריטי תוכן יכולים להכין בקשות באמצעות ממשקי פיתוח היישומים window.XMLHttpRequest ו- window.fetch().

+ +
+

בפיירפוקס, בקשות תסריטי התוכן (לדוגמא, באמצעות fetch()) קורות בהקשר של הרחבה, כך שיש לספק כתובת  URL מוחלטת  כדי להתייחס לתוכן דף. בכרום, בקשות אלה קורות בהקשר של דף, כך שכתובות ה-URL הן יחסיות,  לדוגמא, /api נשלחת ל- https://[current page URL]/api.

+
+ +

תסריטי תוכן מקבלים את אותן פריבילגיות חוצות מתחמים כמו שאר ההרחבות, כך שאם הרחבה בקשה גישה חוצת מתחמים עבור מתחם באמצעות מפתח  permissions ב- manifest.json, אזי תסריט התוכן יקבל גישה גם למתחם זה. 

+ +

זה יושג על ידי חשיפת יותר מופעי   XHR ו- fetch  בעלי יותר פריבילגיות בתסריט התוכן, להם תופעת הלוואי של אי הגדרת כותרות הorigin והreferer כמו לבקשות מהדף עצמו, לעתים תכופות זה מועדף כדי למנוע מבקשה לחשוף את הטבע חוצה המקורות שלה.  מגרסה 58 ואילך  הרחבות הצריכות לבצע בקשות המתנהגות כאילו משלחו מהתוכן עצמו  יכולות להשתמש ב- content.XMLHttpRequest וב-content.fetch() במקום. להרחבות חוצות דפדפנים נוכחותן חייבת להיו מגולת תכונות.

+ +

תקשורת עם תסריטי רקע

+ +

למרות שתסריטי תוכן אינם יכולים לגשת ישירות לממשקי פיתוח של הרחבות רשת, הם יכולים להתקשר עם תסריטי הרקע של ההרחבות באמצעות ממשקי הפיתוח של שליחת ההודעות ולכן יכולים לגשת בעקיפין לכל אותם הממשקים שתסריטי הרקע יכולים.

+ +

קיימות שתי תבניות בסיסיות להתקשרות בין תסריטי הרקע לתסריטי התוכן: ניתן לשלוח הודעות בודדות, עם אפשרות למענה, או להגדיר התחברות לטווח יותר ארוך בין שני הצדדים, ולהחליף הודעות באמצעות התחברות זאת.

+ +

הודעות בודדות

+ +

לשליחת הודעה בודדת עם אפשרות למענה, ניתן להשתמש בממשקי הפיתוח הבאים:

+ + + + + + + + + + + + + + + + + + + + + +
בתסריט התוכןבתסריט הרקע
שליחת הודעהbrowser.runtime.sendMessage()browser.tabs.sendMessage()
קבלת הודעהbrowser.runtime.onMessagebrowser.runtime.onMessage
+ +

לדוגמא, להלן תסריט תוכן המאזין לאירועי להקלקה בדף הרשת.

+ +

עם ההקלקה הייתה על קישור, יישלח URL המטרה לדף הרקע:

+ +
// content-script.js
+
+window.addEventListener("click", notifyExtension);
+
+function notifyExtension(e) {
+  if (e.target.tagName != "A") {
+    return;
+  }
+  browser.runtime.sendMessage({"url": e.target.href});
+}
+ +

תסריט הרקע מאזין להודעות האלה ומציג התראה באמצעוץ ממשק ה-notifications :

+ +
// 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
+  });
+}
+
+ +

(הקוד לדוגמא מעובד קלות מהדוגמא notify-link-clicks-i18n   ב-GitHub.)

+ +

טיפול בהודעות מבוסס התחברות

+ +

שליחת הודעות בודדות עלול להיות מסורבל אם מתבצעת תחלופה מרובה של הודעות בין תסריט רקע לתסריט תוכן. כך שעל תבנית חליפית להיווסד לצורך התחברות לטוח ארוך יותר בין שני ההקשרים, ולהשתמש בהתחברות זו לחילופי הודעות.

+ +

לכל צד יש אובייקט runtime.Port, המשמש החלפת הודעות.

+ +

ליצירת התחברות:

+ + + +

זה מחזיר אובייקט מסוג runtime.Port.

+ + + +

ברגע שלכל צד יש פתחה , שני הצדדים יכולים:

+ + + +

לדוגמא, מייד כשנטען, תסריט התוכן:

+ + + +
// 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!"});
+});
+ +

תסריט הרקע המכותב:

+ + + +
// 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!"});
+});
+
+ +

תסריטי תוכן מרובים

+ +

אם יש לך תסריטי תוכן מרובים המתקשרים בו זמנית, ייתכן שתרצה/י לאחסן כל התחברות במערך.

+ + + +
// 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 => {
+        p.postMessage({greeting: "they clicked the button!"})
+    })
+});
+
+ + + +

תקשורת עם דף רשת

+ +

למרות שכברירת מחדל תסריט תוכן אינם מקבלים הרשאת גישה לאובייקטים שנוצרו על ידי תסריטי דף, הם יכולים להתקשר עם תסריטי דף באמצעות ממשקי ה-DOM  window.postMessage ו-window.addEventListener .

+ +

לדוגמא:

+ +
// 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"
+  }, "*");
+ +
// content-script.js
+
+window.addEventListener("message", function(event) {
+  if (event.source == window &&
+      event.data &&
+      event.data.direction == "from-page-script") {
+    alert("Content script received message: \"" + event.data.message + "\"");
+  }
+});
+ +

לדוגמא שלמה עובדת של זה, בקרו בדף ההדגמה של- GitHub ובצעו את ההוראות

+ +
+

יש לקחת בחשבון שכבל פעם שמתקשרים עם תוכן שאין בו אמון בדרך זו, יש לנקוט זהירות רבה. הרחבות הן קוד בעל פריבילגיות שיכולות להיות לו יכולות בעלות כוח עצום, ודפי תוכן עויינים יכולים לרמות אותם בקלות לדשת ליכולות אלה.

+ +

לצורך דוגמא טריוויאלית, הניחו כי קוד של תסריט תוכן שמקבל את ההודעה עושה דבר כזה:

+ +
// content-script.js
+
+window.addEventListener("message", function(event) {
+  if (event.source == window &&
+      event.data.direction &&
+      event.data.direction == "from-page-script") {
+    eval(event.data.message);
+  }
+});
+ +

כעת תסריט הדף יכול להריץ כל קוד עם כל הפריביליגיות של תסריט התוכן.

+
+ +

שימוש ב- eval() בתסריטי תוכן

+ +

בכרום, eval() תמיד מריץ קוד בהקשר של תסריט התוכן, לא בהקשר של הדף.

+ +

בפיירפוקס:

+ + + +

לדוגמא, ניקח תסריט תוכן כזה:

+ +
// 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"
+}, "*");
+ +

הקוד רק יוצר משתנים x ו- y באמצעות window.eval() ו-eval(), ואז רושם את ערכיהם ליומן, ואז שולח הודעה לדף.

+ +

בהתקבל ההודעה, תסריט הדף רושם ליומן את אותם המשתנים:

+ +
window.addEventListener("message", function(event) {
+  if (event.source === window && event.data && event.data.message === "check") {
+    console.log(`In page script, window.x: ${window.x}`);
+    console.log(`In page script, window.y: ${window.y}`);
+  }
+});
+ +

בכרום, מופק פלט כזה:

+ +
In content script, window.x: 1
+In content script, window.y: 2
+In page script, window.x: undefined
+In page script, window.y: undefined
+ +

בפיירפוקס מופק הפלט הבא:

+ +
In content script, window.x: undefined
+In content script, window.y: 2
+In page script, window.x: 1
+In page script, window.y: undefined
+ +

אותו הדבר תקף עבור setTimeout(), setInterval(), ו- Function().

+ +
+

בעת הרצת קוד בהקשר של דף, יש להיזהר מאוד. סביבת הדף נשלטת על ידי דפי רשת בעלי פוטנציאל לזדוניות, דבר היכול להגדיר מחדש אובייקטים איתם את/ה מתקשר/ת להתנהג בדרכים לא צפויות.

+ +
// page.js redefines console.log
+
+var original = console.log;
+
+console.log = function() {
+  original(true);
+}
+
+ + +
// content-script.js calls the redefined version
+
+window.eval('console.log(false)');
+
+
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 +--- +
{{AddonSidebar}}
+ +

הרחבות יכולות להרחיב ולשנות את יכולות הדפדפן. הרחבות של Firefox נבנות על-ידי WebExtensions API, מערכת חוצת-דפדפנים לפיתוח הרחבות.המערכת תואמת ל- extension API הנתמך על-ידי Google Chrome ו- Opera ו- W3C Draft Community Group במידה נרחבת.

+ +

הרחבות הנכתבות לדפדפנים אלה ירוצו ברוב המקרים ב- Firefox או ב-Microsoft Edge עם שינויים מועטים בלבד. ה- API גם תואם באופן מלא multiprocess Firefox.

+ +

אם יש לך רעיונות או שאלות, או צורך בעזרה בהעברת תוספים ישנים ל-WebExtensions APIs, ניתן ליצור עימנו קשר ב-רשימת התפוצה של dev-addons או ב- #webextensions ב- IRC.

+ +
+
+

תחילת עבודה

+ + + +

מושגים

+ + + +

ממשק משתמש

+ + + +

איך לעשות

+ + + +
    +
+ +

הסבה

+ + + +

תרשים עבודה של Firefox

+ + +
+ +
+

רשימת מקורות

+ +

JavaScript APIs

+ + + +
{{ListSubpages("/en-US/docs/Mozilla/Add-ons/WebExtensions/API")}}
+ +

מפתחות מניפסט

+ + + +
{{ListSubpages("/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json")}}
+
+
+ + 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 +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
טיפוסObject
חובהלא
דוגמה + 
+"background": {
+  "scripts": ["background.js"]
+}
+
+ +

השתמשו במפתח background כדי לכלול תסריט רקע אחד או יותר, עם אפשרות לדף רקע בהרחבתכם.

+ +

תסריטי רקע הם המקום לשים קוד שצריך לתחזק מצב לטווח ארוך, או לבצע פעולות לטווח ארוך, ללא תלות בזמן החיים של דף מסוים מהרשת או חלון דפדפן.

+ +

תסריטי רקע נטענים מיד כשההרחבה נטענת והם נשארים טעונים עד אשר ההרחבה מושבתת או מבוטלת, אלא אם persistent מקבל את הערך false. תוכלו להשתמש בכל אחד ממשקי פיתוח היישומים של הרחבות הרשת בתסריט, כל עוד ביקשתם את ההרשאות הנחוצות.

+ +

ראו גם את הקטע "תסריטי רקע" ב- אנטומיה של הרחבה לפרטים נוספים.

+ +

המפתח background הוא אובייקט שעשויות להיות לו שתי תכונות, ושתיהן אופציונליות:

+ + + + + + + + + + + + +
scripts +

מערך (Array) של מחרוזות ( Strings), שכל אחת מהן היא מסלול למקור בג'אווה-סקריפט. המסלול יחסי לקובץ manifest.json עצמו. אלה התסריטים שיבוצעו בדף הרקע של ההרחבה.

+ +

התסריט משתף את אותו הקשר גלובלי  window.

+ +

התסריטים נטענים על פי הסדר בו הם מופיעים במערך.

+ +

אם תציינו ערך עבור scripts, דף ריק יווצר בו יורץ התסריט.

+ +
+

לתשומת לבך: אם ברצונך להביא תסריט ממיקום מרוחק עם התגית <script>  (לדוגמה,. <script src = "https://code.jquery.com/jquery-1.7.1.min.js">), יהא עליך לשנות גם את המפתח content_security_policy בקובץ manifest.json של ההרחבה שלך.

+
+ +
+

לתשומת לבך: בגרסאות פיירפוקס שקדמו לגרסה 50, כשהדיבאגר היה פתוח, תסריטים לא תמיד נטענו על פי הסדר הניתן במערך . כדי לעקוף באג זה, ניתן להשתמש בתכונה page ולכלול תסריטי רקע מהדף באמצעות תגיות  <script>. באג זה תוקן בפיירפוקס 50. מנקודה זו ואילך,  תסריטים נטענים תמיד על פי הסדר הנתון במערך.

+
+
page +

אם יש לך צורך בתוכן כלשהו בדף, ניתן להגדיר דף משלך באמצעות התכונה  page, שהיא מחרוזת ( String ), המייצגת מסלול, יחסי לקובץ manifest.json, למסמך HTML הכלול בחבילת ההרחבה שלך.

+ +

אם נעשה שימוש בתכונה זו, לא יהיה ניתן לציין תסריטי רקע באמצעות scripts, אך יהיה ניתן לכלול תסריטים משלך מהדף, בדיוק כשם שזה נעשה בדף רגיל מהרשת.

+
+ +

המפתח background יכול לכלול גם את התכונה האופציונלית הבאה:

+ + + + + + + + +
persistent +

ערך בוליאני( Boolean ).

+ +
    +
  • true מציין כי דף הרקע נועד להישמר בזכרון מהרגע שההרחבה נטענה או שהדפדפן הופעל  עד שההרחבה מבוטלת או מושבתת, או שהדפדפן נסגר (כלומר, דף הרקע תמידי).
    • +
  • false מציין כי דף הרקע עשוי להיות מוסר מהזיכרון כשלא פעיל ולהיווצר מחדש במידת הצורך. דפי רקע כאלה קרויים לפעמים דפי אירוע כי הם נטענים לזיכרון כדי לאפשר לדף הרקע לטפל באירועים להם הוא הוסיף מאזינים. רישום המאזיננים הוא תמידי כאשר הדף מוסר מהזיכרון, אך ערכים אחרים אינם ץמידי. אם תרצו לשמור מידע תמידית בדף אירועים , תוכלו להשתמש ב  ממשק הפיתוח storage.
    • +
+
+ +

דוגמה

+ +
  "background": {
+    "scripts": ["jquery.js", "my-background.js"]
+  }
+ +

טוען שני תסריט רקע.

+ +
  "background": {
+    "page": "my-background.html"
+  }
+ +

תואן דף רקע מותאם אישית.

+ +

תאימות דפדפנים

+ + + +

{{Compat("webextensions.manifest.background", 10)}}

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 +--- +

{{AddonSidebar}}

+ +
+

This article describes manifest.json for web extensions. If you are looking for information about the manifest.json in PWAs, check out the Web App Manifest article.

+
+ +

The manifest.json file is the only file that every extension using WebExtension APIs must contain.

+ +

Using manifest.json, 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.

+ +

It is a JSON-formatted file, with one exception: it is allowed to contain "//"-style comments.

+ +

manifest.json keys are listed below:

+ +
{{ListSubpages("/en-US/Add-ons/WebExtensions/manifest.json")}}
+ +

"manifest_version", "version", and "name" are the only mandatory keys. "default_locale" must be present if the "_locales" directory is present and must be absent otherwise. "browser_specific_settings" is not supported in Google Chrome.

+ +

You can access your extension's manifest from the extension's JavaScript using the {{WebExtAPIRef("runtime.getManifest()")}} function:

+ +
browser.runtime.getManifest().version;
+ +

Example

+ +

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 Example extensions.

+ +
{
+  "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"]
+}
+ +

Browser compatibility

+ +

For a full overview of all manifest keys and their sub-keys, see the full manifest.json browser compatibility table.

+ + + +

{{Compat("webextensions.manifest")}}

+ +

See also

+ +

{{WebExtAPIRef("permissions")}} JavaScript API

diff --git "a/files/he/mozilla/add-ons/webextensions/manifest.json/\327\224\327\250\327\251\327\220\327\225\327\252/index.html" "b/files/he/mozilla/add-ons/webextensions/manifest.json/\327\224\327\250\327\251\327\220\327\225\327\252/index.html" new file mode 100644 index 0000000000..9221f0cf8c --- /dev/null +++ "b/files/he/mozilla/add-ons/webextensions/manifest.json/\327\224\327\250\327\251\327\220\327\225\327\252/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 +--- +

{{AddonSidebar}}

+ + + + + + + + + + + + + + + + +
טיפוסArray
חובהלא
דוגמה + 
+"permissions": [
+  "*://developer.mozilla.org/*",
+  "webRequest"
+]
+
+ +

השתמשו במפתח permissions לבקש כוחות מיוחדים עבור ההרחבה שלכם. מפתח זה הינו מערך של מחרוזות, וכל אחת ממחרוזות אלו היא בקשת הרשאה.

+ +

אם תבקשו הרשאות באמצעות מפתח זה, אזי הדפדפן עשוי  לדווח למשתמש/ת בעת ההתקנה שההרבה מבקשת פריבילגיות מסויימות, ולבקש ממנו/ה לאשר כי  ישמח/תשמח להעניק פריבילגיות אלו. הדפדפן עשוי גם להתיר למשתמש/ץ לבדוק פריבילגיות ההרחבה אחרי ההתקנה. כשם שהבקשה להעניק פריבילגיות עשויה להשפיע על נכונות המשתמש/ת להתקין את ההרחבה, בקשת פריבילגיות שווה הפעלה זהירה של שיקול דעת.  לדוגמה, אם תרצו להימנע מלבקש הרשאות לא נחוצות  ותרצו לספק מידע עודות הסיבה לבקשת הרשאות בתיאור המוצר של ההרחבה שלכם. מידע נוסף על העניינים שיש לקחת בחשבון תוכלו למצוא במאמר  Request the right permissions.

+ +

למידע נוסף כיצד לבחון ולצפות בבקשת הרשאות ראו Test permission requests  באתר Extension Workshop site.

+ +

המפתח יכול להכיל שלושה סוגי הרשאות:

+ + + +

הרשאות מארח

+ +

הרשאות מארח מפורטות ב- match patterns, וכל תבנית מזהה קבוצה של כתובות  URLs עבורן ההרחבה מבקשת פריבילגיות נוספות. לדוגמה, בקשת מארח יכולה להיות  "*://developer.mozilla.org/*".

+ +

פריבילגיות נוספות כוללות:

+ + + +

בפירפוקס, מגירסה 56 ואילך, הרחבות מקבלות אוטומטית הרשאות מארח  עבור המקור של עצמן, שהוא בצורה:

+ +
moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
+ +

כש-  60a20a9b-1ad4-af49-9b6c-c64c98c37920 הוא המזהה הפנימי של ההרחבה. ההרחבה יכולה לקבל את ה- URL תכנותית על ידי קריאה ל- extension.getURL():

+ +
browser.extension.getURL("");
+// moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
+
+ +

הרשאות ממשק פיתוח יישומים

+ +

הרשאות ממשק פיתוח היישומים מפורטות כמילות מפתח, וכל מילת מפתח מהווה שם של  WebExtension API שההרחבה מעוניינת להשתמש בו.

+ +

כעת זמינות מילות המפתח הבאות:

+ + + +

ברוב המקרים ההרשאה רק מעניקה גישה לממשק פיתוח היישומים, עם יוצאי הדופן הבאים:

+ + + +

הרשאת activeTab

+ +

הרשאה זו מצויינת כ- "activeTab". אם להרחבה יש הרשאה זו , אזי בעת תקשורת בין משתמש/ת להרחבה, מוענקות להרחבה פריבילגיות  נוספות ללשונית הפעילה בלבד.

+ +

"תקשורת עם המשתמש" כוללת:

+ + + +

הפריבילגיות הנוספות הן:

+ + + +

הכוונה בהרשאה זו היא לאפשר להרחבות להגשים מקרה שימוש נפוץ, ללא הצורך לתת להן הרשאות בעלות כוח רב מדי. הרשאות רבוטת יהיו מעונינות "לעשות משהו לדף הנוכחי כאשר המשתמש/ת מבקש/ת". לדוגמה, קחו בחשבון הרחבה המבקשת להריץ תסריט בדף הנוכחי כאשר המשתמש/ת מקישה על פעולת דפדפן. אם ההרשאה  activeTab לא הייתה קיימת, ההרחבה הייתה צריכה לבקש את ההרשאת המארח   <all_urls>. אבל זה נותן להרחבה יותר כוח ממה שדרוש לה:  היא הייתה יכולה כעת לבצע תסריטים בכל לשונית, בכל עת שתרצה, במקום רק בלשונית הפעילה ורק בתגובה לפעולת משתמש/ת.

+ +

שימו לב כי תוכלו לקבל גישה רק ללשונית/מידע שכבר שם, כאשר ההתקשרות מצד המשתמש/ת התקיימה (למשל. ההקשה). כאשר הלשונית הפעילה מנווטת למקום אחר, למשל עקב סיום טעינה או אירוע אחר כלשהו, ההרשאה אינה מעניקה לך יותר גישה ללשונית.

+ +

בדרך כלל הלשונית המקבלת את הרשאת activeTab היא רק הלשונית הפעילה באותו רגע, פרט למקרה אחד. ממשק היישומים menus מאפשר להרחבה ליצור פריט תפריט המוצג כאשר המשתמש/ת מקיש/ה הקשת הקשר בלשונית  (כלומר, על הרכיב בפס הלשוניות המשאפשר למשתמש/ת לעבור מלשונית ללשונית). אם המשתמש/ת מקיש/ה על פריט כזה, אזי הרשאת  activeTab מוענקת ללשונית שהוקש עליה, אף אם זו אינה הלשונית הפעילה (נכון לפיירפוקס 63, {{bug(1446956)}}).

+ +

גישה ללוח הגזירים

+ +

קיימות שתי הרשאות המאפשרות להרחבה  לתקשר עם לוח הגזירים:

+ + + +

ראו Interact with the clipboard לכל הפרטים אודות הדבר.

+ +

אחסון ללא הגבלה

+ +

הרשאת unlimitedStorage:

+ + + +

דוגמה

+ +
 "permissions": ["*://developer.mozilla.org/*"]
+ +

לבקשת הרשאה בעלת פריבילגיה  לדפים תחת developer.mozilla.org.

+ +
  "permissions": ["tabs"]
+ +

לבקשת גישה לחלקים בעלי פריבילגיה של ממשק הפיתוח  tabs.

+ +
  "permissions": ["*://developer.mozilla.org/*", "tabs"]
+ +

לבקשת שתי ההרשאות שלעיל.

+ +

תאימות דפדפנים

+ + + +

{{Compat("webextensions.manifest.permissions")}}

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 +--- +
{{AddonSidebar}}
+ +

אחד השימושים הנפוצים להרחגה הוא לשנות דף מהרשת. לדוגמה,  הרחבה עשויה לרצות שלנות את הסגנון שבשימוש הדף , להסתיר צמתי DOM מסויימים, או להחדיר צמתי DOM נוןספים לדף.

+ +

קיימות שתי דרכים לעשות זאת עם ממשקי פיתוח הרחבות הרשת:

+ + + +

בכל דרך, תסריטים אלה קרויים תסריטי תוכן, והם שונים מתסריטים אחרים שההרחבה עשויה מהם:

+ + + +

במאמר זה נתבונן בשתי השיטות של טעינת תסריט.

+ +

שינויים בדפים התואמים תבנית URL

+ +

קודם כל, צרו תיקייה חדשה בשם "modify-page". בתיקייה זו, צרו קובץ בשם   "manifest.json", המכיל את התוכן הבא:

+ +
{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["https://developer.mozilla.org/*"],
+      "js": ["page-eater.js"]
+    }
+  ]
+
+}
+ +

המפתח content_scripts הוא הדרך לטעון תסריטים לתוך דפים התואמים תבניות  URL  במקרה זה, content_scripts מורה לדפדפן לטעון תסריט בשם   "page-eater.js" לתוך כל הדפים תחת https://developer.mozilla.org/.

+ +
+

מאחר שהתכונה "js" של  content_scripts היא מערך, תוכלו להשתמש בה כדי להחדיר יותר מתסריט אחד לתוך דפים תואמים . אם תעשו זאת דף יחלוק את אותו התחום, כשם שתסריטים מרובים הנטענים על ידי דף, והם ייטענו בסדר שנרשמו בתוך המערך.

+
+ +
+

למפתח content_scripts יש גם תכונת "css" בה תוכלו להשתמש כדי להחסיר דפי סגנונות המקודדים ב-CSS

+
+ +

כעת, צרו קובץ בשם "page-eater.js" בתוך התיקייה "modify-page" , ושימו בו את התוכן הבא:

+ +
document.body.textContent = "";
+
+var header = document.createElement('h1');
+header.textContent = "This page has been eaten";
+document.body.appendChild(header);
+ +

כעת iהתקינו את ההרחבה, ובקרו בדף https://developer.mozilla.org:/

+ +

{{EmbedYouTube("lxf2Tkg6U1M")}}

+ +
+

שימו לב כי למרות שבסרטון מוצג תסריט תוכן הפועל ב- addons.mozilla.org, תסריטי תוכן לעת עתה חסומים באתר זה.

+
+ +

שינוי דפים תכנותית

+ +

מה אם תרצו לאכול דפים, אבל רק כשהמשתמש/ת מבקש/ת זאת? הבה נעדכן את הדוגמה הבאה כך שנחדיר תסריט תוכן כאשר משתמש/ת מקיש/ה על פריט מתפריט ההקשר.

+ +

תחילה, עדכנו את  "manifest.json" כך שיכיל את התוכן הבא:

+ +
{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "permissions": [
+    "activeTab",
+    "contextMenus"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}
+ +

כאן, הוצאנו את המפתח content_scripts, והוספנו שני מפתחות חדשים:

+ + + +

Let's create this file. Create a new file called "background.js" in the "modify-page" directory, and give it the following contents:

+ +
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"
+    });
+  }
+});
+
+ +

In this script we're creating a context menu item, 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 eat-page item. If it is, we inject "page-eater.js" into the current tab using the tabs.executeScript() 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.

+ +

At this point the extension should look like this:

+ +
modify-page/
+    background.js
+    manifest.json
+    page-eater.js
+ +

Now reload the extension, open a page (any page, this time) activate the context menu, and select "Eat this page":

+ +

{{EmbedYouTube("zX4Bcv8VctA")}}

+ +
+

Note that although this video shows the content script working in addons.mozilla.org, content scripts are currently blocked for this site.

+
+ +

Messaging

+ +

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:

+ + + + + + + + + + + + + + + + + + + +
In content scriptIn background script
Send a messagebrowser.runtime.sendMessage()browser.tabs.sendMessage()
Receive a messagebrowser.runtime.onMessagebrowser.runtime.onMessage
+ +
+

In addition to this method of communication, which sends one-off messages, you can also use a connection-based approach to exchange messages. For advice on choosing between the options, see Choosing between one-off messages and connection-based messaging.

+
+ +

Let's update our example to show how to send a message from the background script.

+ +

First, edit "background.js" so that it has these contents:

+ +
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);
+  }
+});
+
+ +

Now, after injecting "page-eater.js", we use tabs.query() to get the currently active tab, and then use tabs.sendMessage() to send a message to the content scripts loaded into that tab. The message has the payload {replacement: "Message from the extension!"}.

+ +

Next, update "page-eater.js" like this:

+ +
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);
+
+ +

Now instead of just eating the page right away, the content script listens for a message using runtime.onMessage. When a message arrives, the content script runs essentially the same code as before, except that the replacement text is taken from request.replacement.

+ +

Since tabs.executeScript() is an asynchronous function, and to ensure we send message only after listener has been added in "page-eater.js", we use onExecuted which will be called after "page-eater.js" executed.

+ +
+

Press Ctrl+Shift+J (or Cmd+Shift+J on a Mac) OR web-ext run --bc to open Browser Console to view console.log in background script. Alternatively use Add-on Debugger  which allows you set breakpoint. There is currently no way to start Add-on Debugger directly from web-ext.

+
+ +

If we want send messages back from the content script to the background page,  we would use runtime.sendMessage() instead of tabs.sendMessage(), e.g.:

+ +
browser.runtime.sendMessage({
+    title: "from page-eater.js"
+});
+ +
+

These examples all inject JavaScript; you can also inject CSS programmatically using the tabs.insertCSS() function.

+
+ +

Learn more

+ + 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 +--- +
{{AddonSidebar}}
+ +

קרוי בשימוש נפוץ פכולת דפדפן, אפשרות זו של ממשק המשתמש  היא כפתור המתוסף לסרגל הכלים של הדפדפן. המשתמשים מקישים על הכפתור כדי לתקשר עם ההרחבה שלך.
+

+ +

הכפתור בסרגל הכלים (פעולת דפדפן) דומה לכפתור של שur, הכתובת (פעולת דף). להבדלים ולהדרכה מתי להשתמש במה,ראו Page actions and browser actions.

+ +

Specifying the browser action

+ +

You define the browser action's properties using the browser_action key in manifest.json:

+ +
"browser_action": {
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?"
+}
+ +

The only mandatory key is default_icon.

+ +

There are two ways to specify a browser action: with or without a popup. 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 browserAction.onClicked:

+ +
browser.browserAction.onClicked.addListener(handleClick);
+ +

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 Popup article for more details on creating and managing popups.

+ +

Note that your extension can have only one browser action.

+ +

You can change many of the browser action properties programmatically using the browserAction API.

+ +

Icons

+ +

For details on how to create icons to use with your browser action, see Iconography in the Photon Design System documentation.

+ +

Examples

+ +

The webextensions-examples repository on GitHub contains two examples of extensions that implement browser actions:

+ + 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 +--- +
{{AddonSidebar}}
+ +

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.

+ +
+

For advice on using these UI components to create a great user experience in your extension, please see the User experience best practices article.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI optionDescriptionExample
Toolbar button (browser action)A button on the browser toolbar that dispatches an event to the extension when clicked. By default, the button is visible in all tabs.Example showing a toolbar button (browser action).
Toolbar button with a popupA 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.Example of the pop-up on a toolbar button
Address bar button (page action)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.Example showing an address bar button (page action)
Address bar button with a popupA 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.Example of a popup on the address bar button
Context menu itemMenu 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.Example of content menu items added by a WebExtension, from the context-menu-demo example
Sidebar +

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.

+ 		Example of a sidebar
Options pageA 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.Example showing the options page content added in the favorite colors example.
Extension pageUse web pages included in your extension to provide forms, help, or any other content required, within windows or tabs.Example of a simple bundled page displayed as a detached panel.
NotificationTransient 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).Example of an extension triggered system notification
Address bar suggestionOffer custom address bar suggestions when the user enters a keyword.Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
Developer tools panelA tab with an associated HTML document that displays in the browser's developer tools.Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
+ +

The following how-to guides provide step-by-step guidance to creating some of these user interface options:

+ + 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 +--- +
{{AddonSidebar}}
+ +

הרחבה מוסיפה תכונות ותפקודים לדפדפן. היא נוצרת באמצעות טכנולוגיות מוכרות מבוססות רשת—HTML, CSS, וג'אווהסקריפט. החא משתמשת באותם ממשקי פיתוח לרשת כמו ג'אווה סקריפט  בדף רשת, אך בנוסף ההרחבה ניגשת לקבוצת ממשקי פיתוח בג'אווהסקריפט משלה. . זאת אומרת שניתן לעשות הרבה יותר בהרחבה מאשר עם קוד בדף הרשת. . הנה לפניכם מספר דוגמאות של דברים שניתן לעשות:

+ +

שדרוג או השלמה של אתר: השתמשו בתוסף למסור תכונות פנים דפדפן או מידע מתוך האתר שלכם. הרשו למשתמשים לאסוף פרטים מתוך דפים שהם מבקרים בהם כדי לשפר את השירות שאתם מציעים.

+ +

+ +

Examples: Amazon Assistant for Firefox, OneNote Web Clipper, and Grammarly for Firefox

+ +

לתת למשתמשים להציג את האישיות שלהם: הרחבות דפדפן יכולות לטפל בתוכן של דפים ברשת; לדוגמא, לתת למשתמשים להוסיף את הלוגו או התמונה המועדפים עליהם כרקע לכל דף שהם מבקרים בו. הרחבות יכולות גם לאפשר למשתמשים לעדכן את המראה של ממשק משתמש פיירפוקס, באותה דרך שמאפשרים זאת  תוסף ערכת נושא  עצמאיים.

+ +

+ +

לדוגמא:: MyWeb New Tab, Tabliss, ו-VivaldiFox

+ +

להוסיף או להסיר תוכן מדפים ברשת: ייתכן ותרצו לעזור למשתמשים לחסום פרסומות פולשניותמהדפים ברשת , לספק גישה למדריך טיולים בכל עת בה ארץ או עיר מוזכרים בדף ברשת, או לעצב מחדש תוכן עמוד כדי להציע חוויית קריאה עקבית . עם היכולת לגשת ולעדכן הן את ה-HTML והן את ה CSS של הדף, הרחבות יכולות לאפשר למשתמשים לראות את הרשת כפי שירצו.

+ +

+ +

דוגמאות: uBlock Origin, Reader, ו-Toolbox for Google Play Store™

+ +

להוסיף כלים ותכונות דפדפן חדשים: הוסיפו תכונות חדשות ללוח מטלות, או צרו תמונות קוד QR מכתובות  URL, קישורים לאינטרנט, או טקסט דף. עם אפשרויות  UI גמישות והכוח של  ממשקי פיתוח של הרחבות רשת תוכלו להוסיף בקלות  תכונות חדשות לדפדפן . כמו כן, תוכלו לשדרג כממעט עכל תכונת אתר אינטרנט או תפקודו, הוא לא חייב להיות האתר שלכם.

+ +

+ +

דוגמאות: QR Code Image Generator, Swimlanes for Trello, ו-Tomato Clock

+ +

משחקים: הציעו משחקי מחשב מסורתיים עם תכונות משחק לא-מקוונות , או גלו אפשרויות משחק חדשות; לדוגמא, על ידי שילוב המשחק בגלישה היום יומית.

+ +

 

+ +

דוגמאות: Asteroids in Popup, Solitaire Card Game New Tab, ו-2048 Prime.

+ +

הוספת כלי פיתוח: ייתכן שתרצו להספק כלי פיתוח לרשת כעסק שלכם או פיתחתם טכניקה או גישה שימושיות לפיתוח לרשת שתרצו לשתף. בכל אחת מהדרכים, תוכלו לשדרג את כלי הפיתוח המובנים של פיירפוקס על ידי הוספת לשונית חדשה לסרגל הכלים של המפתח/ת.

+ +

+ +

דוגמאות: Web Developer, Web React Developer Tools, ו-aXe Developer Tools

+ +

הרחבות לפיירפוקס נבנות באמצעות ממשקי הפיתוח להרחבות רשת, מערכת לדפדפנים שוניםלפיתוח הרחבות. במידה רבה , tממשק הפיתוח תואם ל-extension API הנתמכים על ידי כרום ואופרה. הרחבות הנכתבותעבור דפדפנים אלה ירוצו ברוב המקרים על פיירפוקס will in most cases run inאו  פ Microsoft Edge בשינויים קלים בלבד. ממשק הפיתוח גם תואם באופן מלא לפיירפוקס מרובה תהליכים.

+ +

אם יש לך הצעות אושאלות, או שיש לך צורך בעזרה לעבור מתוסף מהדור הישן לממשקח הפיתוח של הרחבות הרשת , ניתון להשיגנו ב- dev-addons mailing list או בערוץ #addons ב-IRC.

+ +

מה הלאה?

+ + 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 +--- +
{{AddonSidebar}}
+ +

במאמר זה נעבור שלב שלב בפיתוח הרחבה לפיירפוקס, מההתחלה ועד הסיום. כל מה שההרחבה עושה הוא להוסיף רקע אדום לכל דף הנטען מ-"mozilla.org" או כל אחד מתת-המתחמים שלו.

+ +

קוד המקור לדוגמא זו נמצא ב- GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

תחילה, יש צורך בפיירפוקס מגירסה 45 ומעלה.

+ +

כתיבת ההרחבה

+ +

יש ליצור תיקייה חדשה ולנווט לתוכה. לדוגמה, משורת הפקודה\מסוף ניתן לבצע זאת כך:

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

כעת, יש ליצור קובץ בשם  "manifest.json" ישירות תחת התיקייה  "borderify" . שימו בו את התוכן הבא:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Adds a red border to all webpages matching mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

המפתח המעניין ביותר כאן הוא  content_scripts, המגדיר לפיירפוקס איך לטעון תסריט לתוך דפי רשת שכתובת ה-  URL שלהם תואמת תבנית מסויימת. במקרה זה, מבקשים מפיירפוקס לטעון תסריט ששמו  "borderify.js" אל תוך כל דפי ה-HTTP או HTTPS המוגשים על ידי  "mozilla.org" או כל תתי המתחמים שלו.

+ + + +
+

בכמה מצבים ייתכן ותצטרכו לציין ID עבור ההרחבה. אם יש צורך לציין מזהה תוסף, כללו את המפתח  applications ב-manifest.json והגדירו את התכונה gecko.id שלו:

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

icons/border-48.png

+ +

ההרחבה צריכה לכלול צלמית. היא תוצג על יד רישום ההרחבה במנהל ההרחבות. הקובץ manifest.json הבטיח שתהיה לנו צלמית ב-"icons/border-48.png".

+ +

צרו את התיקייה "icons" ישירות תחת התיקייה  "borderify" . שמרו שם צלמית בשם "border-48.png".  תוכלו להשתמש  בזאת מתוך הדוגמא שלנו, הלקוחה מתוך  the Google Material Design iconset, ובשימוש תחת תנאי רשיון ה-Creative Commons Attribution-ShareAlike .

+ +

אם תבחרו לספק צלמית משלכם, היא צריכה להיות בגודל  48x48 פיקסלים. תוכלו לספק גם צלמית בגודל 96x96 פיקסלים, לצורך תצוגות ברזולוציה יותר גבוהה,  ואם תעשו זאת היא תצויין כתכונת ה-96 באובייקט icons אשר ב-manifest.json:

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

לחלופין, תוכלו לספק כאן קובץ  SVG , ומימדיו ישונו בהתאם. (למרות ב: אם תשתמשו ב- SVG והצלמית תכלול טקסט, ייתכן שתרצו להשתמש בכלי   "convert to path"  של עורך ה-SVG כדי לשטח את הטקס , כך שהמידות יותאמו עם size/position עקביים.)

+ + + +

borderify.js

+ +

לסיום, צרו קובץ בשם  "borderify.js" ישירות תחת התיקייה "borderify" . שימו בו את התוכן הזה:

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

תסריט זה ייטעאן לתוך דפים התואמים את התבנית הנתונה  במפתח   content_scriptsב-manifest.json . לתסריט יש גישה ישירה למסמך כמו לתסקיטים הנטענים על ידי הדף עצמ .

+ + + +

לבדוק שזה עובד

+ +

תחילה, בדקו היטב שכל הקבצים נמצאים במקומות הנכונים:

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

התקנה

+ +

פתחו את  "about:debugging" בפיירפוקס, , הקליקו  "טעינת תוספות זמניות..." and ובחרו כל קובץ שהוא  בתיקיית ההרחבה:

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

כעת ההרחבה תותקן, ותישאר עד שתתחילו מחדש את פיירפוקס.

+ +

לחלופין, תועלו להריץ את ההרחבה משורת הפקודה באמצעות הכלי web-ext.

+ +

בדיקה

+ +

כעת נסו לבקר בעמוד תחת  "mozilla.org", ותראו רקע אדום מסביב לדף :

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

אך אל תנסו זאת ב- addons.mozilla.org! תסריטי תוכן בשלב זה חסומים באותו מתחם.

+
+ +

ערכו ניסוי קטן. ערכו את תסריט התוכן לשנות את צבע הרקע, או עשו משהו אחר לתוכן הדף. שמרו את תוכן התסריט , ואז טענו את קבצי ההרחבה בהקלקה על קישור  ה "טעינה מחדש" ב- about:debugging. תוכלו לראות את השינויים מיד:

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

אריזה ופרסום

+ +

כדי לאפשר לאחרים להשתמש בהרחבתך, יש לארוז אותה ולשלוח למוזילה לחתימה. כדי ללמוד עוד, יש לראות "פרסום ההרחבה שלך".

+ +

מה הלאה?

+ +

כעת יש לך מושג בנושא תהליך הפיתוח של הרחבות רשת לפיירפוקס , נסה/י:

+ + 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 +--- +
{{AddonSidebar}} +

אם כבר עברת את המאמר ההרחבה הראשונה שלך , כבר קיבלת מושג איך לכתוב הרחבה. במאמר זה, נכתוב הרחבה קצת יותר מורכבת המדגימה עוד קצת מממשקי הפיתוח.

+ +

ההרחבה מוסיפה כפתור חדש לסרגל הכלים של פיירפוקס. כשהמשתמש/ת מקליק/ה על הכפתור, נציג חלון קופץ המאפשר לבחור חיה. בהיבחר חיה, נחליף את תוכן הדף בחיה שנבחרה

+ +

כדי לממש זאת, אנו:

+ + + +

תוכלו לדמיין את המבנה בכללותו של ההרחבה כך:

+ +

+ +

זוהי הרחבה פשוטה, אך מציגה רבים מהקונספטים הבסיסיים של ממשק פיתוח הרחבות הרשת:

+ + + +

תוכלו למצוא complete source code for the extension on GitHub.

+ +

כדי לכתוב את ההרחבה, יש צורך בפיירפוקס מגרסא 45 או חדשה יותר.

+ +

כתיבת ההרחבה

+ +

צרו תיקייה חדשה ונווטו לתוכה:

+ +
mkdir beastify
+cd beastify
+ +

manifest.json

+ +

כעת צרו קובץ בשם "manifest.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"
+  ]
+
+}
+
+ + + +

לתשומת לבך כל המסלולים הם יחסיים ל-manifest.json עצמו.

+ +

הצלמית

+ +

להרחבה צריכה להיות צלמית. היא תהיה מוצגת על יד רישום ההרחבה ב"ניהול ההרחבות שלך" (תוכלו לפתוח אותה על ידי ביקור בכתובת "about:addons"). ה- manifest.json הבטיח שתהיה לנו צלמית לסרגל הכלים ב-  "icons/beasts-48.png".

+ +

צרו את התיקייה "icons" ושמרו שם את הצלמית בשם  "beasts-48.png".  ניתן להשתמש ב- the one from our example, הלקוחה מתוך ה-Aha-Soft’s Free Retina iconset, ונמצאת בשימוש תחת תנאי הרשיון שלה

+ +

אם תבחרו לספק צלמית משלכם, היא צריכה להיות בגודל 48x48 פיקסלים. תוכלו לספק גם צלמית בגודל 96x96 פיקסלים  , לתצוגות ברזולוציה יותר גבוהה, ואם תעשו זאת it היא תהיה מצויינת כתכונה 96 של אובייקט ה-icons ב-manifest.json:

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

הכפתור בסרגל הכלים

+ +

הכפתור בסרגל הכלים צריך גם צלמית, וה- manifest.json מבטיח שתהיה לנו צלמית לכפתור בסרגל הכלים ב"icons/beasts-32.png".

+ +

שמרו צלמית בשם "beasts-32.png" בתיקייה "icons" . תוכלו להשתמש בזו מהדוגמה שלנו, הלקוחה מתוך IconBeast Lite icon set ובשימוש תחת תנאי הרשיון. שלה.

+ +

אם לא יסופק חלון קופץ, יישלח אירוע הקלקה להרחבה כאשר המשתמש/ת מקיש/ה על הכפתור. אם כן יסופק חלון קופץ, אירוע ההקלקה לא יישלח , אך במקום זאת, החלון הקופץ ייפתח . אנו רוצים חלון קופץ, אז הבה ניצור אותו כצעד הבא.

+ +

החלון הקופץ

+ +

תפקיד החלון הקופץ הוא לאפשר למשתמש/ת לבחור אחת מתוך שלוש חיות.

+ +

צרו תיקייה חדשה בשם "popup" תחת שורש ההרחבה. זה המקום שבו נשמור את הקוד עבור החלון הקופץ. החלון הקופץ יהיה מורכב משלושה קבצים:

+ + + +
mkdir popup
+cd popup
+touch choose_beast.html choose_beast.css choose_beast.js
+
+ +

choose_beast.html

+ +

קובץ ה-HTML נראה כך:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_beast.css"/>
+  </head>
+
+<body>
+  <div id="popup-content">
+    <div class="button beast">Frog</div>
+    <div class="button beast">Turtle</div>
+    <div class="button beast">Snake</div>
+    <div class="button reset">Reset</div>
+  </div>
+  <div id="error-content" class="hidden">
+    <p>Can't beastify this web page.</p><p>Try a different page.</p>
+  </div>
+  <script src="choose_beast.js"></script>
+</body>
+
+</html>
+
+ +

יש לנו אלמנט <div> עם ID  שערכו "popup-content" המכיל אלמנט עבור כל חיה שנבחרה. יש לנו עוד אלמנט <div> עם ID שערכו "error-content" וסיווגו "hidden". נשתמש בו במקרה שיש בעיה לאתחל את החלון הקופץ .

+ +

יש לשים לב לכך שאני כוללים את קובצי  ה-  CSS וה- JS מקובץ זה, בדיוק כמו דף ברשת.

+ +

choose_beast.css

+ +

ה- CSS מקבע את מידות החלון הקופץ, מבטיח ששלוש הבחירות ימלאו את החלל, ונותן להם סגנון בסיסי. הוא גם מסתיר אלמנטים עם class="hidden": כלומר שכברירת מחדל "error-content" <div> יוסתרו.

+ +
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;
+}
+
+
+ +

choose_beast.js

+ +

הנה הג'אווהסקריפט עבור החלון הקופץ:

+ +
/**
+ * CSS to hide everything on the page,
+ * except for elements that have the "beastify-image" class.
+ */
+const hidePage = `body > :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) => {
+
+    /**
+     * 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(() => {
+        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(() => {
+        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);
+
+
+ +

המקום להתחיל פה הוא שורה 96. תסריט החלון הקופץ מבצע תסריט תוכן בלשונית הפעילה מייד כשהחלון הקופץ נטען , באמצעות ממשק הפיתוח browser.tabs.executeScript(). אם ביצוע תסריט התוכן הצליח , תסריט התוכן יישאר טעון בעמוד עד שהלשונית נסגרת או שהמשתמש/ת מנווט/ת לדף שונה.

+ +

סיבה נפוצה שהקריאה ל- browser.tabs.executeScript() עלולה להיכשל היא שלא ניתן לבתע תסריטי תוכן בכל הדפים. לדוגמא, לא ניתן לבצע אותם בדפים פריגילגיים של הדפדפן כגון "about:debugging" , ולא ניתן לבצע אותם בדפים בתוך המתחם  addons.mozilla.org. אם זה נכשל,, reportExecuteScriptError() יסתיר את ה- "popup-content" <div>, יציג את ה- "error-content" <div>, וירשום שגיאה ל-console.

+ +

אם ביצוע תסריט התוכן יצליח, נקרא ל- listenForClicks(). הוא יאזין לקליקים בחלון הקופץ..

+ + + +

הפונקציה beastify() מבצעת שלושה דברים:

+ + + +

הפונקציה reset() בהכרח מבטלת את פעולת  beastify:

+ + + +

תסריט התוכן

+ +

צרו תיקייה חדשה, תחת שורש ההרחבה, ששמה "content_scripts" וצרו קובץ חדש ששמו "beastify.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) => {
+    if (message.command === "beastify") {
+      insertBeast(message.beastURL);
+    } else if (message.command === "reset") {
+      removeExistingBeasts();
+    }
+  });
+
+})();
+
+ +

הדבר הראשון שתסריט התוכן עושה  הוא לבדוק שקיים משתנה גלובלי בשם window.hasRun: אם הוא מוגדר כאמת התסריט ירוץ מוקדם, אחרת הוא מציב ערך אמת ל0 window.hasRun וממשיך. הסיבה שאנו עושים זאת היא שכל פעם שהמשתמש/ת פותח/ת את החלון הקופץ , החלון הקופץ מבצע תסריט תוכן בלשונית הפעילה , כך שיכולים להיות לנו מופעים מרובים של התסריט רצים בלשונית יחידה. אם זה קורה, נצטרך לדאוג שרק המופע הראשון יעשה משהו באמת.

+ +

אחר כך, המקום להתחיל הוא שורה 40, בה תסריט התוכן מאזין להודעות מהחלון הקופץ, באמצעות ממשק הפיתוח  browser.runtime.onMessage. ראינו לעיל כי תסריט החלון הקופץ יכול לשלוח שני סוגי הודעות שונים : "beastify" ו-"reset".

+ + + +

החיות

+ +

לסיום, עלינו לכלול את התמונות של החיות.

+ +

צרו תיקייה חדשה ששמה "beasts", והוסיפו שלוש תמונות לתיקייה זו, אם השמות הנכונים. תוכלו להשיג את התמונות ממאגר ה-GitHub , או מפה:

+ +

+ +

לנסות את זה

+ +

תחילה, בדקו היטב שהקבצים הנכונים נמצאים במקומות הנכונים:

+ +
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
+ +

החל מפיירפוקס 45, ניתן להתקין הרחבות זמנית מהדיסק.

+ +

פתחו את "about:debugging" בפיירפוקס, הקליקו  "טעינת תוספות זמניות...", ובחרו את ה- manifest.json שלכם. תצטרכו לראות כעת את צלמית ההרחבה מופיעה בסרגל הכלים של פיירפוקס

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

פתחו דף ברשת, ואז הקליקו על הצלמית, בחרו חיה , ורארו את הדף משתנה:

+ +

{{EmbedYouTube("YMQXyAQSiE8")}}

+ +

פיתוח משורת הפקודה

+ +

תוכלו לבצע אוטומציה של צעד ההתקנה הזמנית על ידי שימוש בכלי  web-ext. נסו את זה:

+ +
cd beastify
+web-ext run
+
diff --git "a/files/he/mozilla/add-ons/webextensions/\327\230\327\231\327\244\327\225\327\235/index.html" "b/files/he/mozilla/add-ons/webextensions/\327\230\327\231\327\244\327\225\327\235/index.html" new file mode 100644 index 0000000000..57e18c26fa --- /dev/null +++ "b/files/he/mozilla/add-ons/webextensions/\327\230\327\231\327\244\327\225\327\235/index.html" @@ -0,0 +1,57 @@ +--- +title: טיפים וטריקים +slug: Mozilla/Add-ons/WebExtensions/טיפום +tags: + - ECMAScript + - אקמהסקריפט + - הרחבות רשת + - טיפים + - טיפים וטריקים + - טריקים +translation_of: Mozilla/Add-ons/WebExtensions/Tips +--- +

{{AddonSidebar}}

+ +

עמוד זה מכיל טיפים וטריקים שוניםהאמורים להיות שימושיים לאנשים רבים המפתחים הרחבות באמצעות ממשקי הפיתוח של הרחבות רשת.

+ +

שימוש בתכונות ג'אווהסקריפט מתקדמות  מתוך ECMAScript 2015 ו-2016

+ +

פיירפוקס תומך בתכונות רבות של  ECMAScript 2015 מלוץ לקופסה. תכונות חדשות ונסיוניות אחדות, לעומת זאת, אינן זמינות לרשת או להרחבות רשת כברירת מחדל.   ,אם ברצונך להשתמש בתכונות אלו, הטוב ביותר יהיה לתרגן את הקוד שלך על ידי שימוש בכלי כמו  Babel.

+ +

יש לתת את הדעת לכך שכל דבר תחת  לשורה זו הינו מידע לא מעודכן והוצא מ-Babel 6.

+ +

Babel מספק טרנספורמציות לרוב הרחב של תכונות ES2015, ומאפשר אותן כברירת מחדל. מאחר ופיירפוקס כבר תומך באופן מלא ברובן, הטוב ביותר יהיה לקנפג את Babel להתעלם מהן. אנו ממליצים ליצור  קובץ .babelrc או מקטע babel בקובץ ה-package.json של הפרוייקט המכיל את הקוד הבא"

+ +
{
+  "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"
+      ]
+    }
+  }
+}
+
+ +

ואז, בשביל לקמפל תסרעט אינדיבידואלי, יש פשוט להריץ:

+ +
BABEL_ENV=firefox babel <filename>
+
+ +

או, כדי לקמפל כל קובץ ג'אווהסקריפט תחת התיקיה src ולמקם את הקבצים המקומפלים ב-compiled, תוך העתקה על קבצים שאינם בג'אווהסקריפט, להריץ

+ +
BABEL_ENV=firefox babel -Dd compiled src
+
diff --git a/files/he/mozilla/index.html b/files/he/mozilla/index.html new file mode 100644 index 0000000000..edba954db8 --- /dev/null +++ b/files/he/mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +

The articles below include content about downloading and building Mozilla code. In addition, you'll find helpful articles about how the code works, how to build add-ons for Mozilla applications, and the like.

+

{{LandingPageListSubpages}}

diff --git a/files/he/mozilla/javascript_code_modules/geometry.jsm/index.html b/files/he/mozilla/javascript_code_modules/geometry.jsm/index.html new file mode 100644 index 0000000000..2e478771f2 --- /dev/null +++ b/files/he/mozilla/javascript_code_modules/geometry.jsm/index.html @@ -0,0 +1,20 @@ +--- +title: Geometry.jsm +slug: Mozilla/JavaScript_code_modules/Geometry.jsm +tags: + - Geometry + - Modules + - NeedsTranslation + - TopicStub +translation_of: Mozilla/JavaScript_code_modules/Geometry.jsm +--- +

{{ gecko_minversion_header("2.0") }}

+

The Geometry.jsm JavaScript code module provides routines for performing common geometry operations on points and rectangles. It exports two classes: Point and Rect.

+

To use these routines, you first need to import the code module into your JavaScript scope:

+
Components.utils.import("resource://gre/modules/Geometry.jsm");
+
+

Once you've imported the module, you can then use the Point and Rect classes.

+
Note: Although this module is usable from mobile, and is present in Firefox 4, it's currently not used in Firefox 4 and attempting to use it may produce unreliable results there.
+

See also

+ diff --git a/files/he/mozilla/javascript_code_modules/geometry.jsm/point/index.html b/files/he/mozilla/javascript_code_modules/geometry.jsm/point/index.html new file mode 100644 index 0000000000..54b0c6fe81 --- /dev/null +++ b/files/he/mozilla/javascript_code_modules/geometry.jsm/point/index.html @@ -0,0 +1,264 @@ +--- +title: Point +slug: Mozilla/JavaScript_code_modules/Geometry.jsm/Point +translation_of: Mozilla/JavaScript_code_modules/Geometry.jsm/Point +--- +

The Point class offers methods for performing common geometry operations on two dimensional points

+ +

Method overview

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Point add(x, y);
Point add(Point);
Point clone();
boolean equals(x, y);
Point equals(Point);
boolean isZero();
Point map(mapFunction);
Point scale(scaleFactor);
Point set(x, y);
Point set(Point);
Point subtract(x, y);
Point subtract(Point);
String toString();
+ +

Constructor

+ +

יוצר אובייקט Point חדש.

+ +
let p = new Point(x, y);
+
+ +

The new point, p, has the specified X and Y coordinates.

+ +

Methods

+ +

add()

+ +

Adds another point to this one.

+ +
Point add(
+  x,
+  y
+);
+
+Point add(
+  Point
+);
+
+ +
Parameters
+ +
+
x
+
The X coordinate of the point to add to the current point.
+
y
+
The Y coordinate of the point to add to the current point.
+
+ +
Note: You may specify another Point object instead of separate X and Y coordinates.
+ +
Return value
+ +

The value of the Point object after adding the specified value; this isn't a new object, just the same one you called the function on.

+ +

clone()

+ +

Creates and returns a copy of the Point object.

+ +
Point clone();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

A new Point object which is a duplicate of the current object.

+ +

equals()

+ +

Determines whether another point is equal to this one.

+ +
boolean equals(
+  x,
+  y
+);
+
+boolean equals(
+  Point
+);
+
+ +
Parameters
+ +
+
x
+
The X coordinate of the point to compare to the current point.
+
y
+
The Y coordinate of the point to compare to the current point.
+
+ +
Note: You may specify another Point object instead of separate X and Y coordinates.
+ +
Return value
+ +

true if the two points are equal, otherwise false. Equality, in this context, means that both the X and Y coordinates are the same.

+ +

isZero()

+ +

Determines whether or not the point is (0, 0).

+ +
boolean isZero();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

true if the point's X and Y coordinates are both zero; otherwise false.

+ +

map()

+ +

Calls a specified function to manipulate the values of the point's coordinates.

+ +
Point map(
+  mapFunction
+);
+
+ +
Parameters
+ +
+
mapFunction
+
The function to call to map the parameters; this function should accept one parameters: a single coordinate value. The Point object will be the value of this within the called function.
+
+ +
Return value
+ +

The value of the Point object after modifying its coordinates by calling the specified function; this isn't a new object, just the same one you called the function on.

+ +

scale()

+ +

Scales the point's coordinates by a specified factor.

+ +
Point scale(
+  scaleFactor
+);
+
+ +
Parameters
+ +
+
scaleFactor
+
The amount by which to scale the point.
+
+ +
Return value
+ +

The value of the Point object after scaling its coordinates by the specified amount; this isn't a new object, just the same one you called the function on.

+ +

set()

+ +

Sets the value of the Point object.

+ +
Point set(
+  x,
+  y
+);
+
+Point set(
+  Point
+);
+
+ +
Parameters
+ +
+
x
+
The X coordinate of the point.
+
y
+
The Y coordinate of the point.
+
+ +
Note: You may specify another Point object instead of separate X and Y coordinates.
+ +
Return value
+ +

The Point object.

+ +

subtract()

+ +

Subtracts another point from this one.

+ +
Point subtract(
+  x,
+  y
+);
+
+Point subtract(
+  Point
+);
+
+ +
Parameters
+ +
+
x
+
The X coordinate of the point to subtract from the current point.
+
y
+
The Y coordinate of the point to subtract from the current point.
+
+ +
Note: You may specify another Point object instead of separate X and Y coordinates.
+ +
Return value
+ +

The value of the Point object after subtracting the specified value; this isn't a new object, just the same one you called the function on.

+ +

toString()

+ +

Returns a string representation of the Point object.

+ +
String toString();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

A String object representing the point, in "(x,y)" format.

diff --git a/files/he/mozilla/javascript_code_modules/index.html b/files/he/mozilla/javascript_code_modules/index.html new file mode 100644 index 0000000000..f8a4f613be --- /dev/null +++ b/files/he/mozilla/javascript_code_modules/index.html @@ -0,0 +1,147 @@ +--- +title: JavaScript code modules +slug: Mozilla/JavaScript_code_modules +tags: + - Add-ons + - Extensions + - JavaScript + - Landing + - Modules + - Mozilla + - NeedsTranslation + - TopicStub + - XPCOM +translation_of: Mozilla/JavaScript_code_modules +--- +

{{Non-standard_Header}}

+ +
+

Note: These are not the same thing as standard JavaScript modules. See {{JSxRef("Statements/export", "export")}} and {{JSxRef("Statements/import", "import")}} to learn more about how to use standard modules.

+
+ +

JavaScript code modules let multiple privileged JavaScript scopes share code. For example, a module could be used by Firefox itself as well as by extensions, in order to avoid code duplication.

+ +

General topics

+ +
+
+
+
Using JavaScript code modules
+
An introduction to how to use JavaScript code modules.
+
Components.utils.import
+
How to import a JavaScript code module.
+
Components.utils.unload
+
How to unload a JavaScript code module.
+
+
+ +
+
+
Code snippets: Modules
+
Examples of how to use code modules.
+
Mozilla Labs JS Modules
+
This page features a list of JavaScript modules, along with download links and documentation, that extension developers can use in their code.
+
+
+
+ +

Standard code modules

+ +
+
+
+
AddonManager.jsm
+
An interface to install, manage, and uninstall add-ons.
+
AddonRepository.jsm
+
Provides a search of add-ons in the repository.
+
Assert.jsm
+
Implements the CommonJS Unit Testing specification version 1.1, which provides a basic standardized interface for performing in-code logical assertions with optional, customizable error reporting.
+
BookmarkHTMLUtils.jsm
+
Provides utility functions for importing and exporting bookmarks from the old-school "bookmarks.html" style bookmark files.
+
ctypes.jsm
+
Provides an interface that allows JavaScript code to call native libraries without requiring the development of an XPCOM component.
+
CustomizableUI.jsm
+
Allows you to interact with customizable buttons and items in Firefox's main window UI.
+
DeferredTask.jsm
+
Run a task after a delay.
+
Dict.jsm
+
Provides an API for key/value pair dictionaries.
+
DownloadLastDir.jsm
+
Supplies the path to the directory into which the last download occurred.
+
Downloads.jsm
+
Provides a single entry point to interact with the downloading capabilities of the platform.
+
FileUtils.jsm
+
Provides helpers for dealing with files.
+
Geometry.jsm
+
Provides routines for performing basic geometric operations on points and rectangles.
+
HTTP.jsm
+
A wrapper for XMLHttpRequest that provides convenient and simplified API for dealing with HTTP requests.
+
JNI.jsm
+
Abstracts the js-ctypes to provide an interface that allows JavaScript code to call code running in native JVMs.
+
ISO8601DateUtils.jsm
+
Provides routines to convert between JavaScript Date objects and ISO 8601 date strings.
+
Log.jsm (formerly log4moz)
+
Provides a log4j style API for logging, log messages to various endpoints, such as the Browser Console or a file on disk. 
+
+
+ +
+
+
NetUtil.jsm
+
Provides helpful networking utility functions, including the ability to easily copy data from an input stream to an output stream asynchronously.
+
openLocationLastURL.jsm
+
Provides access to the last URL opened using the "Open Location" option in the File menu.
+
OSFile.jsm
+
Allows routines to access files. To which can be read, write, rename, create directories,etc.
+
PerfMeasurement.jsm
+
Provides access to low-level hardware and OS performance measurement tools.
+
PluralForm.jsm
+
Supplies an easy way to get the correct plural forms for the current locale, as well as ways to localize to a specific plural rule.
+
PopupNotifications.jsm
+
Gives an easy way to present non-modal notifications to users.
+
Promise.jsm
+
Implements the Promises/A+ proposal as known in April 2013.
+
PromiseWorker.jsm
+
A version of {{domxref("ChromeWorker")}} which uses Promises to return the worker's result instead of using an event to do so.
+
Services.jsm
+
Provides getters for conveniently obtaining access to commonly-used services.
+
source-editor.jsm
+
The Source Editor is used by developer tools such as, the Style Editor; this interface implements the editor and lets you interact with it.
+
Sqlite.jsm
+
A Promise-based API to mozIStorage/SQLite.
+
Task.jsm
+
Implements a subset of Task.js to make sequential, asynchronous operations simple, using the power of JavaScript's yield operator.
+
Timer.jsm
+
A pure JS implementation of window.setTimeout.
+
Webapps.jsm
+
Provides an interface to manage Open Web Apps.
+
WebRequest.jsm
+
Provides an API to add event listeners for the various stages of making an HTTP request. The event listener receives detailed information about the request, and can modify or cancel the request.
+
XPCOMUtils.jsm
+
Contains utilities for JavaScript components loaded by the JS component loader.
+
+
+
+ + + + diff --git a/files/he/mozilla/projects/index.html b/files/he/mozilla/projects/index.html new file mode 100644 index 0000000000..d7e62c6882 --- /dev/null +++ b/files/he/mozilla/projects/index.html @@ -0,0 +1,15 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Landing + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +

Here you'll find links to documentation about various Mozilla projects; these are often parts of Firefox or other products, but may also be used in other projects as well.

+ +

{{ LandingPageListSubpages() }}

diff --git a/files/he/mozilla/projects/rhino/index.html b/files/he/mozilla/projects/rhino/index.html new file mode 100644 index 0000000000..97f954eb40 --- /dev/null +++ b/files/he/mozilla/projects/rhino/index.html @@ -0,0 +1,26 @@ +--- +title: Rhino +slug: Mozilla/Projects/Rhino +tags: + - Rhino + - ג'אווה סקריפט + - מוזילה +translation_of: Mozilla/Projects/Rhino +--- +

Image:rhino.jpg

+ +

Rhino (קרנף) הוא מימוש קוד-פתוח של ג'אווה סקריפט שנכתב כולו בג'אווה. בדרך כלל הוא מוטמע ביישומי ג'אווה כדי לספק תסריטים למשתמשי קצה. הוא מוטמע ב-J2SE 6 כמנוע התסריטים ברירת המחדל של ג'אווה.

+ +

הורדות Rhino

+ +

כיצד להשיג את המקור והבינאריים. 

+ +

תיעוד Rhino

+ +

מידע אודות Rhino לכותבי תסריטים ומטמיעים.

+ +

עזרה ל-Rhino

+ +

כמה משאבים אם נתקעת.

+ +

{{ languages( { "ja": "ja/Rhino" } ) }}

diff --git a/files/he/mozilla/projects/thunderbird/thunderbird_localization/index.html b/files/he/mozilla/projects/thunderbird/thunderbird_localization/index.html new file mode 100644 index 0000000000..99310e33a9 --- /dev/null +++ b/files/he/mozilla/projects/thunderbird/thunderbird_localization/index.html @@ -0,0 +1,98 @@ +--- +title: Thunderbird Localization +slug: Mozilla/Projects/Thunderbird/Thunderbird_Localization +tags: + - גיור + - לוקליזציה +translation_of: Mozilla/Projects/Thunderbird/Thunderbird_Localization +--- +

This page is aimed at current and future localizers of Thunderbird, Mozilla Messaging's e-mail and usenet client. It covers many aspects a localizer of Thunderbird should be aware of like necessary tools, how to get information about localization-relevant events and various other items of interest.

+ +

Creating a Thunderbird localization

+ +

Creating a new localization (Mercurial) - This article describes how you can create a new localization for Thunderbird.

+ +

About repostories and branches

+ +

There are 3 active repositories for Thunderbird development. Thunderbird development work is merged from one branch to the next every six weeks.

+ + + +

Most locales will being working on comm-aurora. This repository/branch is stable with respect to strings for each six week period. Completing work here means it is ready for the first beta, and you won't need to work on beta branch. Your work will also automatically be carried forward.

+ +

Localization Requirements

+ +

There are not significant restrictions on what locales can change. However, we need to work together on providing search engines for Thunderbird users to use to get the right balance of search engines and the correct options set. For further information see this page.

+ +

Localization Dashboard

+ +

The localization dashboard for Thunderbird gives localizers a precise overview of the current status of their localization. Detailed information is available on the l10n dashboard page.

+ +

A localization will added to the l10n dashboard on request when it has reached a high-level of completion (> 80%) as shown by the compare-locales output. To request the addition of your locale to the dashboard, file a bug in the Thunderbird product/Build Config component.

+ +

Getting l10n-relevant information

+ +

Newsgroups & Mailinglists

+ +

Localizers of Thunderbird should read the localization newsgroups (mozilla.dev.l10n.announce mozilla.dev.l10n) to stay informed of Thunderbird-specific and general l10n-related items of interest to them. They are further encouraged to read the Thunderbird development newsgroup (mozilla.dev.apps.thunderbird) to stay informed of recent Thunderbird-related developments.

+ +

These newsgroups can also be accessed via the dev-l10n-announce@lists.mozilla.org, dev-l10n@lists.mozilla.org (localization mailinglist) or dev-apps-thunderbird@lists.mozilla.org (Thunderbird development mailinglist) mailinglists, which mirror the newsgroups mentioned above. You can subscribe to or unsubscribe from these mailinglists via the web interface at lists.mozilla.org.

+ +

Bugzilla

+ +

Localizers should watch the thunderbird@localization.bugs mail address (or its alias :tb-l10n) to stay current on bugs that might affect Thunderbird localizers. This can be done by adding this mail address to the "User Watching" section of your Email preferences in bugzilla.

+ + + + + +

Locale Tiers

+ +

Locale tiers reflect locales that we need to have in a good state for release. There are 10 locales in tier 1, which are the most important for Thunderbird, because of their number of Thunderbird users or potential for growth.

+ +

These locales are being treated as first-class citizens, as important as en-US, which is to say that any Tier 1 locale that does not meet the requirements may block a final release of Thunderbird.

+ +

Tier 1

+ +

The following are P1 (priority 1) locales in order of priority:

+ +
* de             -  German
+* fr             -  French
+* ja, ja-JP-mac  -  Japanese
+* en-GB          -  British English
+* es-ES          -  Spanish (European continent)
+* it             -  Italian
+* pl             -  Polish
+* ru             -  Russian
+* nl             -  Dutch
+* pt-BR          -  Brazilian Portuguese
+
+ +

Tier 2

+ +

All other supported locales are in the tier 2 category.

-- cgit v1.2.3-54-g00ecf