From 30feb96f6084a2fb976a24ac01c1f4a054611b62 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:54 +0100 Subject: unslug it: move --- .../webextensions/content_scripts/index.html | 494 +++++++ .../cosa_sono_le_webextensions/index.html | 59 - .../la_tua_prima_webextension/index.html | 153 -- .../webextensions/script_contenuto/index.html | 494 ------- .../what_are_webextensions/index.html | 59 + .../your_first_webextension/index.html | 153 ++ .../firefox/experimental_features/index.html | 1506 ++++++++++++++++++++ .../funzionalit\303\240_sperimentali/index.html" | 1506 -------------------- .../index.html | 34 + files/it/mozilla/firefox/releases/1.5/index.html | 165 +++ files/it/mozilla/firefox/releases/18/index.html | 109 ++ files/it/mozilla/firefox/releases/2/index.html | 117 ++ 12 files changed, 2637 insertions(+), 2212 deletions(-) create mode 100644 files/it/mozilla/add-ons/webextensions/content_scripts/index.html delete mode 100644 files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html delete mode 100644 files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html delete mode 100644 files/it/mozilla/add-ons/webextensions/script_contenuto/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/what_are_webextensions/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html create mode 100644 files/it/mozilla/firefox/experimental_features/index.html delete mode 100644 "files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" create mode 100644 files/it/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html create mode 100644 files/it/mozilla/firefox/releases/1.5/index.html create mode 100644 files/it/mozilla/firefox/releases/18/index.html create mode 100644 files/it/mozilla/firefox/releases/2/index.html (limited to 'files/it/mozilla') diff --git a/files/it/mozilla/add-ons/webextensions/content_scripts/index.html b/files/it/mozilla/add-ons/webextensions/content_scripts/index.html new file mode 100644 index 0000000000..4ee11316c5 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/content_scripts/index.html @@ -0,0 +1,494 @@ +--- +title: Script di contenuto +slug: Mozilla/Add-ons/WebExtensions/Script_contenuto +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts +--- +
{{AddonSidebar}}
+ +

Uno script di contenuto è 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 {{HTMLElement("script")}}).

+ +

Gli script in Background possono accedere a tutte le WebExtension JavaScript APIs, ma non possono accedere direttamente al contenuto delle pagine Web. Quindi, se la tua estensione ha bisogno di farlo, hai bisogno degli script di contenuto .

+ +

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.

+ +

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.

+ +

Gli script di contenuto possono accedere solo a un piccolo sottoinsieme delle WebExtension APIs, ma possono comunicare con gli script in background utilizzando un sistema di messaggistica e quindi accedere indirettamente alle WebExtension APIs.

+ +
+

Nota che gli script di contenuto sono bloccati nei seguenti domini:

+ + + +

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 CSP.

+ +

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 pagina di inserimento per spostare gli utenti da addons.mozilla.org.

+
+ +
+

Valori aggiunti all'ambito globale di uno script di contenuto con var foo o window.foo = "bar" potrebbe scomparire a causa di un bug 1408996.

+
+ +

Caricamento di script di contenuto

+ +

Puoi caricare uno script di contenuto in una pagina web in tre modi:

+ +

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.

+ +
    +
  1. Al momento dell'installazione, nelle pagine che corrispondono al pattern URL: utilizzando il tag content_scripts 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 corrisponde ad un determinato pattern
    2. +
  2. In fase di runtime, nelle pagine che corrispondono a un determinato pattern URL: utilizzando {{WebExtAPIRef("contentScripts")}} API, potete chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde ad un determinato pattern. Questo è un metodo possibile (1), tranne che è possibile aggiungere e rimuovere script di contenuto in fase di esecuzione.
    3. +
  3. In fase di runtime, in specifiche schede: utilizzando le tabs.executeScript() 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 una azione del browser.
    4. +
+ +

Esiste un solo ambito globale per frame e per estensione. 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.

+ +

Utilizzando i metodi (1) e (2), è possibile caricare gli script solo in pagine i cui URL possono essere rappresentati utilizzando un pattern di confronto.

+ +

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").

+ +

Ambiente degli script di contenuto

+ +

accesso al DOM

+ +

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.

+ +

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

+ + + +

In Firefox, questo comportamento è chiamato Xray vision.

+ +

Consideriamo una pagina web come questa:

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

Lo script "page-script.js" esegue:

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

Ora un'estensione inietta uno script di contenuto nella pagina:

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

Lo stesso vale al contrario: gli script di pagina non possono vedere le proprietà JavaScript aggiunte dagli script di contenuto.

+ +

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.

+ +

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.

+ +

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:

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

Nota: Firefox 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.

+ +

Vedere Condivisione di oggetti con script di pagina per maggiori dettagli.

+
+ +

WebExtension APIs

+ +

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

+ +

Da extension:

+ + + +

Da runtime:

+ + + +

Da i18n:

+ + + +

Da menus:

+ + + +

Tutto da storage.

+ +

XHR e Fetch

+ +

Gli script di contenuto posso fare delle normali richieste usando window.XMLHttpRequest e window.fetch() APIs.

+ +

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 permissions nel file manifest.json, i suoi script di contenuto ottengono l'accesso anche a quel dominio.

+ +

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 Origin e Referer 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 content.XMLHttpRequest e content.fetch() instead. Per le estensioni cross-browser, la loro presenza deve essere rilevata dalla funzione.

+ +

Communicazione con gli script di background

+ +

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.

+ +

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 .

+ +

Messaggi one-off

+ +

Per inviare messaggi one-off, con una risposta opzionale, puoi utilizzare le seguenti API:

+ + + + + + + + + + + + + + + + + + + + + +
 In content scriptIn background script
Invia un messaggibrowser.runtime.sendMessage()browser.tabs.sendMessage()
Ricevi un messaggiobrowser.runtime.onMessagebrowser.runtime.onMessage
+ +

Ad esempio, ecco uno script di contenuto che si pone in ascolto degli eventi click in una pagina web.
+
+ Se il clic era su un collegamento, invia la pagina di sfondo con l'URL di destinazione:

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

Lo script in background ascolta questi messaggi e visualizza una notifica utilizzando le notifications API:

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

(Questo codice di esempio è una riduzione dell'esempio notify-link-clicks-i18n che è possibile trovare su GitHub.)

+ +

Messaggi connection-based

+ +

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.

+ +

Ogni lato ha un oggetto runtime.Port, che può utilizzare per scambiare messaggi.

+ +

Per creare la connessione:

+ + + +

Questo metodo ritorna un oggetto di tipo runtime.Port.

+ + + +

Dopo che tutti e due i lati hanno una porta di comunicazione possono:

+ + + +

Ad esempio, appena viene caricato, questo script di contenuto:

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

Lo script di sfondo corrispondente:

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

Multipli script di contenuto

+ +

Se si dispone di più script di contenuto che comunicano contemporaneamente, è possibile memorizzare ciascuna connessione in un array.

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

Communicazione con la pagina web

+ +

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 window.postMessage e window.addEventListener.

+ +

Per esempio:

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

Per un esempio completo e funzionante, visitate la pagina demo su GitHub e seguite le istruzioni.

+ +
+

Nota che ogni volta che si interagisce con contenuti web non fidati in questo modo, è necessario fare molta attenzione. Le estensioni sono codici privilegiati che possono avere potenti funzionalità e pagine Web ostili possono facilmente ingannarli per accedere a tali funzionalità.
+
+ Per fare un esempio banale, supponiamo che il codice dello script del contenuto che riceve il messaggio faccia qualcosa del genere: 

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

Ora lo script di pagina può eseguire qualsiasi codice con tutti i privilegi dello script di contenuto.

+
+ +

Usare eval() in uno script di contenuto

+ +

In Chrome, eval() esegue sempre il codice nel contesto dello script del contenuto, non nel contesto della pagina.

+ +

In Firefox:

+ + + +

Per esempio, considerate uno script di contenuto simile a questo:

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

Questo codice crea semplicemente le variabili x e y usando window.eval() and eval(), quindi invia i loro valori al log della console, ed infine invia un messaggio alla pagina.

+ +

Alla ricezione del messaggio, lo script della pagina invia le variabili al log della console:

+ +

 

+ +
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 Chrome, si ottine questo risultato:

+ +
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 Firefox, invece, il risultato sarà il seguente:

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

Lo stesso vale per setTimeout(), setInterval(), e Function().

+ +
+

Quando si esegue il codice nel contesto della pagina, è necessario prestare molta attenzione. L'ambiente della pagina è controllato da pagine Web potenzialmente dannose, che possono ridefinire gli oggetti con cui interagire per comportarsi in modi imprevisti:

+ +
// 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/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html b/files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html deleted file mode 100644 index c74fbd8473..0000000000 --- a/files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Cosa sono le estensioni? -slug: Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions -tags: - - Estensioni - - WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions ---- -
{{AddonSidebar}}
- -

Un'estensione modifica le funzionalità di un browser. Viene creata utilizzando gli standard della tecnologia web - HTML, CSS, e JavaScript. Può trarre vantaggio dalle stesse web API come JavaScript può in una pagina web, ma un'estensione ha anche accesso ad un proprio set di API JavaScript. Questo significa che puoi fare molto di più in un'estensione di quanto tu ne possa fare con il codice in una pagina. Questi sono soltanto alcuni esempi delle cose che puoi fare:

- -

Migliorare o completare un sito web: Usa un'estensione per inviare nel browser caratteristiche o informazioni aggiuntive dal tuo sito web. Permettere agli utenti di raccogliere informazioni dalle pagine che visitano per migliorare il servizio che offri.

- -

- -

Esempi: Amazon Assistant, OneNote Web Clipper e Grammarly for Firefox

- -

Permettere agli utenti di mostrare la loro personalità: Le estensioni del browser possono manipolare il contenuto delle pagine che l'utente visita. Aiuta gli utenti ad aggiungere un logo o un'immagine preferita come sfondo di tutte le pagine che visitano. Le estensioni ti danno anche la possibilità di aggiornare l'aspetto di Firefox. (Puoi aggiornare l'aspetto di Firefox anche con i temi).

