1 files changed, 252 insertions, 0 deletions
diff --git a/files/he/mozilla/add-ons/webextensions/modify_a_web_page/index.html b/files/he/mozilla/add-ons/webextensions/modify_a_web_page/index.html
new file mode 100644
index 0000000000..8ad3ab8cc5
--- /dev/null
+++ b/files/he/mozilla/add-ons/webextensions/modify_a_web_page/index.html
@@ -0,0 +1,252 @@
+---
+title: שינוי דפים מהרשת
+slug: Mozilla/Add-ons/WebExtensions/Modify_a_web_page
+translation_of: Mozilla/Add-ons/WebExtensions/Modify_a_web_page
+---
+<div>{{AddonSidebar}}</div>
+
+<p>אחד השימושים הנפוצים להרחגה הוא לשנות דף מהרשת. לדוגמה,  הרחבה עשויה לרצות שלנות את הסגנון שבשימוש הדף , להסתיר צמתי DOM מסויימים, או להחדיר צמתי DOM נוןספים לדף.</p>
+
+<p>קיימות שתי דרכים לעשות זאת עם ממשקי פיתוח הרחבות הרשת:</p>
+
+<ul>
+ <li><strong>הצהרתית</strong>: על ידי הגדרת תבנית התואמת קבוצה של כתובות URL, וטעינת קבוצה של תסריטים לתוך בדפים שכתובת ה-URL שלהם תואמת את התבנית.</li>
+ <li><strong>תכנותית</strong>: באמתעות ממשקי פיתוח יישומי ג'אווה-סקריפט, טעינת התסריט לתוך הדף המאורח בלשונית מסויימת.</li>
+</ul>
+
+<p>בכל דרך, תסריטים אלה קרויים תסריטי תוכן, והם שונים מתסריטים אחרים שההרחבה עשויה מהם:</p>
+
+<ul>
+ <li>יש להם גישה רק לקבוצה קטנה של ממשקי פיתוח ההרחבות הרשת.</li>
+ <li>יש להם גישה ישירה לדפי הרשת אליהם הם נטענו.</li>
+ <li>הם מתקשרים עם שאר ההרחבה באמצעות ממשק פיתוח היישמוים של מערכת ההודעות.</li>
+</ul>
+
+<p>במאמר זה נתבונן בשתי השיטות של טעינת תסריט.</p>
+
+<h2 id="שינויים_בדפים_התואמים_תבנית_URL">שינויים בדפים התואמים תבנית URL</h2>
+
+<p>קודם כל, צרו תיקייה חדשה בשם "modify-page". בתיקייה זו, צרו קובץ בשם   "manifest.json", המכיל את התוכן הבא:</p>
+
+<pre class="brush: json notranslate">{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["https://developer.mozilla.org/*"],
+      "js": ["page-eater.js"]
+    }
+  ]
+
+}</pre>
+
+<p>המפתח <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> הוא הדרך לטעון תסריטים לתוך דפים התואמים תבניות  URL  במקרה זה, <code>content_scripts</code> מורה לדפדפן לטעון תסריט בשם   "page-eater.js" לתוך כל הדפים תחת <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p>
+
+<div class="note">
+<p>מאחר שהתכונה <code>"js"</code> של  <code>content_scripts</code> היא מערך, תוכלו להשתמש בה כדי להחדיר יותר מתסריט אחד לתוך דפים תואמים . אם תעשו זאת דף יחלוק את אותו התחום, כשם שתסריטים מרובים הנטענים על ידי דף, והם ייטענו בסדר שנרשמו בתוך המערך.</p>
+</div>
+
+<div class="note">
+<p>למפתח <code>content_scripts</code> יש גם תכונת <code>"css"</code> בה תוכלו להשתמש כדי להחסיר דפי סגנונות המקודדים ב-CSS</p>
+</div>
+
+<p>כעת, צרו קובץ בשם "page-eater.js" בתוך התיקייה "modify-page" , ושימו בו את התוכן הבא:</p>
+
+<pre class="brush: js notranslate">document.body.textContent = "";
+
+var header = document.createElement('h1');
+header.textContent = "This page has been eaten";
+document.body.appendChild(header);</pre>
+
+<p>כעת <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">iהתקינו את ההרחבה</a>, ובקרו בדף <a href="https://developer.mozilla.org/">https://developer.mozilla.org:/</a></p>
+
+<p>{{EmbedYouTube("lxf2Tkg6U1M")}}</p>
+
+<div class="note">
+<p>שימו לב כי למרות שבסרטון מוצג תסריט תוכן הפועל ב- <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>, תסריטי תוכן לעת עתה חסומים באתר זה.</p>
+</div>
+
+<h2 id="שינוי_דפים_תכנותית">שינוי דפים תכנותית</h2>
+
+<p>מה אם תרצו לאכול דפים, אבל רק כשהמשתמש/ת מבקש/ת זאת? הבה נעדכן את הדוגמה הבאה כך שנחדיר תסריט תוכן כאשר משתמש/ת מקיש/ה על פריט מתפריט ההקשר.</p>
+
+<p>תחילה, עדכנו את  "manifest.json" כך שיכיל את התוכן הבא:</p>
+
+<pre class="brush: json notranslate">{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "permissions": [
+    "activeTab",
+    "contextMenus"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}</pre>
+
+<p>כאן, הוצאנו את המפתח <code>content_scripts</code>, והוספנו שני מפתחות חדשים:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>: להחדיר תסריטים לתוך דפים שדרושות הרשאות לדפים שאנו מעדכנים. ההרשאה <a href="/he/docs/Mozilla/Add-ons/WebExtensions/manifest.json/הרשאות#הרשאות_ממשק_פיתוח_יישומים"><code>activeTab</code></a> היא דרך להשיג זאת זמנית עבור הלשונית הפעילה באותו רגע . דרושה לנו גם ההרשאה <code>contextMenus</code> כדי שנוכל להוסיף פריטים לתפריט ההקשר.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background">background</a></code>: We're using this to load a persistent <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">"background script"</a> called "background.js", in which we'll set up the context menu and inject the content script.</li>
+</ul>
+
+<p>Let's create this file. Create a new file called "background.js" in the "modify-page" directory, and give it the following contents:</p>
+
+<pre class="brush: js notranslate">browser.contextMenus.create({
+  id: "eat-page",
+  title: "Eat this page"
+});
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "eat-page") {
+    browser.tabs.executeScript({
+      file: "page-eater.js"
+    });
+  }
+});
+</pre>
+
+<p>In this script we're creating a <a href="/en-US/Add-ons/WebExtensions/API/ContextMenus/create">context menu item</a>, giving it a specific id and title (the text to be displayed in the context menu). Then we set up an event listener so that when the user clicks a context menu item, we check to see if it is our <code>eat-page</code> item. If it is, we inject "page-eater.js" into the current tab using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code> API. This API optionally takes a tab ID as an argument: we've omitted the tab ID, which means that the script is injected into the currently active tab.</p>
+
+<p>At this point the extension should look like this:</p>
+
+<pre class="line-numbers  language-html notranslate"><code class="language-html">modify-page/
+    background.js
+    manifest.json
+    page-eater.js</code></pre>
+
+<p>Now <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">reload the extension</a>, open a page (any page, this time) activate the context menu, and select "Eat this page":</p>
+
+<p>{{EmbedYouTube("zX4Bcv8VctA")}}</p>
+
+<div class="note">
+<p>Note that although this video shows the content script working in <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>, content scripts are currently blocked for this site.</p>
+</div>
+
+<h2 id="Messaging">Messaging</h2>
+
+<p>Content scripts and background scripts can't directly access each other's state. However, they can communicate by sending messages. One end sets up a message listener, and the other end can then send it a message. The following table summarises the APIs involved on each side:</p>
+
+<table class=" fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col">In content script</th>
+   <th scope="col">In background script</th>
+  </tr>
+  <tr>
+   <th scope="row">Send a message</th>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#sendMessage()">browser.runtime.sendMessage()</a></code></td>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/sendMessage">browser.tabs.sendMessage()</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">Receive a message</th>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onMessage">browser.runtime.onMessage</a></code></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="blockIndicator note">
+<p>In addition to this method of communication, which sends one-off messages, you can also use a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Connection-based_messaging">connection-based approach to exchange messages</a>. For advice on choosing between the options, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Choosing_between_one-off_messages_and_connection-based_messaging">Choosing between one-off messages and connection-based messaging</a>.</p>
+</div>
+
+<p>Let's update our example to show how to send a message from the background script.</p>
+
+<p>First, edit "background.js" so that it has these contents:</p>
+
+<pre class="brush: js notranslate">browser.contextMenus.create({
+  id: "eat-page",
+  title: "Eat this page"
+});
+
+function messageTab(tabs) {
+  browser.tabs.sendMessage(tabs[0].id, {
+    replacement: "Message from the extension!"
+  });
+}
+
+function onExecuted(result) {
+    var querying = browser.tabs.query({
+        active: true,
+        currentWindow: true
+    });
+    querying.then(messageTab);
+}
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "eat-page") {
+    let executing = browser.tabs.executeScript({
+      file: "page-eater.js"
+    });
+    executing.then(onExecuted);
+  }
+});
+</pre>
+
+<p>Now, after injecting "page-eater.js", we use <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">tabs.query()</a></code> to get the currently active tab, and then use <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code> to send a message to the content scripts loaded into that tab. The message has the payload <code>{replacement: "Message from the extension!"}</code>.</p>
+
+<p>Next, update "page-eater.js" like this:</p>
+
+<pre class="brush: js notranslate">function eatPageReceiver(request, sender, sendResponse) {
+  document.body.textContent = "";
+  var header = document.createElement('h1');
+  header.textContent = request.replacement;
+  document.body.appendChild(header);
+}
+browser.runtime.onMessage.addListener(eatPageReceiver);
+</pre>
+
+<p>Now instead of just eating the page right away, the content script listens for a message using <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code>. When a message arrives, the content script runs essentially the same code as before, except that the replacement text is taken from <code>request.replacement</code>.</p>
+
+<p>Since <code><a href="/en-US/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code> is an asynchronous function, and to ensure we send message only after listener has been added in "page-eater.js", we use <code>onExecuted</code> which will be called after "page-eater.js" executed.</p>
+
+<div class="note">
+<p>Press Ctrl+Shift+J (or Cmd+Shift+J on a Mac) OR <code>web-ext run --bc</code> to open <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a> to view <code>console.log</code> in background script. Alternatively use <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>  which allows you set breakpoint. There is currently no way to <a href="https://github.com/mozilla/web-ext/issues/759">start Add-on Debugger directly from web-ext</a>.</p>
+</div>
+
+<p>If we want send messages back from the content script to the background page,  we would use <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code> instead of <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code>, e.g.:</p>
+
+<pre class="brush: js notranslate">browser.runtime.sendMessage({
+    title: "from page-eater.js"
+});</pre>
+
+<div class="note">
+<p>These examples all inject JavaScript; you can also inject CSS programmatically using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS()</a></code> function.</p>
+</div>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Content scripts</a> guide</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> manifest key</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> manifest key</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code></li>
+ <li>Examples using <code>content_scripts</code>:
+  <ul>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/borderify">borderify</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/emoji-substitution" rel="noopener">emoji-substitution</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/page-to-extension-messaging">page-to-extension-messaging</a></li>
+  </ul>
+ </li>
+ <li>Examples using <code>tabs.executeScript()</code>:
+  <ul>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a></li>
+   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/context-menu-copy-link-with-types">context-menu-copy-link-with-types</a></li>
+  </ul>
+ </li>
+</ul>