path: root/files/it/mozilla/add-ons/webextensions/content_scripts/index.html

---
title: Script  di contenuto
slug: Mozilla/Add-ons/WebExtensions/Content_scripts
tags:
  - WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts
original_slug: Mozilla/Add-ons/WebExtensions/Script_contenuto
---
<div>{{AddonSidebar}}</div>

<p><span class="tlid-translation translation" lang="it"><span title="">Uno </span></span> script di contenuto <span class="tlid-translation translation" lang="it"><span title=""> è una parte dell'estensione che viene eseguita nel contesto di una particolare pagina Web (al contrario degli script di sfondo che fanno parte dell'estensione o degli script che fanno parte del sito stesso, come quelli caricati utilizzando l'elemento</span></span> {{HTMLElement("script")}}).</p>

<p><a href="/en-US/Add-ons/WebExtensions/Background_scripts">Gli script in Background</a> possono accedere a tutte le <a href="/en-US/Add-ons/WebExtensions/API">WebExtension JavaScript APIs</a>, <span class="tlid-translation translation" lang="it"><span title="">ma non possono accedere direttamente al contenuto delle pagine Web.</span> <span title="">Quindi, se la tua estensione ha bisogno di farlo, hai bisogno degli script di contenuto</span></span> <span class="tlid-translation translation" lang="it"><span title="">.</span></span></p>

<p><span class="tlid-translation translation" lang="it"><span title="">Proprio come gli script caricati da normali pagine web, gli script di contenuto possono leggere e modificare il contenuto delle loro pagine usando le API DOM standard.</span></span></p>

<p><span class="tlid-translation translation" lang="it"><span title="">Gli script di contenuto possono accedere solo a un piccolo sottoinsieme delle API di WebExtension, ma possono comunicare con script in background utilizzando un sistema di messaggistica e quindi accedere indirettamente alle API di WebExtension.</span></span></p>

<p><span class="tlid-translation translation" lang="it"><span title="">Gli script di contenuto possono accedere solo a</span></span> <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">un piccolo sottoinsieme delle WebExtension APIs</a>, ma possono <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">comunicare con gli script in background</a> <span class="tlid-translation translation" lang="it"><span title="">utilizzando un sistema di messaggistica e quindi accedere indirettamente alle</span></span> WebExtension APIs.</p>

<div class="note">
<p><span class="tlid-translation translation" lang="it"><span title="">Nota che gli script di contenuto sono bloccati nei seguenti domini:</span></span></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><span class="tlid-translation translation" lang="it"><span title="">Se provi a iniettare uno script di contenuto in una pagina in uno di questi domini, l'operazione fallirà e la pagina registrerà un errore</span></span> <a href="/en-US/docs/Web/HTTP/CSP">CSP</a>.</p>

<p>Poiché queste restrizioni includono addons.mozilla.org, gli utenti possono essere tentati di utilizzare l'estensione immediatamente dopo l'installazione, solo per scoprire che non funziona! È possibile aggiungere un avviso appropriato o una <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/onboarding_upboarding_offboarding_best_practices">pagina di inserimento</a> per spostare gli utenti da addons.mozilla.org.</p>
</div>

<div class="note">
<p><span class="tlid-translation translation" lang="it"><span title="">Valori aggiunti all'ambito globale di uno script di contenuto con</span></span> <code>var foo</code> o <code>window.foo = "bar"</code> potrebbe scomparire a causa di un bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1408996">1408996</a>.</p>
</div>

<h2 id="Caricamento_di_script_di_contenuto">Caricamento di script di contenuto</h2>

<p><span class="tlid-translation translation" lang="it"><span title="">Puoi caricare uno script di contenuto in una pagina web in tre modi:</span></span></p>

<p>Al momento dell'installazione, nelle pagine che corrispondono ai pattern URL: utilizzando la chiave content_scripts in manifest.json, è possibile chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde a un determinato pattern.</p>