- -

- -

Esempi: MyWeb New Tab, Tabliss e VivaldiFox

- -

Aggiungere o rimuovere contenuti dalle pagine web: Potresti voler aiutare le persone a bloccare le pubblicità intrusive dalle pagine web, fornire l'accesso ad una guida di viaggio ogni volta che un paese o una città vengono menzionati in una pagina web, o ristrutturare il contenuto di una pagina per offrire un'esperienza di lettura coerente. Con la possibilità di poter accedere e aggiornare sia l'HTML che il CSS di una pagina, puoi aiutare gli utenti a fargli vedere il web nel modo in cui lo desiderano.

- -

- -

Esempi: uBlock Origin, Reader e Toolbox for Google Play Store™

- -

Aggiungere strumenti e nuove funzionalità di navigazione: Aggiungi nuove funzionalità ad una taskboard, o generare immagini di codici QR da URL, da collegamenti ipertestuali, o dal testo di una pagina. Con le opzioni flessibili dell'UI e dal potenziale delle WebExtension API, puoi aggiungere facilmente nuove funzionalità ad un browser. Inoltre, puoi aumentare le caratteristiche e le funzionalità di qualsiasi sito web, anche se non è il tuo.

- -

- -

Esempi: QR Code Image Generator, Swimlanes for Trello e Tomato Clock

- -

Giochi: Offri giochi per computer tradizionali, con la possibilità di giocare offline, ma anche esplorare nuove possibilità di gioco, ad esempio, incorporando il gameplay nella navigazione di tutti i giorni.

- -

 

- -

Esempi: Asteroids in Popup, Solitaire Card Game New Tab e 2048 Prime

- -

Aggiungere strumenti di sviluppo: Puoi fornire strumenti di sviluppo web per il tuo lavoro, o hai sviluppato una tecnica utile o un approccio allo sviluppo web che vuoi condividere. In entrambi i casi, puoi migliorare gli strumenti di sviluppo integrati in Firefox aggiungendo una nuova scheda alla barra di strumenti per sviluppatori.

- -

- -

Esempi: Web Developer, Web React Developer Tools e aXe Developer Tools

- -

Le estensioni per Firefox vengono create utilizzando le WebExtension API, un sistema cross-browser per lo sviluppo delle estensioni. In gran parte, l'API è compatibile con l'API delle estensioni supportato da Google Chrome e Opera. Le estensioni scritte per questi browser in molti casi funzioneranno in Firefox o Microsoft Edge soltanto con poche modifiche. L'API è anche completamente compatibile con multiprocess Firefox.

- -

Se hai idee, domande, o hai bisogno di aiuto per migrare un add-on ad una WebExtension, puoi raggiungerci nelladev-addons mailing list o in #extdev su IRC.

- -

E adesso?

- - diff --git a/files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html b/files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html deleted file mode 100644 index fac1b12e36..0000000000 --- a/files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: La tua prima estensione -slug: Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension -tags: - - Guida - - WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension ---- -
{{AddonSidebar}}
- -

In questo articolo creeremo passo dopo passo un'estensione per Firefox, dall'inizio alla fine. L'estensione aggiungerà un bordo rosso a tutte le pagine caricate da "mozilla.org" o da un suo sottodominio.

- -

Il codice sorgente di questo esempio è su GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

- -

Per prima cosa hai bisogno di Firefox versione 45 o superiore.

- -

Scrittura dell'estensione

- -

Crea una cartella e posizionati al suo interno:

- -
mkdir borderify
-cd borderify
- -

manifest.json

- -

Ora, crea un nuovo file chiamato "manifest.json" all'interno della cartella "borderify". Scrivi nel file il seguente contenuto:

- -
{
-
-  "manifest_version": 2,
-  "name": "Borderify",
-  "version": "1.0",
-
-  "description": "Aggiunge un bordo rosso a tutte le pagine caricate da mozilla.org.",
-
-  "icons": {
-    "48": "icons/border-48.png"
-  },
-
-  "content_scripts": [
-    {
-      "matches": ["*://*.mozilla.org/*"],
-      "js": ["borderify.js"]
-    }
-  ]
-
-}
- - - -

La chiave più interessante è content_scripts, dice a Firefox di caricare uno script nelle pagine Web i cui URL corrispondono ad uno schema specifico. In questo caso, chiediamo a Firefox di caricare uno script chiamato "borderify.js" in tutto le pagine HTTP o HTTPS fornite da "mozilla.org" o dai suoi sottodomini.

- - - -
-

In alcune situazioni è necessario specificare un ID per la propria estensione. Se devi specificare l'ID dell'estensione, includi la chiave  applications nel file manifest.json e imposta la sua proprietà gecko.id:

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

icons/border-48.png

- -

L'estensione dovrebbe avere un'icona. Essa verrà mostrata accanto alla lista delle estensioni in Gestione componenti aggiuntivi. Il file manifest.json ha dichiarato di avere un'icona a "icons/border-48.png".

- -

Crea la cartella "icons" all'interno della cartella "borderify". Salva un'icona al suo interno chiamata "border-48.png".  Puoi usare la stessa del nostro esempio, presa dal set di icone di Google Material Design, e usata secondo i termini della licenza Creative Commons Attribution-ShareAlike.

- -

Se scegli di usare la tua icona, dovrebbe essere di 48x48 pixel. Potresti anche fornire un'icona di 96x96 pixel, per i display ad alta risoluzione. Se la aggiungi, dovrà essere specificata con la proprietà 96 dell'oggetto icons nel file manifest.json:

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

In alternativa, potresti fornite un file SVG che verrà ridimensionato correttamente. (Comunque: se utilizzi SVG e la tua icona comprende del testo, puoi utilizzare lo strumento "converti in percorso" dell'editor SVG per appiattire il testo, in modo da poter essere ridimensionato con una dimensione/posizione coerente.)

- - - -

borderify.js

- -

Infine, crea un file chiamato "borderify.js" all'interno della cartella "borderify" e scrivici questo contenuto:

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

Questo script verrà caricato in tutte le pagine che corrispondono allo schema specificato nella chiave content_scripts nel file manifest.json. Lo script ha accesso diretto al documento, proprio come gli script caricati normalmente dalla pagina.

- - - -

Provala

- -

Innanzitutto, controlla di avere i file giusti nei posti giusti:

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

Installazione

- -

Apri "about:debugging" in Firefox, clicca "Carica comp. aggiuntivo temporaneo" e seleziona un qualsiasi file nella cartella dell'estensione:

- -

{{EmbedYouTube("cer9EUKegG4")}}

- -

L'estensione verrà ora installata e rimarrà finché non riavvii Firefox.

- -

In alternativa, puoi eseguire l'estensione da riga di comanto utilizzando lo strumento web-ext.

- -

Prova

- -

Ora prova a visitare una pagina di "mozilla.org", dovresti vedere un bordo rosso intorno alla pagina:

- -

{{EmbedYouTube("rxBQl2Z9IBQ")}}

- -
-

Non provarlo su addons.mozilla.org, però! Gli script di contenuto sono attualmente bloccatu su quel dominio.

-
- -

Prova a sperimentare un po. Modifica lo script per far cambiare il colore del bordo, o fai qualcosaltro al contenuto della pagina. Salva lo script e ricarica i file dell'estensione cliccando il pulsante "Ricarica" in about:debugging. Puoi vedere subito i cambiamenti:

- -

{{EmbedYouTube("NuajE60jfGY")}}

- - - -

Impacchettamento e pubblicazione

- -

Per far utilizzare la tua estensione ad altre persone, devi impacchettarla e inviarla a Mozilla per firmarla. Per saperne di più, guarda "Pubblicazione della tua estensione".

- -

E adesso?

- -

Ora hai un'idea del processo di sviluppo di una WebExtension per firefox, prosegui con:

- - diff --git a/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html b/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html deleted file mode 100644 index 4ee11316c5..0000000000 --- a/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html +++ /dev/null @@ -1,494 +0,0 @@ ---- -title: Script di contenuto -slug: Mozilla/Add-ons/WebExtensions/Script_contenuto -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts ---- -
{{AddonSidebar}}
- -

Uno script di contenuto è 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 {{HTMLElement("script")}}).

- -

Gli script in Background possono accedere a tutte le WebExtension JavaScript APIs, ma non possono accedere direttamente al contenuto delle pagine Web. Quindi, se la tua estensione ha bisogno di farlo, hai bisogno degli script di contenuto .

- -

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.

- -

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.

- -

Gli script di contenuto possono accedere solo a un piccolo sottoinsieme delle WebExtension APIs, ma possono comunicare con gli script in background utilizzando un sistema di messaggistica e quindi accedere indirettamente alle WebExtension APIs.

- -
-

Nota che gli script di contenuto sono bloccati nei seguenti domini:

- - - -

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 CSP.

- -

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 pagina di inserimento per spostare gli utenti da addons.mozilla.org.

-
- -
-

Valori aggiunti all'ambito globale di uno script di contenuto con var foo o window.foo = "bar" potrebbe scomparire a causa di un bug 1408996.

-
- -

Caricamento di script di contenuto

- -

Puoi caricare uno script di contenuto in una pagina web in tre modi:

- -

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.

