<![CDATA[ chrome - freeCodeCamp.org ]]> https://www.freecodecamp.org/italian/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ chrome - freeCodeCamp.org ]]> https://www.freecodecamp.org/italian/news/ Eleventy Sun, 17 May 2026 08:31:40 +0000 60 <![CDATA[ Come creare la tua estensione di Google Chrome ]]> https://www.freecodecamp.org/italian/news/come-creare-la-tua-estensione-di-google-chrome/ 62fdf14503346c07472e9bbd Mon, 05 Sep 2022 05:30:00 +0000 Articolo originale: How to Create Your Own Google Chrome Extension

Se sei un utente di Google Chrome, probabilmente hai usato delle estensioni nel tuo browser.

Ti sei mai chiesto come realizzarne una? In questo articolo, ti mostrerò come creare un'estensione di Chrome partendo da zero.

Sommario

Cos'è un'estensione di Chrome?

Un'estensione di Chrome è un programma che è installato sul browser Chrome e che ne aumenta le funzionalità. Puoi realizzarne una facilmente usando tecnologie web come HTML, CSS e JavaScript.

Creare un'estensione di Chrome è simile a creare un'applicazione web, ma richiede un file manifest.json di cui parleremo nell'ultima sezione di questo articolo.

Che aspetto avrà la tua estensione di Chrome?

covid_report
L'estensione di Chrome che realizzeremo

Come puoi vedere, l'estensione di Chrome qui sopra mostra gli ultimi dati sul Coronavirus (COVID-19) nel Regno Unito. In questo articolo, vedremo come creare questa estensione.

Utilizzeremo l'API https://api.coronavirus.data.gov.uk/v1/data per recuperare i dati e per semplicità visualizzeremo soltanto i dati relativi all'ultimo giorno.

Il codice sorgente completo di questo progetto è disponibile su GitHub.

Come creare un'estensione di Chrome

Prima di tutto, abbiamo bisogno di creare una cartella vuota in cui aggiungeremo i nostri file HTML, CSS e JavaScript.

All'interno della cartella, creiamo un file index.html con questo codice HTML di partenza:

<!DOCTYPE html>
<html>
<head>
    <title>Statistiche Covid-19 - UK</title>
    <meta charset="utf-8">
</head>
<body>
</body>
</html>

Adesso aggiungiamo il link a BootstrapCDN nel tag head. Useremo il framework Bootstrap in modo da non dover scrivere del CSS extra in questo esempio.

<head>
    <title>Statistiche Covid-19 - UK</title>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

Adesso lavoreremo per creare la tabella in cui abbiamo visto i dati nella demo.

<!DOCTYPE html>
<html>
<head>
    <title>Statistiche Covid-19 - UK</title>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-3" style="width: 450px;">
        <h2 class="text-center">Statistiche Covid-19 - ultimi dati - UK</h2>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>Data</th>
                <th>Paese</th>
                <th>Casi confermati</th>
                <th>Decessi</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td id="date"></td>
                <td id="areaName"></td>
                <td id="latestBy"></td>
                <td id="deathNew"></td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="script.js"></script>
</html>

Il codice qui sopra crea una tabella larga 450px, con quattro diverse intestazioni: Data, Paese, Casi confermati e Decessi.

Come puoi vedere, ogni elemento td possiede un diverso id. Utilizzeremo i valori degli id in JavaScript per aggiornare i dati della tabella. Inoltre, carichiamo JavaScript dopo aver caricato il contenuto HTML.

Ora, dato che la tabella viene visualizzata, dobbiamo lavorare sulla scrittura del codice JavaScript per recuperare dati dall'API.

Creiamo un file script.js in cui aggiungiamo il seguente codice:

async function fetchData() {
    const res=await fetch ("https://api.coronavirus.data.gov.uk/v1/data");
    const record=await res.json();
    document.getElementById("date").innerHTML=record.data[0].date;
    document.getElementById("areaName").innerHTML=record.data[0].areaName;
    document.getElementById("latestBy").innerHTML=record.data[0].latestBy;
    document.getElementById("deathNew").innerHTML=record.data[0].deathNew;
}
fetchData();