<ol>
 <li><strong>Al momento dell'installazione, nelle pagine che corrispondono al pattern URL:</strong> utilizzando il tag <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> nel vostro file manifest.json, è possibile chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">corrisponde ad un determinato pattern</a></li>
 <li><strong>In fase di runtime, nelle pagine che corrispondono a un determinato pattern URL:</strong> utilizzando {{WebExtAPIRef("contentScripts")}} API, <span class="tlid-translation translation" lang="it"><span title="">potete chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL</span></span> <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">corrisponde ad un determinato pattern</a>. Questo è un metodo possibile (1), <span class="tlid-translation translation" lang="it"><span title="">tranne che è possibile aggiungere e rimuovere script di contenuto in fase di esecuzione</span></span>.</li>
 <li><strong>In fase di runtime, in specifiche schede:</strong> utilizzando le <code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/executeScript">tabs.executeScript()</a></code> API, è possibile caricare uno script di contenuto in una scheda specifica ogni volta che si desidera: ad esempio, in risposta all'utente che fa clic su <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">una azione del browser</a>.</li>
</ol>

<p>Esiste un solo ambito globale<em> per frame e per estensione</em>. Ciò significa che le variabili di uno script di contenuto possono essere direttamente accessibili da un altro script di contenuto, indipendentemente dal modo in cui è stato caricato.</p>

<p><span class="tlid-translation translation" lang="it"><span title="">Utilizzando i metodi (1) e (2), è possibile caricare gli script solo in pagine i cui URL possono essere rappresentati utilizzando un</span></span> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">pattern di confronto</a>.</p>

<p><span class="tlid-translation translation" lang="it"><span title="">Usando il metodo (3), puoi anche caricare script in pagine contenute nella tua estensione, ma non puoi caricare script in pagine del browser privilegiate (come "about: debugging" o "about: addons").</span></span></p>

<h2 id="Ambiente_degli_script_di_contenuto"><span class="tlid-translation translation" lang="it"><span title="">Ambiente degli script di contenuto</span></span></h2>

<h3 id="accesso_al_DOM">accesso al DOM</h3>

<p>Gli script di contenuto possono accedere e modificare il DOM della pagina, proprio come possono fare i normali script di pagina. Possono anche vedere eventuali modifiche apportate al DOM tramite script di pagina.</p>

<p>Tuttavia, gli script di contenuto ottengono una "visualizzazione originale del DOM". Questo significa:</p>

<ul>
 <li>Gli script di contenuto non possono vedere le variabili JavaScript definite dagli script di pagina.</li>
 <li>Se uno script di pagina ridefinisce una proprietà DOM incorporata, lo script di contenuto vedrà la versione originale della proprietà, non la versione ridefinita.</li>
</ul>

<p>In Firefox, questo comportamento è chiamato <a href="/en-US/docs/Xray_vision">Xray vision</a>.</p>

<p>Consideriamo una pagina web come questa:</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>Lo script "page-script.js" esegue:</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><span class="tlid-translation translation" lang="it"><span title="">Ora un'estensione inietta uno script di contenuto nella pagina:</span></span></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>Lo stesso vale al contrario: gli script di pagina non possono vedere le proprietà JavaScript aggiunte dagli script di contenuto.</p>

<p>Ciò significa che gli script di contenuto possono contare su proprietà DOM che si comportano in modo prevedibile, senza preoccuparsi delle sue variabili che si scontrano con le variabili dello script di pagina.</p>

<p>Una conseguenza pratica di questo comportamento è che uno script di contenuto non avrà accesso a nessuna libreria JavaScript caricata dalla pagina. Ad esempio, se la pagina include jQuery, lo script di contenuto non sarà in grado di vederlo.</p>

<p>Se uno script di contenuto desidera utilizzare una libreria JavaScript, la stessa libreria deve essere iniettata come script di contenuto insieme allo script di contenuto che vuole utilizzarlo:</p>

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

<div class="blockIndicator note">
<p><strong>Nota:</strong> Firefox <span class="tlid-translation translation" lang="it"><span title="">fornisce alcune API che consentono agli script di contenuto di accedere agli oggetti JavaScript creati dagli script di pagina e di esporre i propri oggetti JavaScript agli script di pagina.</span></span></p>

<p>Vedere <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">Condivisione di oggetti con script di pagina</a> per maggiori dettagli.</p>
</div>

<h3 id="WebExtension_APIs">WebExtension APIs</h3>

<p>Oltre alle API DOM standard, gli script di contenuto possono utilizzare le seguenti API WebExtension:</p>

<p>Da <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>Da <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>Da <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>Da <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>Tutto da <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code>.</p>

<h3 id="XHR_e_Fetch">XHR e Fetch</h3>