- -
    -
  1. Al momento dell'installazione, nelle pagine che corrispondono al pattern URL: utilizzando il tag content_scripts 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 corrisponde ad un determinato pattern
    2. -
  2. In fase di runtime, nelle pagine che corrispondono a un determinato pattern URL: utilizzando {{WebExtAPIRef("contentScripts")}} API, potete chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde ad un determinato pattern. Questo è un metodo possibile (1), tranne che è possibile aggiungere e rimuovere script di contenuto in fase di esecuzione.
    3. -
  3. In fase di runtime, in specifiche schede: utilizzando le tabs.executeScript() 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 una azione del browser.
    4. -
- -

Esiste un solo ambito globale per frame e per estensione. 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.

- -

Utilizzando i metodi (1) e (2), è possibile caricare gli script solo in pagine i cui URL possono essere rappresentati utilizzando un pattern di confronto.

- -

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").

- -

Ambiente degli script di contenuto

- -

accesso al DOM

- -

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.

- -

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

- - - -

In Firefox, questo comportamento è chiamato Xray vision.

- -

Consideriamo una pagina web come questa:

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

Lo script "page-script.js" esegue:

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

Ora un'estensione inietta uno script di contenuto nella pagina:

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

Lo stesso vale al contrario: gli script di pagina non possono vedere le proprietà JavaScript aggiunte dagli script di contenuto.

- -

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.

- -

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.

- -

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:

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

Nota: Firefox 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.

- -

Vedere Condivisione di oggetti con script di pagina per maggiori dettagli.

-
- -

WebExtension APIs

- -

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

- -

Da extension:

- - - -

Da runtime:

- - - -

Da i18n:

- - - -

Da menus:

- - - -

Tutto da storage.

- -

XHR e Fetch

- -

Gli script di contenuto posso fare delle normali richieste usando window.XMLHttpRequest e window.fetch() APIs.

- -

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 permissions nel file manifest.json, i suoi script di contenuto ottengono l'accesso anche a quel dominio.

- -

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 Origin e Referer 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 content.XMLHttpRequest e content.fetch() instead. Per le estensioni cross-browser, la loro presenza deve essere rilevata dalla funzione.

- -

Communicazione con gli script di background

- -

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.

- -

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 .

- -

Messaggi one-off

- -

Per inviare messaggi one-off, con una risposta opzionale, puoi utilizzare le seguenti API:

- - - - - - - - - - - - - - - - - - - - - -
 In content scriptIn background script
Invia un messaggibrowser.runtime.sendMessage()browser.tabs.sendMessage()
Ricevi un messaggiobrowser.runtime.onMessagebrowser.runtime.onMessage
- -

Ad esempio, ecco uno script di contenuto che si pone in ascolto degli eventi click in una pagina web.
-
- Se il clic era su un collegamento, invia la pagina di sfondo con l'URL di destinazione:

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

Lo script in background ascolta questi messaggi e visualizza una notifica utilizzando le notifications API:

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

(Questo codice di esempio è una riduzione dell'esempio notify-link-clicks-i18n che è possibile trovare su GitHub.)

- -

Messaggi connection-based

- -

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.

- -

Ogni lato ha un oggetto runtime.Port, che può utilizzare per scambiare messaggi.

- -

Per creare la connessione:

- - - -

Questo metodo ritorna un oggetto di tipo runtime.Port.

- - - -

Dopo che tutti e due i lati hanno una porta di comunicazione possono:

- - - -

Ad esempio, appena viene caricato, questo script di contenuto:

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

Lo script di sfondo corrispondente:

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

Multipli script di contenuto

- -

Se si dispone di più script di contenuto che comunicano contemporaneamente, è possibile memorizzare ciascuna connessione in un array.

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

Communicazione con la pagina web

- -

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 window.postMessage e window.addEventListener.

- -

Per esempio:

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

Per un esempio completo e funzionante, visitate la pagina demo su GitHub e seguite le istruzioni.

- -
-

Nota che ogni volta che si interagisce con contenuti web non fidati in questo modo, è necessario fare molta attenzione. Le estensioni sono codici privilegiati che possono avere potenti funzionalità e pagine Web ostili possono facilmente ingannarli per accedere a tali funzionalità.
-
- Per fare un esempio banale, supponiamo che il codice dello script del contenuto che riceve il messaggio faccia qualcosa del genere: 

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

Ora lo script di pagina può eseguire qualsiasi codice con tutti i privilegi dello script di contenuto.

-
- -

Usare eval() in uno script di contenuto

- -

In Chrome, eval() esegue sempre il codice nel contesto dello script del contenuto, non nel contesto della pagina.

- -

In Firefox:

- - - -

Per esempio, considerate uno script di contenuto simile a questo:

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

Questo codice crea semplicemente le variabili x e y usando window.eval() and eval(), quindi invia i loro valori al log della console, ed infine invia un messaggio alla pagina.

- -

Alla ricezione del messaggio, lo script della pagina invia le variabili al log della console:

- -

 

- -
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 Chrome, si ottine questo risultato:

- -
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 Firefox, invece, il risultato sarà il seguente:

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

Lo stesso vale per setTimeout(), setInterval(), e Function().

- -
-

Quando si esegue il codice nel contesto della pagina, è necessario prestare molta attenzione. L'ambiente della pagina è controllato da pagine Web potenzialmente dannose, che possono ridefinire gli oggetti con cui interagire per comportarsi in modi imprevisti:

- -
// 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/it/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/it/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..c74fbd8473 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,59 @@ +--- +title: Cosa sono le estensioni? +slug: Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions +tags: + - Estensioni + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

Un'estensione modifica le funzionalità di un browser. Viene creata utilizzando gli standard della tecnologia web - HTML, CSS, e JavaScript. Può trarre vantaggio dalle stesse web API come JavaScript può in una pagina web, ma un'estensione ha anche accesso ad un proprio set di API JavaScript. Questo significa che puoi fare molto di più in un'estensione di quanto tu ne possa fare con il codice in una pagina. Questi sono soltanto alcuni esempi delle cose che puoi fare:

+ +

Migliorare o completare un sito web: Usa un'estensione per inviare nel browser caratteristiche o informazioni aggiuntive dal tuo sito web. Permettere agli utenti di raccogliere informazioni dalle pagine che visitano per migliorare il servizio che offri.

+ +

+ +

Esempi: Amazon Assistant, OneNote Web Clipper e Grammarly for Firefox

+ +

Permettere agli utenti di mostrare la loro personalità: Le estensioni del browser possono manipolare il contenuto delle pagine che l'utente visita. Aiuta gli utenti ad aggiungere un logo o un'immagine preferita come sfondo di tutte le pagine che visitano. Le estensioni ti danno anche la possibilità di aggiornare l'aspetto di Firefox. (Puoi aggiornare l'aspetto di Firefox anche con i temi).

+ +

+ +

Esempi: MyWeb New Tab, Tabliss e VivaldiFox

+ +

Aggiungere o rimuovere contenuti dalle pagine web: Potresti voler aiutare le persone a bloccare le pubblicità intrusive dalle pagine web, fornire l'accesso ad una guida di viaggio ogni volta che un paese o una città vengono menzionati in una pagina web, o ristrutturare il contenuto di una pagina per offrire un'esperienza di lettura coerente. Con la possibilità di poter accedere e aggiornare sia l'HTML che il CSS di una pagina, puoi aiutare gli utenti a fargli vedere il web nel modo in cui lo desiderano.

+ +

+ +

Esempi: uBlock Origin, Reader e Toolbox for Google Play Store™

+ +

Aggiungere strumenti e nuove funzionalità di navigazione: Aggiungi nuove funzionalità ad una taskboard, o generare immagini di codici QR da URL, da collegamenti ipertestuali, o dal testo di una pagina. Con le opzioni flessibili dell'UI e dal potenziale delle WebExtension API, puoi aggiungere facilmente nuove funzionalità ad un browser. Inoltre, puoi aumentare le caratteristiche e le funzionalità di qualsiasi sito web, anche se non è il tuo.

+ +

+ +

Esempi: QR Code Image Generator, Swimlanes for Trello e Tomato Clock

+ +

Giochi: Offri giochi per computer tradizionali, con la possibilità di giocare offline, ma anche esplorare nuove possibilità di gioco, ad esempio, incorporando il gameplay nella navigazione di tutti i giorni.

+ +

 

+ +

Esempi: Asteroids in Popup, Solitaire Card Game New Tab e 2048 Prime

+ +

Aggiungere strumenti di sviluppo: Puoi fornire strumenti di sviluppo web per il tuo lavoro, o hai sviluppato una tecnica utile o un approccio allo sviluppo web che vuoi condividere. In entrambi i casi, puoi migliorare gli strumenti di sviluppo integrati in Firefox aggiungendo una nuova scheda alla barra di strumenti per sviluppatori.

+ +

+ +

Esempi: Web Developer, Web React Developer Tools e aXe Developer Tools

+ +

Le estensioni per Firefox vengono create utilizzando le WebExtension API, un sistema cross-browser per lo sviluppo delle estensioni. In gran parte, l'API è compatibile con l'API delle estensioni supportato da Google Chrome e Opera. Le estensioni scritte per questi browser in molti casi funzioneranno in Firefox o Microsoft Edge soltanto con poche modifiche. L'API è anche completamente compatibile con multiprocess Firefox.

+ +

Se hai idee, domande, o hai bisogno di aiuto per migrare un add-on ad una WebExtension, puoi raggiungerci nelladev-addons mailing list o in #extdev su IRC.

+ +

E adesso?

+ + diff --git a/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..fac1b12e36 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,153 @@ +--- +title: La tua prima estensione +slug: Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension +tags: + - Guida + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +

In questo articolo creeremo passo dopo passo un'estensione per Firefox, dall'inizio alla fine. L'estensione aggiungerà un bordo rosso a tutte le pagine caricate da "mozilla.org" o da un suo sottodominio.