Analizziamo il codice qui sopra:

  • Usiamo la funzione asincrona chiamata fetchData.
  • I dati vengono raccolti dall'API https://api.coronavirus.data.gov.uk/v1/data.
  • I dati JSON sono conservati nella variabile chiamata record.
  • Il contenuto HTML dei td con gli id date, areaName, latestBy e deathNew viene aggiornato con i valori corrispondenti dell'API.

Se controlliamo sul browser, saremo in grado di vedere il seguente risultato.

covid_browser
Una preview dell'estensione

I dati vengono recuperati dall'API e aggiornati man mano che cambiano.

File manifest.json

Come abbiamo discusso precedentemente, creare un'estensione di Chrome è simile a creare un'applicazione web. L'unica differenza è che l'estensione di Chrome richiede un file manifest.json dove conservare tutte le configurazioni.

Il file manifest.json contiene tutte le informazioni necessarie richieste per realizzare un'estensione di Chrome. È il primo file ad essere controllato dall'estensione e tutto viene caricato da questo singolo file.

Adesso, creiamo il file manifest.json nella cartella principale e aggiungiamo il seguente codice al suo interno:

{
    "name": "Statistiche Covid-19 UK",
    "version": "1.0.0",
    "description": "ultimi dati covid-19 UK",
    "manifest_version": 3,
    "author": "Sampurna Chapagain",
    "action":{
        "default_popup": "index.html",
        "default_title": "Ultimi dati covid"
    }
}
Manifest.json

Questo file manifest.json contiene il valore dei campi name, version, description, manifest_version (3 in questo caso, l'ultima versione di manifest), author, e action. Nel campo action, c'è un valore per default_popup che contiene il percorso del file HTML, che in quest'esempio è index.html.

Puoi dare un'occhiata qui per vedere tutte le configurazioni di un file manifest.json.

Dato che abbiamo aggiunto anche il file manifest.json, siamo pronti per aggiungere questo progetto come estensione del nostro browser Chrome.

Per questo, dobbiamo andare a selezionare "Altri strumenti" nel menu del browser e scegliere "Estensioni", come mostrato nella figura qui sotto:

Untitled-design--1-

Dopo aver scelto "Estensioni", verremo reindirizzati alla pagine delle estensioni di Chrome. Assicurati di abilitare la "Modalità sviluppatore".

Untitled-design--1--1

Una volta fatto ciò, devi cliccare sul pulsante "Carica estensione non pacchettizzata" che ti permetterà di caricare il tuo progetto nello store delle estensioni di Chrome.

Adesso, l'estensione è disponibile sul nostro store delle estensioni di Chrome. Puoi anche fissare l'estensione nel browser come mostrato nella gif qui sotto:

pin_extension

Questa estensione funziona solo sul tuo browser. Se vuoi pubblicarla sul Web Store di Chrome, puoi seguire questo link.

Conclusione

Se hai delle conoscenze di HTML, CSS e JavaScript, puoi realizzare facilmente delle estensioni di Chrome. Spero che dopo aver letto questo articolo creerai qualche estensione interessante.

Buona programmazione!

]]> <![CDATA[ Come giocare a Dinosaur game di Google Chrome sia online che offline ]]> https://www.freecodecamp.org/italian/news/come-giocare-a-dinosaur-game/ 6252a939f05a77054a48ee7d Mon, 11 Apr 2022 09:22:16 +0000 Articolo originale: How to Play the No Internet Google Chrome Dinosaur Game - Both Online and Offline

Alcuni anni fa, Google ha aggiunto un divertente Easter egg a Chrome: se la connessione internet si interrompe e provi a visitare una pagina web, vedrai il messaggio "Nessuna connessione a Internet" oppure "Impossibile connettersi a Internet" insieme a un piccolo dinosauro pixellato.

image-26-opt
Il T-rex dice che non c'è connessione oggi

