From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/he/mozilla/add-ons/index.html | 104 ----- .../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 ------ .../manifest.json/permissions/index.html | 199 --------- .../webextensions/modify_a_web_page/index.html | 252 ----------- .../mozilla/add-ons/webextensions/tips/index.html | 58 --- .../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 ------------------- files/he/mozilla/index.html | 10 - 20 files changed, 2831 deletions(-) delete mode 100644 files/he/mozilla/add-ons/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/api/alarms/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/api/browseraction/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/api/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/api/storage/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/content_scripts/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/manifest.json/background/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/manifest.json/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/manifest.json/permissions/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/modify_a_web_page/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/tips/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/user_interface/browser_action/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/user_interface/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/what_are_webextensions/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/your_first_webextension/index.html delete mode 100644 files/he/mozilla/add-ons/webextensions/your_second_webextension/index.html delete mode 100644 files/he/mozilla/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 deleted file mode 100644 index ca718d6324..0000000000 --- a/files/he/mozilla/add-ons/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -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/webextensions/anatomy_of_a_webextension/index.html b/files/he/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html deleted file mode 100644 index 049dfbd389..0000000000 --- a/files/he/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -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 deleted file mode 100644 index 30a42d1d02..0000000000 --- a/files/he/mozilla/add-ons/webextensions/api/alarms/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -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 deleted file mode 100644 index 195f81d304..0000000000 --- a/files/he/mozilla/add-ons/webextensions/api/browseraction/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -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 deleted file mode 100644 index 4cbd4a2a8a..0000000000 --- a/files/he/mozilla/add-ons/webextensions/api/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -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 deleted file mode 100644 index f866b07efa..0000000000 --- a/files/he/mozilla/add-ons/webextensions/api/storage/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -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 deleted file mode 100644 index 90b11fb246..0000000000 --- a/files/he/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -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 deleted file mode 100644 index 727114978d..0000000000 --- a/files/he/mozilla/add-ons/webextensions/content_scripts/index.html +++ /dev/null @@ -1,493 +0,0 @@ ---- -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 deleted file mode 100644 index 221ec714ca..0000000000 --- a/files/he/mozilla/add-ons/webextensions/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -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 deleted file mode 100644 index cbd429b6f9..0000000000 --- a/files/he/mozilla/add-ons/webextensions/manifest.json/background/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -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 deleted file mode 100644 index 13e7d0f8f8..0000000000 --- a/files/he/mozilla/add-ons/webextensions/manifest.json/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -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/permissions/index.html b/files/he/mozilla/add-ons/webextensions/manifest.json/permissions/index.html deleted file mode 100644 index b5ad7321b4..0000000000 --- a/files/he/mozilla/add-ons/webextensions/manifest.json/permissions/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: הרשאות -slug: Mozilla/Add-ons/WebExtensions/manifest.json/permissions -tags: - - manifest.json - - הפניה - - הרחבות - - הרחבות רשת - - הרשאות - - תוספים -translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/permissions -original_slug: Mozilla/Add-ons/WebExtensions/manifest.json/הרשאות ---- -

{{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 deleted file mode 100644 index 8ad3ab8cc5..0000000000 --- a/files/he/mozilla/add-ons/webextensions/modify_a_web_page/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -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/tips/index.html b/files/he/mozilla/add-ons/webextensions/tips/index.html deleted file mode 100644 index 35b36bd5ae..0000000000 --- a/files/he/mozilla/add-ons/webextensions/tips/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: טיפים וטריקים -slug: Mozilla/Add-ons/WebExtensions/Tips -tags: - - ECMAScript - - אקמהסקריפט - - הרחבות רשת - - טיפים - - טיפים וטריקים - - טריקים -translation_of: Mozilla/Add-ons/WebExtensions/Tips -original_slug: Mozilla/Add-ons/WebExtensions/טיפום ---- -

{{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/add-ons/webextensions/user_interface/browser_action/index.html b/files/he/mozilla/add-ons/webextensions/user_interface/browser_action/index.html deleted file mode 100644 index d3ae50e9d9..0000000000 --- a/files/he/mozilla/add-ons/webextensions/user_interface/browser_action/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -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 deleted file mode 100644 index 78b988a523..0000000000 --- a/files/he/mozilla/add-ons/webextensions/user_interface/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -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 deleted file mode 100644 index 2dbe632f44..0000000000 --- a/files/he/mozilla/add-ons/webextensions/what_are_webextensions/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -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 deleted file mode 100644 index a167a224b4..0000000000 --- a/files/he/mozilla/add-ons/webextensions/your_first_webextension/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -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 deleted file mode 100644 index 528daff645..0000000000 --- a/files/he/mozilla/add-ons/webextensions/your_second_webextension/index.html +++ /dev/null @@ -1,458 +0,0 @@ ---- -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/index.html b/files/he/mozilla/index.html deleted file mode 100644 index edba954db8..0000000000 --- a/files/he/mozilla/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -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}}

-- cgit v1.2.3-54-g00ecf