+ +

Il codice sorgente di questo esempio è su GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

Per prima cosa hai bisogno di Firefox versione 45 o superiore.

+ +

Scrittura dell'estensione

+ +

Crea una cartella e posizionati al suo interno:

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

Ora, crea un nuovo file chiamato "manifest.json" all'interno della cartella "borderify". Scrivi nel file il seguente contenuto:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Aggiunge un bordo rosso a tutte le pagine caricate da mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

La chiave più interessante è content_scripts, dice a Firefox di caricare uno script nelle pagine Web i cui URL corrispondono ad uno schema specifico. In questo caso, chiediamo a Firefox di caricare uno script chiamato "borderify.js" in tutto le pagine HTTP o HTTPS fornite da "mozilla.org" o dai suoi sottodomini.

+ + + +
+

In alcune situazioni è necessario specificare un ID per la propria estensione. Se devi specificare l'ID dell'estensione, includi la chiave  applications nel file manifest.json e imposta la sua proprietà gecko.id:

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

icons/border-48.png

+ +

L'estensione dovrebbe avere un'icona. Essa verrà mostrata accanto alla lista delle estensioni in Gestione componenti aggiuntivi. Il file manifest.json ha dichiarato di avere un'icona a "icons/border-48.png".

+ +

Crea la cartella "icons" all'interno della cartella "borderify". Salva un'icona al suo interno chiamata "border-48.png".  Puoi usare la stessa del nostro esempio, presa dal set di icone di Google Material Design, e usata secondo i termini della licenza Creative Commons Attribution-ShareAlike.

+ +

Se scegli di usare la tua icona, dovrebbe essere di 48x48 pixel. Potresti anche fornire un'icona di 96x96 pixel, per i display ad alta risoluzione. Se la aggiungi, dovrà essere specificata con la proprietà 96 dell'oggetto icons nel file manifest.json:

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