In molti probabilmente hanno pensato che il dinosauro fosse soltanto un'icona carina per fare compagnia durante l'assenza di connessione, ma premendo la barra spaziatrice il dinosauro inizia a correre.

Questo piccolo Easter egg è diventato un gioco molto amato. Ma è possibile giocarci (attenzione, può creare dipendenza) quando sei online e hai bisogno di una pausa? In quest'articolo, vedrai come farlo sia offline che online.

Come giocare a Chrome dino o T-rex game offline

Se la tua connessione a internet si interrompe, apri semplicemente Chrome oppure, se stai già navigando, prova a visitare una pagina qualsiasi. Vedrai un piccolo dinosauro accanto al messaggio di errore.

Premi la barra spaziatrice (o la freccia su) e il t-rex inizierà a correre. Con la freccia su potrai saltare gli ostacoli come i cactus sul tuo percorso e tenendola premuta più a lungo, il dinosauro salterà più in alto.

Se hai bisogno di passare sotto un ostacolo, premi la freccia giù.

image-27-opt

Man mano che il gioco prosegue, il t-rex aumenta la sua velocità e una volta colpito da un ostacolo, il gioco finisce e il punteggio si azzera. Puoi giocare ancora premendo la barra spaziatrice.

image-28-opt-1

Come giocare a Chrome dino o T-rex game online

Bene, ti sei divertito mentre aspettavi che la tua connessione tornasse, ma se volessi giocare mentre sei online? Ci sono un paio di modi per farlo.

Visita l'URL dino

Il modo più semplice per giocare online è andare sull'URL: chrome://dino/. Accedi al link e voilà, ecco il piccolo t-rex e il messaggio di errore.

image-29

A questo punto, premi la barra spaziatrice e inizia a saltare oltre i cactus.

Esiste anche un sito web Chrome Dino non ufficiale dove puoi giocare a una replica del gioco con suoni e temi grafici diversi, come questo tema ispirato a Super Mario Bros.:

running-mario-opt

Oppure questo tema con effetti sonori ispirato al Batman degli anni '60:

batman-opt

Bonus: un altro modo per trovare il gioco

Potrebbe capitare che tu non visualizzi il messaggio di errore con il piccolo t-rex quando la connessione internet si interrompe, o magari non vuoi spegnere di proposito il wifi per giocare.

Nel caso tu voglia disabilitare la connessione su Chrome, premi il tasto F12 per aprire i dev tool di Chrome.

Clicca su "Network" (o "Rete", se è in italiano) nell'angolo in alto a destra e cerca l'opzione Online/Offline (potrebbe anche dire "No throttling" in inglese o "Nessun limite" in italiano) nella seconda riga:

image-30-cropped
Apri il menu a tendina indicato da "online".

Seleziona l'opzione "Offline", invece di "Online" che dovrebbe essere attiva durante la navigazione.

image-31-cropped
Seleziona "Offline"

Un volta fatto questo, se proverai a visitare una pagina qualsiasi, il dinosauro comparirà! Puoi uscire dai dev tool e premere la barra spaziatrice per iniziare a giocare.

image-32-cropped
Play away!

Adesso sai come trovare il gioco dino/T-rex game sia con che senza connessione a internet. Buon divertimento!

]]> <![CDATA[ Come ripristinare le schede su Chrome: recupera le pagine della tua ultima sessione ]]> https://www.freecodecamp.org/italian/news/come-ripristinare-schede-su-chrome/ 62508b86f05a77054a48e930 Mon, 11 Apr 2022 08:40:44 +0000 Articolo originale: How to Restore Tabs on Chrome: Restore Your Last Session and Pages

Chrome è diventato il browser più utilizzato nel mondo grazie alle caratteristiche e performance migliori rispetto alla concorrenza. Questa crescente popolarità ha fatto sì che in molti si siano trovati a far fronte alla perdita di importanti pagine web, ricerche e sessioni a causa di schede di Chrome perse o chiuse.

image
Grafico creato con JSCharting e dati da statcounter.com. Esplora il grafico interattivo che mostra l'uso crescente di Chrome rispetto ad altri browser.

