Creare un'estensione personalizzata per Chrome

Mattepuffo's logo
Creare un'estensione personalizzata per Chrome

Creare un'estensione personalizzata per Chrome

Programmazione, HTML - CSS

Creare un'estensione per Chrome non è difficile, in quanto alla fine ci bastano le solite cose:

  • HTML
  • CSS
  • Javascript

In questo articolo vediamo come fare; il risultato sarà un'estensione che una volta cliccata ci aprirà una finestrella con una tabella con dati presi da JSONPlaceholder.

Create una cartella con un file index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>TEST</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <style></style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>TITOLO</th>
                <th>TESTO</th>
            </tr>
        </thead>

        <tbody id="tbody"></tbody>
    </table>
</body>

<script src="script.js"></script>

</html>

Come vedete una semplice pagina con una tabella.

Il script.js che dovete creare contiene questo:

async function getData() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const records = await res.json();

    let righe = '';
    records.forEach((it) => {
        righe += '<tr>';
        righe += '<td>' + it.title + '</td>';
        righe += '<td>' + it.body + '</td>';
        righe += '</tr>';
    });

    document.getElementById('tbody').innerHTML = righe;
}

getData();

Anche questo non ha grosse particolarità.

Infine dobbiamo creare il file manifest.json:

{
    "name": "Post from json place holder",
    "version": "1.0.0",
    "description": "test for chrome ext",
    "manifest_version": 3,
    "author": "Mattepuffo",
    "action": {
        "default_popup": "index.html",
        "default_title": "Posts from json place holder"
    }
}

Fatto questo aprite Chrome e andate su Estensioni -> Gestisci estensioni (potrebbe cambiare a seconda della versione che avete).

Abilitate la moalità sviluppatore per far apparire un menu con alcune voci.

Cliccate su Carica estensione non pacchettizzata indicando la cartella con tutti i files.

Fatto questo vi ritrovate l'estensione tra quelle attive, e vi basterà cliccarci sopra.

Ovviamente io non aggiunto CSS, cosa che potete fare.

E mi limito a visualizzare dei dati, ma potete fare molto di più.

Enjoy!

Condividi

Commentami!