Come creare la tua estensione di Google Chrome

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?
Che aspetto avrà la tua estensione di Chrome?
Come creare un'estensione di Chrome
Creare un file manifest.json
Conclusione

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:

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

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:

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!