Immagina di star svolgendo una ricerca per un progetto e di riuscire a trovare una fonte con le informazioni le stai cercando dopo aver cliccato su centinaia di link. Non hai la minima idea di come sei arrivato su questa pagina ma ora sei lì ed è l'unica cosa che conta.

Stai lavorando su commenti, email, cambiando schede e sta andando tutto alla grande finché non si verifica un disastro: clicchi accidentalmente sul pixel sbagliato e la scheda di cui avevi bisogno scompare senza preavviso.

Oppure, senza che tu ne abbia colpa, Chrome decide di andare in crash senza alcun motivo.

Non c'è bisogno di preoccuparsi, non sei la prima persona a cui accade e non sarai di certo l'ultima. Fortunatamente, Google Chrome tiene in memoria la cronologia di navigazione delle pagine web e dovresti essere in grado di recuperare tutte le informazioni che necessiti a prescindere da cosa sia andato storto.

Nel caso dovesse capitarti, ecco alcuni modi in cui puoi recuperare facilmente le schede chiuse su Chrome.

Scheda chiusa per sbaglio

Se hai semplicemente cliccato nel posto sbagliato e hai chiuso una scheda senza volerlo, è molto semplice recuperarla: puoi semplicemente cliccare con il tasto destro su un area vuota sulla barra delle schede e selezionare "Riapri scheda  chiusa".

image-20

Puoi anche usare il comando rapido dalla tastiera - premendo Ctrl+Shift+T (o Command+Shift+T su Mac) e l'ultima scheda che hai chiuso si riaprirà in una nuova scheda.

Chrome o computer in crash

Non è mai piacevole quando il computer si blocca, ma non devi preoccuparti di perdere la sessione corrente su Chrome.

Google Chrome è in grado di gestire dignitosamente un crash in cui tutte le schede che hai aperto vanno perdute. Di solito, alla riapertura di Chrome, viene mostrato il pulsante "ripristinare schede" con cui è possibile recuperare completamente l'ultima sessione di navigazione, tornando con un click a dove sei stato interrotto.

Se questa opzione non è disponibile, clicca sul menu di Chrome e punta il cursore sulla voce "Cronologia". Dovrebbe esserci un'opzione "# schede", per esempio "12 schede", su cui potrai cliccare e ripristinare l'ultima sessione.

image-19

Il comando rapido  Ctrl+Shift+T può anche essere utilizzato per riaprire finestre chiuse o in caso di crash su Chrome e può essere eseguito più volte finché le schede o le finestre chiuse da ripristinare non sono esaurite.

Ripristinare schede chiuse di recente

Analogamente, è possibile recuperare schede chiuse di recente dal menu di Chrome, puntando il cursore sulla voce "Cronologia" da cui sarà visibile la lista delle pagine visitate di recente.

Se la pagina che vuoi ripristinare è presente in quest'elenco, puoi cliccarci sopra e riaprirla. In caso contrario, puoi provare in un altro modo, come mostrato in seguito.

Schede chiuse da alcuni giorni

Se la pagina che vuoi recuperare non è presente in elenco, clicca sul sottomenu "Cronologia" (chrome menu > cronologia > cronologia), oppure utilizza il comando rapido Ctrl+H (Mac: Command+Y).

image-21

Così facendo, avrai accesso alla cronologia completa delle pagine che hai visitato e dovresti essere in grado di trovare la pagina che stai cercando. Nel caso in cui sia passato un po' di tempo da quando hai chiuso o perso la tua scheda, puoi anche fare una ricerca nella cronologia di navigazione per semplificare l'operazione.

Nota bene - Se stai navigando in incognito e perdi delle schede, Chrome non terrà traccia delle tue ricerche nella cronologia.

Suggerimento

Aggiungi ai preferiti le pagine web che visiti regolarmente cliccando sull'icona ⭐️ in alto a destra nella barra degli indirizzi. In questo modo creerai un segnalibro che potrai utilizzare per tornare su questa pagina.

]]>