---
title: תסריטי תוכן
slug: Mozilla/Add-ons/WebExtensions/Content_scripts
tags:
  - הרחבות רשת
translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts
---
<div>{{AddonSidebar}}</div>

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

<p><a href="/en-US/Add-ons/WebExtensions/Background_scripts">תסריטי רקע</a> יכולים לגשת לכל  <a href="/en-US/Add-ons/WebExtensions/API">ממשקי הפיתוח בג'אווהסקריפט של הרחבות הרשת</a>,   אך אינם ניגשים ישירות לתוכן של עמודי רשת.  לכן אם ההרחבה שלך צריכה לעשות זאת, עליך לכתוב תסריט תוכן.</p>

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

<p>תסריטי תוכן יכולים לגשת רק ל<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">תת קבוצה קטנה של ממשקי פיתוח הרחבות הרשת</a>,   אך <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">לתקשר עם תסריטי רקע</a> באמצעות מערכת שליחת הודעות, ובאמצעותן לגשת בעקיפין לממשקי הפיתוח של הרחבות הרשת.</p>

<div class="note">
<p>לתשומת לבך תסריטי תוכן חסומים במתחמים הבאים:</p>

<ul style="display: grid;">
 <li>accounts-static.cdn.mozilla.net</li>
 <li>accounts.firefox.com</li>
 <li>addons.cdn.mozilla.net</li>
 <li>addons.mozilla.org</li>
 <li>api.accounts.firefox.com</li>
 <li>content.cdn.mozilla.net</li>
 <li>content.cdn.mozilla.net</li>
 <li>discovery.addons.mozilla.org</li>
 <li>input.mozilla.org</li>
 <li>install.mozilla.org</li>
 <li>oauth.accounts.firefox.com</li>
 <li>profile.accounts.firefox.com</li>
 <li>support.mozilla.org</li>
 <li>sync.services.mozilla.com</li>
 <li>testpilot.firefox.com</li>
</ul>

<p>נסיון להחדיר תסריט תוכן לאתרים אלה ייכשל טהעמוד ירשום שגיאת  <a href="/en-US/docs/Web/HTTP/CSP">CSP</a> ללוג.</p>

<p>משום שמגבלות אלו כוללות את  addons.mozilla.org, משתמשים עשויים לנסות להשתמש בהרחבה שלך מיד אחרי ההתקנה —רק כדי לגלות שאינה עובדת! ייתכן ותרצה/י להוסיף אזהרה הולמת, או   <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/onboarding_upboarding_offboarding_best_practices">דף onboarding</a> להרחיק משתמשים מ- addons.mozilla.org.</p>
</div>

<div class="note">
<p>ערכים הנוספים לסקופ הגלובלי של תסריט תוכן באמצעות <code>var foo</code> או <code>window.foo = "bar"</code> עלולים להיעלם עקב באג <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1408996">1408996</a>.</p>
</div>

<h2 id="טעינת_תסריט_תוכן">טעינת תסריט תוכן</h2>

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

<ol>
 <li><strong>בעת ההתקנה, לתוך דפים התואמים תבניות URL:</strong> באמצעות מפתח ה-<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> בקובץ ה-manifest.json שלך, ניתן  לבקש מהדפדפן לטעון תסריט תוכן בכל פעם שהדפדפן מעלה דף שה-URL שלו <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">תואם תבנית נתונה</a>.</li>
 <li><strong>בזמן ריצה, לתוך דפים התואמים תבניתו URL :</strong> באמצעות ממשק פיתוח היישומים {{WebExtAPIRef("contentScripts")}} API, ניתן לבקש מהדפדפן לטעון  תסריט תוכן בכל ]עפ שהדפדפן טוען דף שה-URL שלו  <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">תואם תבנית נתונה matches a given pattern</a>. זה בפשטות כמו בשיטה  (1), פרט לכך שניתן להוסיף ולהסיר תסריט תוכן בזמן ריצה.</li>
 <li><strong>בזמן ריצה, לתוך לשוניות מסוימות  into specific tabs:</strong> באמצאות צצשק הפיתוח  <code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/executeScript">tabs.executeScript()</a></code> , ניתן לטעון תסריט תוכן בכל עת שיהיה ברצונך: למשל, סתגובה להקשת משתמש/ת על <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">פעולת דפדפן</a>.</li>