<p>Gli script di contenuto posso fare delle normali richieste usando <code><a href="/en-US/docs/Web/API/XMLHttpRequest">window.XMLHttpRequest</a></code> e <code><a href="/en-US/docs/Web/API/Fetch_API">window.fetch()</a></code> APIs.</p>

<p>Gli script di contenuto ottengono gli stessi privilegi per i cross-domain del resto dell'estensione: quindi se l'estensione ha richiesto l'accesso tra cross-domain per un dominio utilizzando il tag <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> nel file manifest.json, i suoi script di contenuto ottengono l'accesso anche a quel dominio.</p>

<p>Ciò si ottiene esponendo le istanze XHR e di recupero più privilegiate nello script di contenuto, che ha l'effetto collaterale di non impostare le intestazioni di <code><a href="/en-US/docs/Web/HTTP/Headers/Origin">Origin</a></code> e <code><a href="/en-US/docs/Web/HTTP/Headers/Referer">Referer</a></code> come una richiesta dalla pagina stessa, spesso è preferibile evitare che la richiesta sveli la sua natura trasversale. Dalla versione 58 in poi le estensioni che devono eseguire richieste che si comportano come se fossero inviate dal contenuto stesso possono utilizzare <code>content.XMLHttpRequest</code> e <code>content.fetch()</code> instead. Per le estensioni cross-browser, la loro presenza deve essere rilevata dalla funzione.</p>

<h2 id="Communicazione_con_gli_script_di_background">Communicazione con gli script di background</h2>

<p>Sebbene gli script di contenuto non possano utilizzare direttamente la maggior parte delle API di WebExtension, possono comunicare con gli script in background dell'estensione utilizzando le API di messaggistica e pertanto possono accedere indirettamente a tutte le API a cui possono accedere gli script in background.</p>

<p>Esistono due schemi di base per la comunicazione tra gli script in background e gli script di contenuto: è possibile inviare messaggi una tantum, con una risposta opzionale, oppure è possibile impostare una connessione più longeva tra i due lati e utilizzare tale connessione per scambiare messaggi .</p>

<h3 id="Messaggi_one-off">Messaggi one-off</h3>

<p><span class="tlid-translation translation" lang="it"><span title="">Per inviare messaggi one-off, con una risposta opzionale, puoi utilizzare le seguenti API:</span></span></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>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Invia un messaggi</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">Ricevi un messaggio</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><span class="tlid-translation translation" lang="it"><span title="">Ad esempio, ecco uno script di contenuto che si pone in ascolto degli eventi click in una pagina web.</span><br>
 <br>
 <span title="">Se il clic era su un collegamento, invia la pagina di sfondo con l'URL di destinazione:</span></span></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><span class="tlid-translation translation" lang="it"><span title="">Lo script in background ascolta questi messaggi e visualizza una notifica utilizzando le</span></span> <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></code> API:</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>(Questo codice di esempio è una riduzione dell'esempio <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> che è possibile trovare su GitHub.)</p>

<h3 id="Messaggi_connection-based">Messaggi connection-based</h3>

<p>L'invio di messaggi one-off può risultare complicato se si scambiano molti messaggi tra uno script in background e uno script di contenuto. Quindi uno schema alternativo è stabilire una connessione più longeva tra i due contesti e usare questa connessione per scambiare messaggi.</p>

<p><span class="tlid-translation translation" lang="it"><span title="">Ogni lato ha un oggetto</span></span> <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code>, <span class="tlid-translation translation" lang="it"><span title="">che può utilizzare per scambiare messaggi</span></span>.</p>

<p>Per creare la connessione:</p>

<ul>
 <li>Un lato attende la connessione usando il metodo <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code></li>
 <li>L'altro lato invoca:
  <ul>
   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/connect">tabs.connect()</a></code> (se si connette con uno script di contenuto); o</li>
   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect">runtime.connect()</a></code> (per connettersi a duno script di background).</li>
  </ul>
 </li>
</ul>

<p>Questo metodo ritorna un oggetto di tipo <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code>.</p>

<ul>
 <li>il listener <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code> riceve un oggetto <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code>.</li>
</ul>

<p>Dopo che tutti e due i lati hanno una porta di comunicazione<span class="tlid-translation translation" lang="it"><span title=""> possono:</span></span></p>

<ul>
 <li>inviare messaggi usando <code>runtime.Port.postMessage()</code>, e</li>
 <li>ricevere messaggi usando <code>runtime.Port.onMessage()</code></li>