In alternativa, potresti fornite un file SVG che verrà ridimensionato correttamente. (Comunque: se utilizzi SVG e la tua icona comprende del testo, puoi utilizzare lo strumento "converti in percorso" dell'editor SVG per appiattire il testo, in modo da poter essere ridimensionato con una dimensione/posizione coerente.)

+ + + +

borderify.js

+ +

Infine, crea un file chiamato "borderify.js" all'interno della cartella "borderify" e scrivici questo contenuto:

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

Questo script verrà caricato in tutte le pagine che corrispondono allo schema specificato nella chiave content_scripts nel file manifest.json. Lo script ha accesso diretto al documento, proprio come gli script caricati normalmente dalla pagina.

+ + + +

Provala

+ +

Innanzitutto, controlla di avere i file giusti nei posti giusti:

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

Installazione

+ +

Apri "about:debugging" in Firefox, clicca "Carica comp. aggiuntivo temporaneo" e seleziona un qualsiasi file nella cartella dell'estensione:

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

L'estensione verrà ora installata e rimarrà finché non riavvii Firefox.

+ +

In alternativa, puoi eseguire l'estensione da riga di comanto utilizzando lo strumento web-ext.

+ +

Prova

+ +

Ora prova a visitare una pagina di "mozilla.org", dovresti vedere un bordo rosso intorno alla pagina:

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

Non provarlo su addons.mozilla.org, però! Gli script di contenuto sono attualmente bloccatu su quel dominio.

+
+ +

Prova a sperimentare un po. Modifica lo script per far cambiare il colore del bordo, o fai qualcosaltro al contenuto della pagina. Salva lo script e ricarica i file dell'estensione cliccando il pulsante "Ricarica" in about:debugging. Puoi vedere subito i cambiamenti:

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Impacchettamento e pubblicazione

+ +

Per far utilizzare la tua estensione ad altre persone, devi impacchettarla e inviarla a Mozilla per firmarla. Per saperne di più, guarda "Pubblicazione della tua estensione".

+ +

E adesso?

+ +

Ora hai un'idea del processo di sviluppo di una WebExtension per firefox, prosegui con:

+ + diff --git a/files/it/mozilla/firefox/experimental_features/index.html b/files/it/mozilla/firefox/experimental_features/index.html new file mode 100644 index 0000000000..2cc528ad36 --- /dev/null +++ b/files/it/mozilla/firefox/experimental_features/index.html @@ -0,0 +1,1506 @@ +--- +title: Funzionalità sperimentali in Firefox +slug: Mozilla/Firefox/Funzionalità_sperimentali +translation_of: Mozilla/Firefox/Experimental_features +--- +
{{FirefoxSidebar}}
+ +

In order to test new features, Mozilla publishes a test version of the Firefox browser, Firefox Nightly, every day. These nightly builds of Firefox typically include experimental or partially-implemented features, including those for proposed or cutting-edge Web platform standards.

+ +

This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary. You can test your Web sites and applications before these features get released and ensure everything will still work with the latest Web technology capabilities.

+ +

To test these experimental features, you need to download Firefox Nightly or Firefox Developer Edition. Which you need is described alongside each feature's description below.

+ +
+

Editor's note: When adding features to these tables, please try to include a link to the relevant bug or bugs using the {{TemplateLink("bug")}} macro: \{{bug(bug-number)}}.

+
+ +

HTML

+ +

Element: <dialog>

+ +

The HTML {{HTMLElement("dialog")}} element and its associated DOM APIs provide support for HTML-based modal dialog boxes. The current implementation is a little inelegant but is basically functional. See {{bug(840640)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly53No
Developer Edition53No
Beta53No
Release53No
Preference namedom.dialog_element.enabled
+ +

Global attribute: inputmode

+ +

Our implementation of the inputmode global attribute has been updated as per the WHATWG spec ({{bug(1509527)}}), but we still need to make other changes too, like making it available on contenteditable content. See also {{bug(1205133)}} for details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly75Yes
Developer Edition75No
Beta75No
Release75No
Preference namedom.forms.inputmode
+ + + +

The {{HTMLElement("link")}} element's {{htmlattrxref("rel", "link")}} attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering. Read Preloading content with rel="preload" for more details. For more details on the status of this feature, see {{bug(1639607)}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly78Yes
Developer Edition78Yes
Beta78Yes
Release78No
Preference namenetwork.preload
+ +

CSS

+ +

Display stray control characters in CSS as hex boxes

+ +

This feature renders control characters (Unicode category Cc) other than tab (U+0009), line feed (U+000A), form feed (U+000C), and carriage return (U+000D) as a hexbox when they are not expected.
+
+ See {{bug(1099557)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly43Yes
Developer Edition43No
Beta43No
Release43No
Preference namelayout.css.control-characters.enabled or layout.css.control-characters.visible
+ +

Property: initial-letter

+ +

The {{cssxref("initial-letter")}} CSS property is part of the {{SpecName("CSS3 Inline")}} specification and allows you to specify how dropped, raised, and sunken initial letters are displayed.
+
+ See {{bug(1223880)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly50No
Developer Edition50No
Beta50No
Release50No
Preference namelayout.css.initial-letter.enabled
+ +

Conic gradients

+ +

Conic gradients expand CSS gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it. See {{bug(1175958)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namelayout.css.conic-gradient.enabled and gfx.webrender.all
+ +

Pseudo-class: :focus-visible

+ +

Allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g. when tabbing between elements), and not when they are focused using a mouse or other pointing device. See bug 1617600 for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namelayout.css.focus-visible.enabled
+ +

Single numbers as aspect ratio in media queries

+ +

Support for using a single {{cssxref("number")}} as a {{cssxref("ratio")}} when specifying the aspect ratio for a media query. See {{bug(1565562)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly70No
Developer Edition70No
Beta70No
Release70No
Preference namelayout.css.aspect-ratio-number.enabled
+ +

Property: backdrop-filter

+ +

The {{cssxref("backdrop-filter")}} property applies filter effects to the area behind an element. See {{bug(1178765)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly70No
Developer Edition70No
Beta70No
Release70No
Preference namelayout.css.backdrop-filter.enabled
+ +

Grid: Masonry layout

+ +

Adds support for a masonry style layout based on grid layout where one axis has a masonry layout while having normal grid layout on the other. This allows to create gallery style layouts like on Pinterest. See {{bug(1607954)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly77No
Developer Edition77No
Beta77No
Release77No
Preference namelayout.css.grid-template-masonry-value.enabled
+ +

APIs

+ +

Graphics: Canvas, WebGL, and WebGPU

+ +

Interface: OffscreenCanvas

+ +

The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered offscreen. It is available in both the window and worker contexts. See {{bug(1390089)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly44No
Developer Edition44No
Beta44No
Release44No
Preference namegfx.offscreencanvas.enabled
+ +

Hit regions

+ +

Whether the mouse coordinates are within a particular area on the canvas is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly30No
Developer Edition30No
Beta30No
Release30No
Preference namecanvas.hitregions.enabled
+ +

WebGL: Draft extensions

+ +

When this preference is enabled, any WebGL extensions currently in "draft" status which are being tested are enabled for use. Currently, there are no WebGL extensions being tested by Firefox.

+ +

WebGPU API

+ +

This new API provides low-level support for performing computation and graphics rendering using the {{interwiki("wikipedia", "Graphics Processing Unit")}} (GPU) of the user's device or computer. The specification is still a work-in-progress. See {{bug(1602129)}} for our progress on this API.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly73No
Developer Edition73No
Beta73No
Release73No
Preference namedom.webgpu.enabled
+ +

HTML DOM API

+ +

Global event: beforeinput

+ +

The global {{domxref("HTMLElement.beforeinput_event", "beforeinput")}} event is sent to an {{HTMLElement("input")}} element—or any element whose {{htmlattrxref("contenteditable")}} attribute is enabled—immediately before the element's value changes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly74No
Developer Edition74No
Beta74No
Release74No
Preference namedom.input_events.beforeinput.enabled
+ +

HTMLMediaElement method: setInkId()

+ +

{{domxref("HTMLMediaElement.setSinkId()")}} allows you to set the sink ID of an audio output device on an {{domxref("HTMLMediaElement")}}, thereby changing where the audio is being output. See {{bug(934425)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly64No
Developer Edition64No
Beta64No
Release64No
Preference namemedia.setsinkid.enabled
+ +

HTMLMediaElement properties: audioTracks and videoTracks

+ +

Enabling this feature adds the {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElement.videoTracks")}} properties to all HTML media elements. However, because Firefox doesn't currently suport multiple audio and video tracks, the most common use cases for these properties don't work, so they're both disabled by default. See {{bug(1057233)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly33No
Developer Edition33No
Beta33No
Release33No
Preference namemedia.track.enabled
+ +

DOM

+ +

Document property: autoplayPolicy

+ +

The {{domxref("document")}} property {{domxref("Document.autoplayPolicy", "autoplayPolicy")}} returns a string indicating how the browser handles requests to automatically play media (either using the {{domxref("HTMLMediaElement.autoplay", "autoplay")}} property on a media element or by attempting to trigger playback from JavaScript code. The spec for this API is still being written. The value changes over time depending on what the user is doing, their preferences, and the state of the browser in general. Potential values include allowed (autoplay is currently permitted), allowed-muted (autoplay is allowed but only with no—or muted—audio), and disallowed (autoplay is not allowed at this time). See {{bug(1506289)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly66No
Developer Edition66No
Beta66No
Release66No
Preference namedom.media.autoplay.autoplay-policy-api
+ +

GeometryUtils methods: convertPointFromNode(), convertRectFromNode(), and convertQuadFromNode()

+ +

The {{domxref("GeometryUtils")}} methods {{domxref("GeometryUtils.convertPointFromNode", "convertPointFromNode()")}}, {{domxref("GeometryUtils.convertRectFromNode", "convertRectFromNode()")}}, and {{domxref("GeometryUtils.convertQuadFromNode", "convertQuadFromNode()")}} map the given point, rectangle, or quadruple from the {{domxref("Node")}} on which they're called to another node. See {{bug(918189)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly31Yes
Developer Edition31No
Beta31No
Release31No
Preference namelayout.css.getBoxQuads.enabled
+ +

GeometryUtils method: getBoxQuads()

+ +

The {{domxref("GeometryUtils")}} method {{domxref("GeometryUtils.getBoxQuads", "getBoxQuads()")}} returns the CSS boxes for a {{domxref("Node")}} relative to any other node or viewport. See {{bug(917755)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly31Yes
Developer Edition31No
Beta31No
Release31No
Preference namelayout.css.convertFromNode.enable
+ +

Payment Request API

+ +

Primary payment handling

+ +

The Payment Request API provides support for handling web-based payments within web content or apps. Due to a bug that came up during testing of the user interface, we have decided to postpone shipping this API while discussions over potential changes to the API are held. Work is ongoing. See {{bug(1318984)}} for more details on the state of this API.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly55No
Developer Edition55No
Beta55No
Release55No
Preference namedom.payments.request.enabled and
+ dom.payments.request.supportedRegions
+ +

Basic Card API

+ +

Extends the Payment Request API with dictionaries that define data structures describing card payment types and payment responses. See {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly56No
Developer Edition56No
Beta56No
Release56No
Preference namedom.payments.request.enabled and
+ dom.payments.request.supportedRegions
+ +

Visual Viewport API

+ +

The Visual Viewport API provides access to information describing the position of the {{Glossary("visual viewport")}} relative to the document as well as to the window's content area. It also supports events to monitor changes to this information. See {{bug(1550390)}} for more details. There currently is no real plan to ship this on desktop, but you can track the state of that just in case it changes in {{bug(1551302)}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly63No
Developer Edition63No
Beta63No
Release63Starting in Firefox 68, on Android only
Preference namedom.visualviewport.enabled
+ +

Constructable stylesheets

+ +

The addition of a constructor to the {{domxref("CSSStyleSheet")}} interface as well as a variety of related changes makes it possible to directly create new stylesheets without having to add the sheet to the HTML. This makes it much easier to create reusable stylesheets for use with Shadow DOM. Our implementation is not yet complete; see {{bug(1520690)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly73No
Developer Edition73No
Beta73No
Release73No
Preference namelayout.css.constructable-stylesheets.enabled
+ +

WebRTC and media

+ +

The following experimental features include those found in the WebRTC API, the Web Audio API, the Media Session API, the Media Source Extensions API, the Encrypted Media Extensions API, and the Media Capture and Streams API.

+ +

Media Session API

+ +

The entire Firefox implementation of the Media Session API is currently experimental. This API is used to customize the handling of media-related notifications, to manage events and data useful for presenting a user interface for managing media playback, and to obtain media file metadata. See {{bug(1112032)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly71Yes
Developer Edition71No
Beta71No
Release71No
Preference namedom.media.mediasession.enabled
+ +

Asynchronous SourceBuffer add and remove

+ +

This adds the promise-based methods {{domxref("SourceBuffer.appendBufferAsync", "appendBufferAsync()")}} and {{domxref("SourceBuffer.removeAsync", "removeAsync()")}} for adding and removing media source buffers to the {{domxref("SourceBuffer")}} interface. See {{bug(1280613)}} and {{bug(778617)}} for more information.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly62No
Developer Edition62No
Beta62No
Release62No
Preference namemedia.mediasource.experimental.enabled
+ +

AVIF (AV1 Image File format) support

+ +

With this feature enabled, Firefox supports the AV1 Image File (AVIF) format. This is a still image file format that leverages the capabilities of the AV1 video compression algorithms to reduce image size. See {{bug(1443863)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly77No
Developer Edition77No
Beta77No
Release77No
Preference nameimage.avif.enabled
+ +

Security and privacy

+ +

Block plain text requests from Flash on encrypted pages

+ +

In order to help mitigate man-in-the-middle (MitM) attacks caused by Flash content on encrypted pages, a preference has been added to treat OBJECT_SUBREQUESTs as active content. See {{bug(1190623)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly59No
Developer Edition59No
Beta59No
Release59No
Preference namesecurity.mixed_content.block_object_subrequest
+ +

Insecure page labeling

+ +

These two preferences add a "Not secure" text label in the address bar next to the traditional lock icon when a page is loaded insecurely (that is, using {{Glossary("HTTP")}} rather than {{Glossary("HTTPS")}}). See {{bug(1335970)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly60No
Developer Edition60No
Beta60No
Release60No
Preference namesecurity.insecure_connection_text.enabled for normal browsing mode; security.insecure_connection_text.pbmode.enabled for private browsing mode
+ +

Upgrading mixed display content

+ +

When enabled, this preference causes Firefox to automatically upgrade requests for media content from HTTP to HTTPS on secure pages. The intent is to prevent mixed-content conditions in which some content is loaded securely while other content is insecure. If the upgrade fails (because the media's host doesn't support HTTPS), the media is not loaded. See {{bug(1435733)}} for more details.

+ +

This also changes the console warning; if the upgrade succeeds, the message indicates that the request was upgraded, instead of showing a warning.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly60No
Developer Edition60No
Beta60No
Release60No
Preference namesecurity.mixed_content.upgrade_display_content
+ + + +

Following Safari's lead, this experiment causes setting the {{htmlattrxref("target", "a")}} attribute on an {{HTMLElement("a")}} element to _blank (that is, using target="_blank") to imply that the default value of {{htmlattrxref("rel", "a")}} is noopener rather than opener, which is the usual default. To bypass this security measure, web developers should explicitly request an opener relationship using rel="opener" on their <a> elements that use target="_blank" to open the link into a new window or tab. See {{bug(1503681)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly65Yes
Developer Edition65Yes
Beta65Yes
Release65No
Preference namedom.targetBlankNoOpener.enabled
+ +

FTP support disabled

+ +

For security reasons, Mozilla intends to remove support for {{Glossary("FTP")}} from Firefox in 2010, effective in Firefox 82. See {{bug(1622409)}} for implementation progress. The network.ftp.enabled preference must be enabled (set to true) to allow FTP to be used.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly77Yes
Developer Edition77No
Beta77No
Release77No
Preference namenetwork.ftp.enabled
+ +

Developer tools

+ +

Mozilla's developer tools are constantly evolving. We experiment with new ideas, add new features, and test them on the Nightly and Developer Edition channels before letting them go through to beta and release. The features below are the current crop of experimental developer tool features.

+ +

Color scheme simulation

+ +

Adds an option to simulate different color schemes allowing to test {{cssxref("@media/prefers-color-scheme", "@prefers-color-scheme")}} media queries. Using this media query lets your style sheet specify whether it prefers a light or dark user interface. This feature lets you test your code without having to change settings in your browser (or operating system, if the browser follows a system-wide color scheme setting).

+ +

See {{bug(1550804)}} and {{bug(1137699)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly72No
Developer Edition72No
Beta72No
Release72No
Preference namedevtools.inspector.color-scheme-simulation.enabled
+ +

Execution context selector

+ +

This feature displays a button on the console's command line that lets you change the context in which the expression you enter will be executed. See {{bug(1605154)}} and {{bug(1605153)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namedevtools.webconsole.input.context
+ +

Mobile gesture support in Responsive Design Mode

+ +

Mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu. See {{bug(1621781)}}, {{bug(1245183)}}, and {{bug(1401304)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly76[1]Yes
Developer Edition76[1]Yes
Beta76[1]Yes
Release76[1]No
Preference namen/a
+ +

[1] Support for zooming using the double-tap gesture was added in Firefox 76. The other gestures were added for Firefox 79.

+ +

Compatibility panel

+ +

A side panel for the Page Inspector that shows you information detailing your app's cross-browser compatibility status. See {{bug(1584464)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly71Yes
Developer Edition71Yes
Beta71No
Release71No
Preference namedevtools.inspector.compatibility.enabled
+ +

UI

+ +

Desktop zooming

+ +

This feature lets you enable smooth pinch zooming on desktop computers without requiring layout reflows, just like mobile devices do. See {{bug(1245183)}} for further details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly42No
Developer Edition42No
Beta42No
Release42No
Preference nameapz.allow_zooming and (on Windows) apz.windows.use_direct_manipulation
+ +

See also

+ + diff --git "a/files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" "b/files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" deleted file mode 100644 index 2cc528ad36..0000000000 --- "a/files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" +++ /dev/null @@ -1,1506 +0,0 @@ ---- -title: Funzionalità sperimentali in Firefox -slug: Mozilla/Firefox/Funzionalità_sperimentali -translation_of: Mozilla/Firefox/Experimental_features ---- -
{{FirefoxSidebar}}
- -

In order to test new features, Mozilla publishes a test version of the Firefox browser, Firefox Nightly, every day. These nightly builds of Firefox typically include experimental or partially-implemented features, including those for proposed or cutting-edge Web platform standards.

- -

This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary. You can test your Web sites and applications before these features get released and ensure everything will still work with the latest Web technology capabilities.

- -

To test these experimental features, you need to download Firefox Nightly or Firefox Developer Edition. Which you need is described alongside each feature's description below.

- -
-

Editor's note: When adding features to these tables, please try to include a link to the relevant bug or bugs using the {{TemplateLink("bug")}} macro: \{{bug(bug-number)}}.

-
- -

HTML

- -

Element: <dialog>

- -

The HTML {{HTMLElement("dialog")}} element and its associated DOM APIs provide support for HTML-based modal dialog boxes. The current implementation is a little inelegant but is basically functional. See {{bug(840640)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly53No
Developer Edition53No
Beta53No
Release53No
Preference namedom.dialog_element.enabled
- -

Global attribute: inputmode

- -

Our implementation of the inputmode global attribute has been updated as per the WHATWG spec ({{bug(1509527)}}), but we still need to make other changes too, like making it available on contenteditable content. See also {{bug(1205133)}} for details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly75Yes
Developer Edition75No
Beta75No
Release75No
Preference namedom.forms.inputmode
- - - -

The {{HTMLElement("link")}} element's {{htmlattrxref("rel", "link")}} attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering. Read Preloading content with rel="preload" for more details. For more details on the status of this feature, see {{bug(1639607)}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly78Yes
Developer Edition78Yes
Beta78Yes
Release78No
Preference namenetwork.preload
- -

CSS

- -

Display stray control characters in CSS as hex boxes

- -

This feature renders control characters (Unicode category Cc) other than tab (U+0009), line feed (U+000A), form feed (U+000C), and carriage return (U+000D) as a hexbox when they are not expected.
-
- See {{bug(1099557)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly43Yes
Developer Edition43No
Beta43No
Release43No
Preference namelayout.css.control-characters.enabled or layout.css.control-characters.visible
- -

Property: initial-letter

- -

The {{cssxref("initial-letter")}} CSS property is part of the {{SpecName("CSS3 Inline")}} specification and allows you to specify how dropped, raised, and sunken initial letters are displayed.
-
- See {{bug(1223880)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly50No
Developer Edition50No
Beta50No
Release50No
Preference namelayout.css.initial-letter.enabled
- -

Conic gradients

- -

Conic gradients expand CSS gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it. See {{bug(1175958)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namelayout.css.conic-gradient.enabled and gfx.webrender.all
- -

Pseudo-class: :focus-visible

- -

Allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g. when tabbing between elements), and not when they are focused using a mouse or other pointing device. See bug 1617600 for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namelayout.css.focus-visible.enabled
- -

Single numbers as aspect ratio in media queries

- -

Support for using a single {{cssxref("number")}} as a {{cssxref("ratio")}} when specifying the aspect ratio for a media query. See {{bug(1565562)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly70No
Developer Edition70No
Beta70No
Release70No
Preference namelayout.css.aspect-ratio-number.enabled
- -

Property: backdrop-filter

- -

The {{cssxref("backdrop-filter")}} property applies filter effects to the area behind an element. See {{bug(1178765)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly70No
Developer Edition70No
Beta70No
Release70No
Preference namelayout.css.backdrop-filter.enabled
- -

Grid: Masonry layout

- -

Adds support for a masonry style layout based on grid layout where one axis has a masonry layout while having normal grid layout on the other. This allows to create gallery style layouts like on Pinterest. See {{bug(1607954)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly77No
Developer Edition77No
Beta77No
Release77No
Preference namelayout.css.grid-template-masonry-value.enabled
- -

APIs

- -

Graphics: Canvas, WebGL, and WebGPU

- -

Interface: OffscreenCanvas

- -

The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered offscreen. It is available in both the window and worker contexts. See {{bug(1390089)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly44No
Developer Edition44No
Beta44No
Release44No
Preference namegfx.offscreencanvas.enabled
- -

Hit regions

- -

Whether the mouse coordinates are within a particular area on the canvas is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly30No
Developer Edition30No
Beta30No
Release30No
Preference namecanvas.hitregions.enabled
- -

WebGL: Draft extensions

- -

When this preference is enabled, any WebGL extensions currently in "draft" status which are being tested are enabled for use. Currently, there are no WebGL extensions being tested by Firefox.

- -

WebGPU API

- -

This new API provides low-level support for performing computation and graphics rendering using the {{interwiki("wikipedia", "Graphics Processing Unit")}} (GPU) of the user's device or computer. The specification is still a work-in-progress. See {{bug(1602129)}} for our progress on this API.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly73No
Developer Edition73No
Beta73No
Release73No
Preference namedom.webgpu.enabled
- -

HTML DOM API

- -

Global event: beforeinput

- -

The global {{domxref("HTMLElement.beforeinput_event", "beforeinput")}} event is sent to an {{HTMLElement("input")}} element—or any element whose {{htmlattrxref("contenteditable")}} attribute is enabled—immediately before the element's value changes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly74No
Developer Edition74No
Beta74No
Release74No
Preference namedom.input_events.beforeinput.enabled
- -

HTMLMediaElement method: setInkId()

- -

{{domxref("HTMLMediaElement.setSinkId()")}} allows you to set the sink ID of an audio output device on an {{domxref("HTMLMediaElement")}}, thereby changing where the audio is being output. See {{bug(934425)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly64No
Developer Edition64No
Beta64No
Release64No
Preference namemedia.setsinkid.enabled
- -

HTMLMediaElement properties: audioTracks and videoTracks

- -

Enabling this feature adds the {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElement.videoTracks")}} properties to all HTML media elements. However, because Firefox doesn't currently suport multiple audio and video tracks, the most common use cases for these properties don't work, so they're both disabled by default. See {{bug(1057233)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly33No
Developer Edition33No
Beta33No
Release33No
Preference namemedia.track.enabled
- -

DOM

- -

Document property: autoplayPolicy

- -

The {{domxref("document")}} property {{domxref("Document.autoplayPolicy", "autoplayPolicy")}} returns a string indicating how the browser handles requests to automatically play media (either using the {{domxref("HTMLMediaElement.autoplay", "autoplay")}} property on a media element or by attempting to trigger playback from JavaScript code. The spec for this API is still being written. The value changes over time depending on what the user is doing, their preferences, and the state of the browser in general. Potential values include allowed (autoplay is currently permitted), allowed-muted (autoplay is allowed but only with no—or muted—audio), and disallowed (autoplay is not allowed at this time). See {{bug(1506289)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly66No
Developer Edition66No
Beta66No
Release66No
Preference namedom.media.autoplay.autoplay-policy-api
- -

GeometryUtils methods: convertPointFromNode(), convertRectFromNode(), and convertQuadFromNode()

- -

The {{domxref("GeometryUtils")}} methods {{domxref("GeometryUtils.convertPointFromNode", "convertPointFromNode()")}}, {{domxref("GeometryUtils.convertRectFromNode", "convertRectFromNode()")}}, and {{domxref("GeometryUtils.convertQuadFromNode", "convertQuadFromNode()")}} map the given point, rectangle, or quadruple from the {{domxref("Node")}} on which they're called to another node. See {{bug(918189)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly31Yes
Developer Edition31No
Beta31No
Release31No
Preference namelayout.css.getBoxQuads.enabled
- -

GeometryUtils method: getBoxQuads()

- -

The {{domxref("GeometryUtils")}} method {{domxref("GeometryUtils.getBoxQuads", "getBoxQuads()")}} returns the CSS boxes for a {{domxref("Node")}} relative to any other node or viewport. See {{bug(917755)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly31Yes
Developer Edition31No
Beta31No
Release31No
Preference namelayout.css.convertFromNode.enable
- -

Payment Request API

- -

Primary payment handling

- -

The Payment Request API provides support for handling web-based payments within web content or apps. Due to a bug that came up during testing of the user interface, we have decided to postpone shipping this API while discussions over potential changes to the API are held. Work is ongoing. See {{bug(1318984)}} for more details on the state of this API.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly55No
Developer Edition55No
Beta55No
Release55No
Preference namedom.payments.request.enabled and
- dom.payments.request.supportedRegions
- -

Basic Card API

- -

Extends the Payment Request API with dictionaries that define data structures describing card payment types and payment responses. See {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly56No
Developer Edition56No
Beta56No
Release56No
Preference namedom.payments.request.enabled and
- dom.payments.request.supportedRegions
- -

Visual Viewport API

- -

The Visual Viewport API provides access to information describing the position of the {{Glossary("visual viewport")}} relative to the document as well as to the window's content area. It also supports events to monitor changes to this information. See {{bug(1550390)}} for more details. There currently is no real plan to ship this on desktop, but you can track the state of that just in case it changes in {{bug(1551302)}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly63No
Developer Edition63No
Beta63No
Release63Starting in Firefox 68, on Android only
Preference namedom.visualviewport.enabled
- -

Constructable stylesheets

- -

The addition of a constructor to the {{domxref("CSSStyleSheet")}} interface as well as a variety of related changes makes it possible to directly create new stylesheets without having to add the sheet to the HTML. This makes it much easier to create reusable stylesheets for use with Shadow DOM. Our implementation is not yet complete; see {{bug(1520690)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly73No
Developer Edition73No
Beta73No
Release73No
Preference namelayout.css.constructable-stylesheets.enabled
- -

WebRTC and media

- -

The following experimental features include those found in the WebRTC API, the Web Audio API, the Media Session API, the Media Source Extensions API, the Encrypted Media Extensions API, and the Media Capture and Streams API.

- -

Media Session API

- -

The entire Firefox implementation of the Media Session API is currently experimental. This API is used to customize the handling of media-related notifications, to manage events and data useful for presenting a user interface for managing media playback, and to obtain media file metadata. See {{bug(1112032)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly71Yes
Developer Edition71No
Beta71No
Release71No
Preference namedom.media.mediasession.enabled
- -

Asynchronous SourceBuffer add and remove

- -

This adds the promise-based methods {{domxref("SourceBuffer.appendBufferAsync", "appendBufferAsync()")}} and {{domxref("SourceBuffer.removeAsync", "removeAsync()")}} for adding and removing media source buffers to the {{domxref("SourceBuffer")}} interface. See {{bug(1280613)}} and {{bug(778617)}} for more information.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly62No
Developer Edition62No
Beta62No
Release62No
Preference namemedia.mediasource.experimental.enabled
- -

AVIF (AV1 Image File format) support

- -

With this feature enabled, Firefox supports the AV1 Image File (AVIF) format. This is a still image file format that leverages the capabilities of the AV1 video compression algorithms to reduce image size. See {{bug(1443863)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly77No
Developer Edition77No
Beta77No
Release77No
Preference nameimage.avif.enabled
- -

Security and privacy

- -

Block plain text requests from Flash on encrypted pages

- -

In order to help mitigate man-in-the-middle (MitM) attacks caused by Flash content on encrypted pages, a preference has been added to treat OBJECT_SUBREQUESTs as active content. See {{bug(1190623)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly59No
Developer Edition59No
Beta59No
Release59No
Preference namesecurity.mixed_content.block_object_subrequest
- -

Insecure page labeling

- -

These two preferences add a "Not secure" text label in the address bar next to the traditional lock icon when a page is loaded insecurely (that is, using {{Glossary("HTTP")}} rather than {{Glossary("HTTPS")}}). See {{bug(1335970)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly60No
Developer Edition60No
Beta60No
Release60No
Preference namesecurity.insecure_connection_text.enabled for normal browsing mode; security.insecure_connection_text.pbmode.enabled for private browsing mode
- -

Upgrading mixed display content

- -

When enabled, this preference causes Firefox to automatically upgrade requests for media content from HTTP to HTTPS on secure pages. The intent is to prevent mixed-content conditions in which some content is loaded securely while other content is insecure. If the upgrade fails (because the media's host doesn't support HTTPS), the media is not loaded. See {{bug(1435733)}} for more details.

- -

This also changes the console warning; if the upgrade succeeds, the message indicates that the request was upgraded, instead of showing a warning.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly60No
Developer Edition60No
Beta60No
Release60No
Preference namesecurity.mixed_content.upgrade_display_content
- - - -

Following Safari's lead, this experiment causes setting the {{htmlattrxref("target", "a")}} attribute on an {{HTMLElement("a")}} element to _blank (that is, using target="_blank") to imply that the default value of {{htmlattrxref("rel", "a")}} is noopener rather than opener, which is the usual default. To bypass this security measure, web developers should explicitly request an opener relationship using rel="opener" on their <a> elements that use target="_blank" to open the link into a new window or tab. See {{bug(1503681)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly65Yes
Developer Edition65Yes
Beta65Yes
Release65No
Preference namedom.targetBlankNoOpener.enabled
- -

FTP support disabled

- -

For security reasons, Mozilla intends to remove support for {{Glossary("FTP")}} from Firefox in 2010, effective in Firefox 82. See {{bug(1622409)}} for implementation progress. The network.ftp.enabled preference must be enabled (set to true) to allow FTP to be used.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly77Yes
Developer Edition77No
Beta77No
Release77No
Preference namenetwork.ftp.enabled
- -

Developer tools

- -

Mozilla's developer tools are constantly evolving. We experiment with new ideas, add new features, and test them on the Nightly and Developer Edition channels before letting them go through to beta and release. The features below are the current crop of experimental developer tool features.

- -

Color scheme simulation

- -

Adds an option to simulate different color schemes allowing to test {{cssxref("@media/prefers-color-scheme", "@prefers-color-scheme")}} media queries. Using this media query lets your style sheet specify whether it prefers a light or dark user interface. This feature lets you test your code without having to change settings in your browser (or operating system, if the browser follows a system-wide color scheme setting).

- -

See {{bug(1550804)}} and {{bug(1137699)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly72No
Developer Edition72No
Beta72No
Release72No
Preference namedevtools.inspector.color-scheme-simulation.enabled
- -

Execution context selector

- -

This feature displays a button on the console's command line that lets you change the context in which the expression you enter will be executed. See {{bug(1605154)}} and {{bug(1605153)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namedevtools.webconsole.input.context
- -

Mobile gesture support in Responsive Design Mode

- -

Mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu. See {{bug(1621781)}}, {{bug(1245183)}}, and {{bug(1401304)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly76[1]Yes
Developer Edition76[1]Yes
Beta76[1]Yes
Release76[1]No
Preference namen/a
- -

[1] Support for zooming using the double-tap gesture was added in Firefox 76. The other gestures were added for Firefox 79.

- -

Compatibility panel

- -

A side panel for the Page Inspector that shows you information detailing your app's cross-browser compatibility status. See {{bug(1584464)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly71Yes
Developer Edition71Yes
Beta71No
Release71No
Preference namedevtools.inspector.compatibility.enabled
- -

UI

- -

Desktop zooming

- -

This feature lets you enable smooth pinch zooming on desktop computers without requiring layout reflows, just like mobile devices do. See {{bug(1245183)}} for further details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly42No
Developer Edition42No
Beta42No
Release42No
Preference nameapz.allow_zooming and (on Windows) apz.windows.use_direct_manipulation
- -

See also

- - diff --git a/files/it/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html b/files/it/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html new file mode 100644 index 0000000000..7062b6a3ae --- /dev/null +++ b/files/it/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html @@ -0,0 +1,34 @@ +--- +title: Adattare le applicazioni XUL a Firefox 1.5 +slug: Adattare_le_applicazioni_XUL_a_Firefox_1.5 +tags: + - Estensioni + - Tutte_le_categorie + - XUL +translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 +--- +
{{FirefoxSidebar}}

 

+ +

Questa pagina contiene un elenco di modifiche in Firefox 1.5, che coinvolgono gli sviluppatori XUL.

+ +

Cambiamenti specifici

+ + + +

Altre informazioni

+ + + +

{{ languages( { "fr": "fr/Adaptation_des_applications_XUL_pour_Firefox_1.5", "en": "en/Adapting_XUL_Applications_for_Firefox_1.5" } ) }}

diff --git a/files/it/mozilla/firefox/releases/1.5/index.html b/files/it/mozilla/firefox/releases/1.5/index.html new file mode 100644 index 0000000000..6c47af6552 --- /dev/null +++ b/files/it/mozilla/firefox/releases/1.5/index.html @@ -0,0 +1,165 @@ +--- +title: Firefox 1.5 per Sviluppatori +slug: Firefox_1.5_per_Sviluppatori +tags: + - Da_unire + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Mozilla/Firefox/Releases/1.5 +--- +
{{FirefoxSidebar}}

Firefox 1.5

+ +

Firefox 1.5 è stato rilasciato ed è disponibile per il download. Basato sul motore Gecko 1.8, questa ultima versione del browser migliora il supporto agli standard e fornisce nuove possibilità per implementare applicazioni web di ultima generazione. Le funzionalità di Firefox 1.5 comprendono un supporto più esteso ai CSS livello 2 e 3, API per applicazioni grafiche vettoriali 2D tramite SVG 1.1 e l'elemento <canvas>, eventi XForms e XML, oltre a miglioramenti per DHTML, JavaScript e DOM.

+ +

Firefox 1.5 è disponibile per il download a questo indirizzo: http://www.mozilla.com/firefox/

+ +

Strumenti di sviluppo

+ +

Esistono diversi strumenti ed estensioni che possono essere d'aiuto agli sviluppatori per supportare Firefox 1.5.

+ + + +

Nota: alcune estensioni potrebbero non supportare ancora Firefox 1.5 e potrebbero essere automaticamente disabilitate.

+ +

Nota: non tutte le estensioni hanno una traduzione in italiano.

+ +

Panoramica

+ +

Alcune nuove funzionalità di Firefox 1.5.

+ +

Sviluppatori di siti e applicazioni web

+ +
+
Introduzione a SVG in HTML
+
impara a utilizzare JavaScript e i CSS per manipolare le immagini nello stesso modo in cui manipoleresti un normale documento XHTML. Vedi anche SVG in Firefox 1.5 per conoscere lo stato e i problemi conosciuti dell'implementazione di SVG in Firefox 1.5.
+
+ +
+
Disegnare grafici con le Canvas
+
come utilizzare il nuovo tag <canvas> per disegnare grafici e altri oggetti.
+
+ +
+
Le colonne CSS3
+
Il supporto per il testo multicolonna introdotto da CSS3.
+
+ +
+
Usare la cache di Firefox 1.5
+
Come bfcache velocizza la navigazione coi tasti Indietro e Avanti
+
+ +

Sviluppatori XUL e sviluppatori di estensioni

+ +
+
Creare un'estensione
+
Questo tutorial spiega tutti i passi necessari per creare una semplicissima estensione per Firefox. Si veda anche another tutorial on MozillaZine knowledge base (EN), che illustra le nuove funzionalità dell'Extension Manager nell'1.5 e spiega come creare una nuova estensione ancora più facile.
+
+ +
+
XPCNativeWrapper
+
XPCNativeWrapper è un modo per far sì che un oggetto sia accessibile in maniera sicura dal DOM. Si può utilizzare in tutte le versioni di Firefox, sebbene il suo comportamento sia leggermente cambiato in Firefox 1.5.
+
+ +
+
Sistema di Preferenze
+
Illustra i nuovi widget che permettono di creare finestre di opzioni in maniera molto semplice e utilizzando poco codice JavaScript.
+
+ +
+
Caratteri internazionali nel JavaScript di XUL
+
i file JavaScript delle applicazioni XUL ora possono contenere caratteri non ASCII.
+
+ +
+
Cambiementi nell'API di Tree
+
Le interfacce per accedere all'elemento XUL <tree> sono cambiate.
+
+ +
+
Modifiche a XUL in Firefox 1.5
+
Un sommario dei cambiamenti di XUL. Si veda anche Adattare le applicazioni XUL per Firefox 1.5.
+
+ +
+
Modifiche relative al networking
+
 
+
+ + + +

Nuove funzionalità per gli utenti finali

+ +

Esperienza utente

+ + + +

Sicurezza e Privacy

+ + + +

Supporto agli standard

+ +

Firefox offre un supporto coerente multipiattaforma per i seguenti standard del web:

+ + + +

Firefox 1.5 supporta anche:

+ + + +

Cambiamenti da Firefox 1.0

+ +

Sono stati introdotti diversi cambiamenti in Firefox dalla sua prima release il 9 novembre 2004. Questo browser ha visto molti progressi, molte nuove funzionalità e sono stati corretti molti bug. Lerelease notes sono un'eccellente fonte di informazioni sulle modifiche che sono state apportate:

+ + + +

Nota: le note di rilascio qui linkate sono tutte in inglese.

+ +

{{ languages( { "en": "en/Firefox_1.5_for_Developers", "es": "es/Firefox_1.5_para_Desarrolladores", "fr": "fr/Firefox_1.5_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_1.5_for_Developers", "nl": "nl/Firefox_1.5_voor_ontwikkelaars", "pl": "pl/Firefox_1.5_dla_programist\u00f3w", "pt": "pt/Firefox_1.5_para_Desenvolvedores" } ) }}

diff --git a/files/it/mozilla/firefox/releases/18/index.html b/files/it/mozilla/firefox/releases/18/index.html new file mode 100644 index 0000000000..41af59d3c9 --- /dev/null +++ b/files/it/mozilla/firefox/releases/18/index.html @@ -0,0 +1,109 @@ +--- +title: Firefox 18 per sviluppatori +slug: Firefox_18_for_developers +tags: + - Firefox + - Firefox 18 +translation_of: Mozilla/Firefox/Releases/18 +--- +
{{FirefoxSidebar}}

{{ draft() }}

+ +

Firefox 18 è stato pubblicato l'8 gennaio 2013. In questo articolo sono elencate le modifiche principali che sono utili non solo per gli sviluppatori web, ma anche gli sviluppatori di Firefox e Gecko così come add-on per gli sviluppatori.
+
+ Vuoi aiutare la documentazione di Firefox 18? lista dei bug su cui bisogna scrivere (Vedi l'elenco dei bug )

+ +

Modifiche per gli sviluppatori Web

+ +

HTML

+ + + +

CSS

+ + + +

 DOM

+ + + +

JavaScript

+ + + +

WebGL

+ +

SVG

+ +

MathML

+ +

XUL

+ +

Network

+ + + +

Strumenti di sviluppo

+ +

Novità per add-on e sviluppatori Mozilla

+ +

Novità dell'Interfaccia

+ +
+
{{ interface("nsIStreamListener") }}
+
The 4th parameter (aOffset) of onDataAvailable() method changes to unsigned long long. ({{bug("784912")}})
+
{{ interface("nsIUploadChannel") }}
+
setUploadStream() supports over 2GB content-length ({{bug("790617")}})
+
{{ interface("nsIEditor") }}
+
addEditorObserver() has been removed, use setEditorObserver() instead, removeEditorObserver() no longer takes a {{ interface("nsIEditorObserver") }} parameter ({{bug("785091")}})
+
+ +
+
{{ interface("nsIHttpProtocolHandler") }}
+
http-on-modify-request observers are no longer guaranteed to be called synchronously during
+ nsIChannel.asyncOpen(). For observers that need to be called during asyncOpen(), the new http-on-opening-request observer topic has been added.  See ({{bug("800799")}})
+
+ +

New interfaces

+ +

Removed interfaces

+ +

The following interfaces have been removed.

+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('17')}}

diff --git a/files/it/mozilla/firefox/releases/2/index.html b/files/it/mozilla/firefox/releases/2/index.html new file mode 100644 index 0000000000..4f8d46f2cf --- /dev/null +++ b/files/it/mozilla/firefox/releases/2/index.html @@ -0,0 +1,117 @@ +--- +title: Firefox 2.0 per Sviluppatori +slug: Firefox_2.0_per_Sviluppatori +tags: + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Mozilla/Firefox/Releases/2 +--- +
{{FirefoxSidebar}}

Nuove funzionalità per sviluppatori in Firefox 2

+ +

Firefox 2 introduce una vasta gamma di nuove funzionalità. Questo articolo fornisce i link alle rispettive pagine.

+ +

Per gli sviluppatori di siti web e di applicazioni

+ +
+
Microsummaries (EN)
+
I microsommari sono informazioni importanti regolarmente aggiornate e succinte riguardo alle pagine web. Sia un sito che degli sviluppatori esterni possono fornirle e gli utenti possono scegliere di visualizzare i microsommari invece dei titoli statici nei bookmark.
+
+ +
+
Creare un Microsommario
+
Un tutorial che insegna a creare un generatore di microsommari.
+
+ +
+
Creare Plugin MozSearch
+
Firefox 2 supporta MozSearch, un formato per i plugin di ricerca basato su OpenSearch.
+
+ +
+
Supportare i suggerimenti nei plugin di ricerca
+
Come permettere ai plugin in MozSearch di supportare i suggerimenti di ricerca, che appaiono in una casella popup mentre di scrive nella barra di ricerca.
+
+ +
+
Novità in JavaScript 1.7
+
Firefox 2 supporta JavaScript 1.7, che comprende nuove funzionalità come let, assegnamento destrutturato, generatori e iteratori.
+
+ +
+
WHATWG Client-side session and persistent storage (EN)
+
La persistenza dei dati permette alle applicazioni web di immagazzinare dati strutturati nel browser.
+
+ +
+
SVG in Firefox
+
Firefox 2 migliora il supporto a Scalable Vector Graphics (SVG), implementando l'elemento <textPath> e aggiungendo il supporto ad alcuni attributi precedentemente ignorati.
+
+ +

Per gli sviluppatori di applicazioni XUL e di estensioni

+ +
+
Session restore API
+
Aiuta a salvare e recuperare successivamente i dati di sessione in sessione.
+
+ +
+
Feed content access API
+
Questa API è ancora in stato di revisione; la documentazione verrà pubblicata in futuro.
+
+ +
+
Supporto a SAX
+
API di un parser XML basata sugli eventi.
+
+ +
+
Installare plugin di ricerca dalle pagine web
+
E' possibile installare in Firefox un nuovo motore di ricerca tramite JavaScript. Il plugin di ricerca può essere scritto utilizzando anche OpenSearch o il formato Sherlock.
+
+ +
+
Aggiungere fornitori di dati anti-phishing
+
E' possibile migliorare la protezione anti-phishing aggiungendo alcuni fornitori di fati per la navigazione sicura.
+
+ +
+
mozStorage
+
Firefox 2 introduce mozStorage, un'architettura di database basata su SqlLite.
+
+ +
+
Le pratiche migliori per il versioning delle estensioni
+
Come utilizzare i numeri di versione.
+
+ +

Nuove funzionalità per gli utenti finali

+ +

Firefox 2 offre una versione migliorata dell'interfaccia utente impiegata nelle versioni precedenti, a cui sono state aggiunte varie caratteristiche di sicurezza finalizzate a rendere la vostra navigazione più semplice e piacevole di prima.

+ +

Esperienza utente

+ + + +

Sicurezza e Privacy

+ + + +

Argomenti correlati

+ + + +

{{ languages( { "en": "en/Firefox_2_for_developers", "fr": "fr/Firefox_2_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_2_for_developers", "pt": "pt/Firefox_2_para_desenvolvedores" } ) }}

-- cgit v1.2.3-54-g00ecf