</ol>

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

<p>באמצעות שיטות (1) ו- (2), ניתן לטעון תסריטים לתוך דפים שה- URL-ים שלהם  יכולים להיות מיוצגים באמצעות <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">תבניות התאמה</a>.</p>

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

<h2 id="סביבת_תסריטי_תוכן">סביבת תסריטי תוכן</h2>

<h3 id="גישה_ל-DOM">גישה ל-DOM</h3>

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

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

<ul>
 <li>תסריטי תוכן אינם יכולים לראות משתני ג'אווהסקריפט המוגדרים על ידי תסריטי דף.</li>
 <li>אם תסריט דף משנה תכונה מובנית ב- DOM , תפריט התוכן יראה את הגרסה המקורית של התכונה, ולא את הגרסה המוגדרת מחדש.</li>
</ul>

<p>בפיירפוקס התנהגות זו קרויה <a href="/en-US/docs/Xray_vision">ראיית רנטגן</a>.</p>

<p>חשבו על דף רשת כזה:</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;script src="page-scripts/page-script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>התסריט "page-script.js" עושה את זה:</p>

<pre class="brush: js">// page-script.js

// add a new element to the DOM
var p = document.createElement("p");
p.textContent = "This paragraph was added by a page script.";
p.setAttribute("id", "page-script-para");
document.body.appendChild(p);

// define a new property on the window
window.foo = "This global variable was added by a page script";

// redefine the built-in window.confirm() function
window.confirm = function() {
  alert("The page script has also redefined 'confirm'");
}</pre>

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

<pre class="brush: js">// content-script.js

// can access and modify the DOM
var pageScriptPara = document.getElementById("page-script-para");
pageScriptPara.style.backgroundColor = "blue";

// can't see page-script-added properties
console.log(window.foo);  // undefined

// sees the original form of redefined properties
window.confirm("Are you sure?"); // calls the original window.confirm()</pre>

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

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

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

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

<pre class="brush: json">"content_scripts": [
  {
    "matches": ["*://*.mozilla.org/*"],
    "js": ["jquery.js", "content-script.js"]
  }
]</pre>

<div class="blockIndicator note">
<p><strong>לתשומת לבך:</strong> פיירפוקס <em>כן</em> מספק כמה ממשקי פיתוח יישומים המאפשרים לתסריטי תוכן לגשת לאובייקטי ג'אווהסקריפט הנוצרים על ידי תסריטי דף, ולחשוף את אובייקטי הג'אווהסקריפט שלהם לתסריטי דף.</p>

<p>ראו  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">שיתוף אובייקטים עם תסריטי דף</a> לפרטים נוספים.</p>
</div>

<h3 id="ממשקי_פיתוח_יישומים_של_הרחבות_רשת">ממשקי פיתוח יישומים של הרחבות רשת</h3>

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

<p>מתוך <code><a href="/en-US/Add-ons/WebExtensions/API/extension">extension</a></code>:</p>

<ul>
 <li><code><a href="/en-US/Add-ons/WebExtensions/API/extension#getURL()">getURL()</a></code></li>
 <li><code><a href="/en-US/Add-ons/WebExtensions/API/extension#inIncognitoContext">inIncognitoContext</a></code></li>
</ul>

<p>מתוך <code><a href="/en-US/Add-ons/WebExtensions/API/runtime">runtime</a></code>:</p>

<ul>
 <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#connect()">connect()</a></code></li>
 <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#getManifest()">getManifest()</a></code></li>
 <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#getURL()">getURL()</a></code></li>
 <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onConnect">onConnect</a></code></li>
 <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onMessage">onMessage</a></code></li>
 <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#sendMessage()">sendMessage()</a></code></li>
</ul>

<p>מתוך <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n">i18n</a></code>:</p>