</ul>

<p>Ad esempio, appena viene caricato, questo script di contenuto:</p>

<ul>
 <li>Si collega ad uno script di background</li>
 <li>Memorizza la <code>Port</code> in una variabile <code>myPort</code></li>
 <li>Ascolta i messaggi su <code>myPort</code>, e li visualizza nella console di log</li>
 <li>Usa <code>myPort</code> per inviare messaggi allo script di background <span class="tlid-translation translation" lang="it"><span title="">quando l'utente fa clic sul documento</span></span></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>Lo script di sfondo corrispondente:</p>

<ul>
 <li>attende i tentativi di connessione dallo script di contenuto</li>
 <li>quando riceve un tentativo di connessione:
  <ul>
   <li>memorizza la porta in una variabile denominata <code>portFromCS</code></li>
   <li>invia allo script del contenuto un messaggio utilizzando la porta</li>
   <li>  inizia ad ascoltare i messaggi ricevuti sulla porta e li invia al log della console</li>
  </ul>
 </li>
 <li>invia messaggi allo script di contenuto, utilizzando <code>portFromCS</code>, quando l'utente fa clic sull'azione del browser dell'estensione</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="Multipli_script_di_contenuto">Multipli script di contenuto</h4>

<p><span class="tlid-translation translation" lang="it"><span title="">Se si dispone di più script di contenuto che comunicano contemporaneamente, è possibile memorizzare ciascuna connessione in un array.</span></span></p>

<ul>
</ul>

<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="Communicazione_con_la_pagina_web">Communicazione con la pagina web</h2>

<p>Sebbene per impostazione predefinita gli script di contenuto non abbiano accesso agli oggetti creati dagli script di pagina, possono comunicare con gli script di pagina utilizzando la API DOM <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage</a></code> e <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">window.addEventListener</a></code>.</p>

<p>Per esempio:</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>Per un esempio completo e funzionante, <a href="https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html">visitate la pagina demo su GitHub</a> e seguite le istruzioni.</p>

<div class="warning">
<p><span class="tlid-translation translation" lang="it"><span title="">Nota che ogni volta che si interagisce con contenuti web non fidati in questo modo, è necessario fare molta attenzione.</span> <span title="">Le estensioni sono codici privilegiati che possono avere potenti funzionalità e pagine Web ostili possono facilmente ingannarli per accedere a tali funzionalità.</span><br>
 <br>
 <span title="">Per fare un esempio banale, supponiamo che il codice dello script del contenuto che riceve il messaggio faccia qualcosa del genere:</span></span> </p>

<pre class="brush: 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>Ora lo script di pagina può eseguire qualsiasi codice con tutti i privilegi dello script di contenuto.</p>
</div>

<h2 id="Usare_eval()_in_uno_script_di_contenuto">Usare <code>eval()</code> in uno script di contenuto</h2>

<p>In Chrome, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> <span class="tlid-translation translation" lang="it"><span title="">esegue sempre il codice nel contesto dello script del contenuto, non nel contesto della pagina.</span></span></p>

<p>In Firefox:</p>

<ul>
 <li>Se usate <code>eval()</code>, esso esegue il codice nel contesto dello <strong>script di conteneto</strong>.</li>
 <li>Se usate <code>window.eval()</code>, esso esegue il code nel contesto della <strong>pagina</strong>.</li>
</ul>

<p>Per esempio, considerate uno script di contenuto simile a questo:</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>Questo codice crea semplicemente le variabili <code>x</code> e <code>y</code> usando <code>window.eval()</code> and <code>eval()</code>, quindi invia i loro valori al log della console, ed infine invia un messaggio alla pagina.</p>

<p>Alla ricezione del messaggio, lo script della pagina invia le variabili al log della console:</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>In Chrome, si ottine questo risultato:</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>In Firefox, invece, il risultato sarà il seguente:</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>Lo stesso vale per <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>, e <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>.</p>

<div class="blockIndicator warning">
<p><span class="tlid-translation translation" lang="it"><span title="">Quando si esegue il codice nel contesto della pagina, è necessario prestare molta attenzione.</span> <span title="">L'ambiente della pagina è controllato da pagine Web potenzialmente dannose, che possono ridefinire gli oggetti con cui interagire per comportarsi in modi imprevisti:</span></span></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>