<ul>
 <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getMessage">getMessage()</a></code></li>
 <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getAcceptLanguages">getAcceptLanguages()</a></code></li>
 <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getUILanguage">getUILanguage()</a></code></li>
 <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/detectLanguage">detectLanguage()</a></code></li>
</ul>

<p>מתוך <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus">menus</a></code>:</p>

<ul>
 <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement">getTargetElement</a></code></li>
</ul>

<p>הכל מתוך <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code>.</p>

<h3 id="XHR_ו-Fetch">XHR ו-Fetch</h3>

<p>.תסריטי תוכן יכולים להכין בקשות באמצעות ממשקי פיתוח היישומים <code><a href="/en-US/docs/Web/API/XMLHttpRequest">window.XMLHttpRequest</a></code> ו- <code><a href="/en-US/docs/Web/API/Fetch_API">window.fetch()</a></code>.</p>

<div class="blockIndicator note">
<p>בפיירפוקס, בקשות תסריטי התוכן (לדוגמא, באמצעות <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">fetch()</a>) קורות בהקשר של הרחבה, כך שיש לספק כתובת  URL מוחלטת  כדי להתייחס לתוכן דף. בכרום, בקשות אלה קורות בהקשר של דף, כך שכתובות ה-URL הן יחסיות,  לדוגמא, <code>/api</code> נשלחת ל- <code>https://[current page URL]/api</code>.</p>
</div>

<p>תסריטי תוכן מקבלים את אותן פריבילגיות חוצות מתחמים כמו שאר ההרחבות, כך שאם הרחבה בקשה גישה חוצת מתחמים עבור מתחם באמצעות מפתח  <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> ב- manifest.json, אזי תסריט התוכן יקבל גישה גם למתחם זה. </p>

<p>זה יושג על ידי חשיפת יותר מופעי   XHR ו- fetch  בעלי יותר פריבילגיות בתסריט התוכן, להם תופעת הלוואי של אי הגדרת כותרות ה<code><a href="/en-US/docs/Web/HTTP/Headers/Origin">origin</a></code> והr<code><a href="/en-US/docs/Web/HTTP/Headers/Referer">eferer</a></code> כמו לבקשות מהדף עצמו, לעתים תכופות זה מועדף כדי למנוע מבקשה לחשוף את הטבע חוצה המקורות שלה.  מגרסה 58 ואילך  הרחבות הצריכות לבצע בקשות המתנהגות כאילו משלחו מהתוכן עצמו  יכולות להשתמש ב- <code>content.XMLHttpRequest</code> וב-<code>content.fetch()</code> במקום. להרחבות חוצות דפדפנים נוכחותן חייבת להיו מגולת תכונות.</p>

<h2 id="תקשורת_עם_תסריטי_רקע">תקשורת עם תסריטי רקע</h2>

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

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

<h3 id="הודעות_בודדות">הודעות בודדות</h3>

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

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="row"></th>
   <th scope="col">בתסריט התוכן</th>
   <th scope="col">בתסריט הרקע</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">שליחת הודעה</th>
   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/sendMessage">browser.runtime.sendMessage()</a></code></td>
   <td><code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/sendMessage">browser.tabs.sendMessage()</a></code></td>
  </tr>
  <tr>
   <th scope="row">קבלת הודעה</th>
   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td>
   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td>
  </tr>
 </tbody>
</table>

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

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

<pre class="brush: js">// content-script.js

window.addEventListener("click", notifyExtension);

function notifyExtension(e) {
  if (e.target.tagName != "A") {
    return;
  }
  browser.runtime.sendMessage({"url": e.target.href});
}</pre>

<p>תסריט הרקע מאזין להודעות האלה ומציג התראה באמצעוץ ממשק ה-<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></code> :</p>

<pre class="brush: js">// background-script.js

browser.runtime.onMessage.addListener(notify);

function notify(message) {
  browser.notifications.create({
    "type": "basic",
    "iconUrl": browser.extension.getURL("link.png"),
    "title": "You clicked a link!",
    "message": message.url
  });
}
</pre>

<p>(הקוד לדוגמא מעובד קלות מהדוגמא <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a>   ב-GitHub.)</p>

<h3 id="טיפול_בהודעות_מבוסס_התחברות">טיפול בהודעות מבוסס התחברות</h3>

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

<p>לכל צד יש אובייקט <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code>, המשמש החלפת הודעות.</p>

<p>ליצירת התחברות:</p>

<ul>
 <li>צד אחד מאזין להתחברויות באמצעות <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code></li>
 <li>הצד השני קורא ל:
  <ul>
   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/connect">tabs.connect()</a></code> (אם מתחבר לתסריט תוכן); או</li>
   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect">runtime.connect()</a></code> (אם מתחבר לתסריט רקע).</li>
  </ul>
 </li>
</ul>

<p>זה מחזיר אובייקט מסוג <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code>.</p>

<ul>
 <li>מאזין ה-<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code> מועבר לאובייקט <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> משלו.</li>
</ul>

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

<ul>
 <li>לשלוח הודעות באמצעות <code>runtime.Port.postMessage()</code>, וגם</li>
 <li>לקבל הודעות באמצעות <code>runtime.Port.onMessage()</code></li>
</ul>

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

<ul>
 <li>מתחבר לתסריט הרקע</li>
 <li>מאחסן את ה-<code>Port</code> במשתנה <code>myPort</code></li>
 <li>מאזין להודעות על גבי <code>myPort</code>, ורושם אותן ליומן</li>
 <li>משתמש ב-<code>myPort</code> לשלוח הודעות לתסריט הרקע  כשהמתמש/ת מקליק/ה על המסמך</li>
</ul>

<pre class="brush: js">// content-script.js

var myPort = browser.runtime.connect({name:"port-from-cs"});
myPort.postMessage({greeting: "hello from content script"});

myPort.onMessage.addListener(function(m) {
  console.log("In content script, received message from background script: ");
  console.log(m.greeting);
});

document.body.addEventListener("click", function() {
  myPort.postMessage({greeting: "they clicked the page!"});
});</pre>

<p>תסריט הרקע המכותב:</p>

<ul>
 <li>מאזין לנסיונות ההתחברות של תסריט התוכן</li>
 <li>כשמקבל נסיון התחברות:
  <ul>
   <li>שומר את הפתחה במשתנה בשם <code>portFromCS</code></li>
   <li>שולח לתסריט התוכן הודעה באמצעות הפתחה</li>
   <li>מתחיל להאזין להודעות המתקבלות על גבי הפתחה, ורושם אותן ליומן</li>
  </ul>
 </li>
 <li>שולח הודעות לתסריט התוכן, using <code>portFromCS</code>, כשהמשתמש/ת מקליק/ה על פעולת הדפדפן של ההרחבה.</li>
</ul>

<pre class="brush: js">// background-script.js

var portFromCS;

function connected(p) {
  portFromCS = p;
  portFromCS.postMessage({greeting: "hi there content script!"});
  portFromCS.onMessage.addListener(function(m) {
    console.log("In background script, received message from content script");
    console.log(m.greeting);
  });
}

browser.runtime.onConnect.addListener(connected);

browser.browserAction.onClicked.addListener(function() {
  portFromCS.postMessage({greeting: "they clicked the button!"});
});
</pre>

<h4 id="תסריטי_תוכן_מרובים">תסריטי תוכן מרובים</h4>

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



<pre class="brush: js">// background-script.js

var ports = []

function connected(p) {
  ports[p.sender.tab.id]    = p
  //...
}

browser.runtime.onConnect.addListener(connected)

browser.browserAction.onClicked.addListener(function() {
  ports.forEach(p =&gt; {
        p.postMessage({greeting: "they clicked the button!"})
    })
});
</pre>

<ul>
</ul>

<h2 id="תקשורת_עם_דף_רשת">תקשורת עם דף רשת</h2>

<p>למרות שכברירת מחדל תסריט תוכן אינם מקבלים הרשאת גישה לאובייקטים שנוצרו על ידי תסריטי דף, הם יכולים להתקשר עם תסריטי דף באמצעות ממשקי ה-DOM  <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage</a></code> ו-<code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">window.addEventListener</a></code> .</p>

<p>לדוגמא:</p>

<pre class="brush: js">// page-script.js

var messenger = document.getElementById("from-page-script");

messenger.addEventListener("click", messageContentScript);

function messageContentScript() {
  window.postMessage({
    direction: "from-page-script",
    message: "Message from the page"
  }, "*");</pre>

<pre class="brush: js">// content-script.js

window.addEventListener("message", function(event) {
  if (event.source == window &amp;&amp;
      event.data &amp;&amp;
      event.data.direction == "from-page-script") {
    alert("Content script received message: \"" + event.data.message + "\"");
  }
});</pre>

<p>לדוגמא שלמה עובדת של זה, <a href="https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html">בקרו בדף ההדגמה של- GitHub</a> ובצעו את ההוראות</p>

<div class="warning">
<p>יש לקחת בחשבון שכבל פעם שמתקשרים עם תוכן שאין בו אמון בדרך זו, יש לנקוט זהירות רבה. הרחבות הן קוד בעל פריבילגיות שיכולות להיות לו יכולות בעלות כוח עצום, ודפי תוכן עויינים יכולים לרמות אותם בקלות לדשת ליכולות אלה.</p>

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

<pre class="brush: js">// content-script.js

window.addEventListener("message", function(event) {
  if (event.source == window &amp;&amp;
      event.data.direction &amp;&amp;
      event.data.direction == "from-page-script") {
    eval(event.data.message);
  }
});</pre>

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

<h2 id="שימוש_ב-_eval()_בתסריטי_תוכן">שימוש ב- <code>eval()</code> בתסריטי תוכן</h2>

<p>בכרום, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> תמיד מריץ קוד בהקשר של תסריט התוכן, לא בהקשר של הדף.</p>

<p>בפיירפוקס:</p>

<ul>
 <li>אם נקראת הפונקציה <code>eval()</code>, היא מריצה קוד בהקשר של <strong>תסריט תוכן</strong>.</li>
 <li>אם נקראת הפונקציה <code>window.eval()</code>, היא מריצה קוד בהקשר של ה<strong>דף</strong>.</li>
</ul>

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

<pre class="brush: js">// content-script.js

window.eval('window.x = 1;');
eval('window.y = 2');

console.log(`In content script, window.x: ${window.x}`);
console.log(`In content script, window.y: ${window.y}`);

window.postMessage({
  message: "check"
}, "*");</pre>

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

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

<pre class="brush: js">window.addEventListener("message", function(event) {
  if (event.source === window &amp;&amp; event.data &amp;&amp; event.data.message === "check") {
    console.log(`In page script, window.x: ${window.x}`);
    console.log(`In page script, window.y: ${window.y}`);
  }
});</pre>

<p>בכרום, מופק פלט כזה:</p>

<pre>In content script, window.x: 1
In content script, window.y: 2
In page script, window.x: undefined
In page script, window.y: undefined</pre>

<p>בפיירפוקס מופק הפלט הבא:</p>

<pre>In content script, window.x: undefined
In content script, window.y: 2
In page script, window.x: 1
In page script, window.y: undefined</pre>

<p>אותו הדבר תקף עבור <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>, <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>, ו- <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>.</p>

<div class="blockIndicator warning">
<p>בעת הרצת קוד בהקשר של דף, יש להיזהר מאוד. סביבת הדף נשלטת על ידי דפי רשת בעלי פוטנציאל לזדוניות, דבר היכול להגדיר מחדש אובייקטים איתם את/ה מתקשר/ת להתנהג בדרכים לא צפויות.</p>

<pre class="brush: js">// page.js redefines console.log

var original = console.log;

console.log = function() {
  original(true);
}
</pre>


<pre class="brush: js">// content-script.js calls the redefined version

window.eval('console.log(false)');
</pre>
</div>