Codelab: creare un'estensione di Chrome in JavaScript utilizzando Gemini

1. Introduzione

Stai per partecipare a una chiamata di Meet, ma non vuoi essere il primo a farlo? Se ti riconosci in questa descrizione, abbiamo la soluzione che fa per te.

Seguendo questo codelab, creerai un'estensione di Chrome che ti avvisa quando il primo partecipante si unisce alla chiamata.

Scoprirai i diversi elementi di un'estensione di Chrome e poi approfondirai ogni parte dell'estensione. Scoprirai le funzioni delle estensioni, come gli script di contenuti, i service worker e il passaggio di messaggi.

Per poter ricevere una notifica ogni volta che un partecipante si unisce a una chiamata di Meet, devi rispettare la release del manifest V3.

2. Prima di iniziare

Prerequisiti

Sebbene questo codelab sia adatto ai principianti, una conoscenza di base di JavaScript può migliorare notevolmente la tua esperienza.

Configurazione/Requisiti

Il browser Chrome
Una configurazione IDE/Editor sul sistema locale.
Installa gcloud CLI se vuoi abilitare l'API Gemini utilizzando gcloud.

Abilitare l'API Gemini

Nella console Google Cloud, nella pagina di selezione del progetto, seleziona o crea un progetto Google Cloud.
Verifica che la fatturazione sia attivata per il tuo progetto Cloud. Scopri come verificare se la fatturazione è abilitata per un progetto.
Vai alla pagina del Marketplace Gemini per abilitare l'API. Puoi anche utilizzare gcloud per abilitare l'API: gcloud services enable cloudaicompanion.googleapis.com --project PROJECT_ID
Visita la pagina di Gemini nella console Cloud in una nuova scheda e fai clic su "Inizia a chattare".

Note that if you're writing the code in the Cloud Shell editor,
then you will have to download the folder somewhere on your local filesystem to test the extension locally.

3. Che il divertimento abbia inizio

Installazione di base dell'estensione

Creiamo una directory che utilizzeremo come root del nostro progetto.

mkdir gemini-chrome-ext
cd gemini-chrome-ext

Prima di iniziare a porre domande specifiche a Gemini, facciamone alcune sulla struttura generica di un'estensione di Chrome.

Prompt:

What are the important parts to build a chrome extension?

Riceviamo una risposta che specifica i dettagli secondari del file manifest, di background script e dell'interfaccia utente. Vediamo più nel dettaglio questi file specifici.

Prompt:

Create a manifest.json file to build a chrome extension.
Make the name of the extension "Meet Joinees Notifier"
and the author "<YOUR_EMAIL>"

Puoi utilizzare il nome che preferisci e il tuo indirizzo email nel campo Autore.

Gemini restituisce i contenuti del file manifest di cui abbiamo bisogno, ma otteniamo alcuni campi aggiuntivi che non ci servono, come il campo action. Inoltre, abbiamo bisogno di una descrizione. Risolviamo il problema.

Prompt:

Remove the "action" field and make the description as
"Adds the ability to receive a notification when a participant joins a Google meet".

Inseriamo questi contenuti nel file manifest.json nella directory root del progetto.

A questo punto, il file manifest dovrebbe avere un aspetto simile a questo.

{
    "name": "Meet Joinees Notifier",
    "version": "1.0",
    "manifest_version": 3,
    "description": "Adds the ability to receive a notification when a participant joins a Google Meet",
    "author": "<YOUR_EMAIL>"
}

Per il momento, rimuovi tutti gli altri campi aggiuntivi generati nel file manifest, poiché questo codelab presuppone la presenza di questi campi nel file manifest.

Ora, come facciamo a verificare che l'estensione funzioni? Chiediamo a Gemini, va bene?

Prompt:

Guide me on the steps needed to test a chrome extension on my local filesystem.

Mi fornisce alcuni passaggi su come testarlo. Andiamo a "Extensions Page" andando a chrome://extensions e assicurati di attivare il pulsante "Developer Mode", che dovrebbe rivelare il pulsante "Load unpacked", che possiamo utilizzare per andare alla cartella che contiene i file di estensione in locale. Una volta fatto, dovremmo essere in grado di vedere l'estensione in "Extensions Page".

Bene. Vediamo la nostra estensione, ma iniziamo ad aggiungere alcune funzionalità.

4. Aggiungere uno script di contenuti

Vogliamo eseguire del codice JavaScript solo su https://meet.google.com, cosa che possiamo fare utilizzando gli script contenuti. Chiediamo a Gemini come ottenere questo risultato nella nostra estensione.

Prompt:

How to add a content script in our chrome extension?

O, più nello specifico:

Prompt:

How to add a content script to run on meet.google.com subdomain in our chrome extension?

o un'altra versione:

Prompt:

Help me add a content script named content.js to run on meet.google.com subdomain
in our chrome extension. The content
script should simply log "Hello Gemini" when we navigate to "meet.google.com".

Gemini ci fornisce le modifiche esatte da apportare al file manifest.json e anche il codice JavaScript necessario nel file content.js.

Con l'aggiunta di content_scripts, il nostro file manifest diventa:

{
    "name": "Meet Joinees Notifier",
    "version": "1.0",
    "manifest_version": 3,
    "description": "Adds the ability to receive a notification when a participant joins a Google Meet",
    "author": "abc@example.com",
    "content_scripts": [
        {
          "matches": ["https://meet.google.com/*"],
          "js": ["content.js"]
        }
    ]
}

In questo modo, Chrome inserisce lo script dei contenuti content.js ogni volta che visitiamo una pagina nel sottodominio "https://meet.google.com". Aggiungiamo questo file e testiamolo.

Aggiungiamo questo codice al file content.js.

console.log("Hello Gemini");

Proprio così. Quando visitiamo meet.google.com, vediamo "Hello Gemini" nella console JavaScript(Mac: Cmd + Opt + J / Win/Linux: Ctrl + Shift + J).

manifest.json

{

"name": "Meet Joinees Notifier",

"version": "1.0",

"manifest_version": 3,

"description": "Adds the ability to receive a notification when a participant joins a Google Meet",

"author": "luke@cloudadvocacyorg.joonix.net",

"permissions": [

    "tabs",

    "notifications"

],

"content_scripts": [

    {

        "matches": [

            "https://meet.google.com/*"

        ],

        "js": [

            "content.js"

        ]

    }

]

}



content.js

console.log("Hello Gemini!");



Bene. Ora possiamo aggiungere alcune funzionalità specifiche di JavaScript alla nostra app. Fermiamoci un attimo a pensare a cosa stiamo cercando di ottenere.

Migliorare lo script di contenuti

Vogliamo poter ricevere una notifica quando qualcuno partecipa a una riunione mentre ci troviamo nella pagina della riunione(dove abbiamo un'opzione per partecipare alla riunione). Per raggiungere questo obiettivo, osserviamo come cambia visivamente lo schermo quando la riunione è vuota rispetto a quando qualcuno ha partecipato alla riunione.

Ecco come appare quando non c'è nessuno nella riunione.

Queste sono le immagini quando ci sono alcuni partecipanti alla riunione.

Notiamo subito due differenze significative:

Il testo dello stato cambia da "Nessun altro è qui" a "[Utente] è in questa chiamata".
Possiamo vedere le immagini degli utenti che hanno partecipato alla chiamata.

Entrambe le modifiche funzioneranno se vogliamo sapere se qualcuno ha partecipato alla riunione, ma la seconda offre alcune possibilità di ottenere informazioni sugli utenti che hanno già partecipato, quindi proviamo a utilizzarla.

Apri "Element Inspector" (Ispettore elementi) in Chrome con la scorciatoia (Mac: Cmd + Opt + C / Win: Ctrl + Shift + C), quindi fai clic sull'immagine dell'utente che ha partecipato.

Notiamo che è presente un'immagine con poche stringhe di classe e l'attributo title dell'immagine contiene il nome dell'utente che ha partecipato alla riunione. Inoltre, questo tag immagine è racchiuso in un div con la classe U04fid. Una volta aggiunti alcuni partecipanti alla riunione di test, possiamo vedere che questo elemento div principale ospita più immagini(corrispondenti a utenti diversi).

Quindi, abbiamo in mente una strategia parziale:

Rileva quando il div con la classe U04fid contiene elementi.
In questo caso, significa che ci sono partecipanti alla riunione.
Notifica all'utente.

Torniamo a Gemini e chiediamo come possiamo raggiungere questo obiettivo passo dopo passo.

Prompt:

How to detect for element changes in the HTML page?

Ci fornisce una soluzione che coinvolge MutationObserver, ma nulla di specifico per il nostro requisito. Proviamo a modificare il prompt.

Prompt:

How can I detect if an element "div.U04fid" has any child images in the HTML page?

Questa volta otteniamo una soluzione che non include MutationObserver, ma una soluzione che controlla i partecipanti utilizzando il div principale.

Ecco cosa abbiamo ricevuto:

const divU04fid = document.querySelector('div.U04fid');
const childImages = divU04fid.querySelectorAll('img');
if (childImages.length > 0) {
  // div.U04fid has at least one child image.
}

Proviamo a modificare ulteriormente il nostro approccio:

Prompt:

Create a method which checks if the element div.U04fid has any child elements,
if it does it should log it on the console. The method should be called checkJoinees
and it should be called as a callback for MutationObserver which is observing the document.body.

Restituisce il seguente snippet di codice:

function checkJoinees(mutations) {
    for (const mutation of mutations) {
      if (mutation.type === 'childList') {
        // A child node was added or removed.
        if (document.querySelector('div.U04fid') && document.querySelector('div.U04fid').childElementCount > 0) {
          // div.U04fid has at least one child element.
          console.log('div.U04fid has at least one child element.');
        }
      }
    }
    return false;
}

const observer = new MutationObserver(checkJoinees);
observer.observe(document.body, {
  childList: true,
  delay: 1000
});

Copia questo codice nel file content.js, ricarica l'estensione(e poi ricarica la pagina di Meet).

Ora, quando qualcuno partecipa alla nostra riunione, possiamo vedere l'istruzione di log nella console.

5. Invia una notifica all'utente

Ora che siamo in grado di rilevare quando un partecipante ha partecipato alla riunione, proviamo ad aggiungere la parte di notifica nella nostra estensione Chrome. Possiamo sfogliare la documentazione dell'estensione di Chrome o persino modificare i prompt per sapere cosa stiamo cercando, ma essenzialmente dobbiamo utilizzare l'API chrome.notifications.create e la chiamata a questo metodo deve essere effettuata da un service worker in background.

Prompt:

Using the documentation for chrome notifications tell me how to use the chrome.notifications.create method.

Vediamo alcuni passaggi dettagliati, i cui punti salienti sono:

Aggiungi l'autorizzazione notifications nel file manifest.
Effettua una chiamata a chrome.notifications.create
La chiamata deve essere in uno script in background.

Per aggiungere uno script di sfondo a un'estensione Chrome in manifest version 3, abbiamo bisogno della dichiarazione background.service_worker nel nostro file manifest.json.

Quindi, creiamo un file denominato background.js e aggiungiamo quanto segue al file manifest.json.

"background": {
        "service_worker": "background.js"
},
"permissions": [
        "notifications"
]

Con le aggiunte sopra indicate, il nostro file manifest diventa:

{
    "name": "Meet Joinees Notifier",
    "version": "1.0",
    "manifest_version": 3,
    "description": "Adds the ability to receive a notification when a participant joins a Google Meet",
    "author": "<YOUR_EMAIL>",
    "content_scripts": [
        {
          "matches": ["https://meet.google.com/*"],
          "js": ["content.js"]
        }
    ],
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
            "notifications"
    ]
}

Prompt:

Create a method sendNotification that calls the chrome.notifications.create
method with the message, "A user joined the call" for a chrome extension with manifest v3,
the code is in the background service worker

Salva questa immagine nella directory principale della cartella e rinominala success.png.

Poi aggiungi il seguente snippet di codice al file background.js.

function sendNotification(notificationId, message) {
    chrome.notifications.create(notificationId, {
      type: "basic",
      title: "A user joined the call",
      message: message,
      iconUrl: "./success.png"
    });
}

sendNotification("notif-id", "test message");

Ora ricarica l'estensione dalla pagina delle estensioni e dovresti visualizzare immediatamente un popup di notifica.

6. Aggiungere il passaggio di messaggi nell'estensione Chrome

Ora, l'ultimo passaggio importante che dobbiamo eseguire è collegare il rilevamento di un partecipante da parte dello script dei contenuti e il metodo sendNotification nello script di sfondo. Nel contesto delle estensioni di Chrome, il modo per farlo è tramite una tecnica chiamata message passing.

Ciò consente la comunicazione tra le diverse parti di un'estensione di Chrome, nel nostro caso dallo script dei contenuti al service worker in background. Chiediamo a Gemini come fare.

Prompt:

How to send a message from the content script to the background script in a chrome extension

Gemini risponde con chiamate pertinenti a chrome.runtime.sendMessage e chrome.runtime.onMessage.addListener.

In sostanza, utilizzeremo sendMessage per inviare un messaggio dallo script dei contenuti che indica che qualcuno ha partecipato alla chiamata di Meet e onMessage.addListener come listener di eventi per reagire al messaggio inviato dallo script dei contenuti. In questo caso, attiveremo la chiamata al metodo sendNotification da questo listener di eventi.

Passeremo il messaggio di notifica e una proprietà action al service worker in background. La proprietà action descrive a cosa risponde lo script di sfondo.

Ecco il nostro codice content.js:

function checkJoinees(mutations) {
    for (const mutation of mutations) {
      if (mutation.type === 'childList') {
        // A child node was added or removed.
        if (document.querySelector('div.U04fid') && document.querySelector('div.U04fid').childElementCount > 0) {
          // div.U04fid has at least one child element.
          sendMessage();
        }
      }
    }
    return false;
}

const observer = new MutationObserver(checkJoinees);
observer.observe(document.body, {
  childList: true,
  delay: 1000
});

function sendMessage() {
    chrome.runtime.sendMessage({
        txt: "A user has joined the call!",
        action: "people_joined"
    });
}

E questo è il nostro codice background.js:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "people_joined") {
      sendNotification("notif-id", message.txt);
    }
  });
  

function sendNotification(notificationId, message) {
    chrome.notifications.create(notificationId, {
      type: "basic",
      title: "A user joined the call",
      message: message,
      iconUrl: "./success.png"
    });
}

Proviamo a personalizzare il messaggio di notifica e a ottenere un ID notifica univoco. Per il messaggio di notifica, possiamo includere il nome dell'utente. Se ricordi un passaggio precedente, il nome dell'utente era visibile nell'attributo title dell'immagine. Pertanto, possiamo recuperare il nome del partecipante utilizzando document.querySelector('div.U04fid > img').getAttribute('title').

Per quanto riguarda l'ID notifica, possiamo recuperare l'ID scheda dello script dei contenuti e utilizzarlo come ID notifica. Ciò può essere ottenuto all'interno del nostro listener di eventi chrome.runtime.onMessage.addListener utilizzando sender.tab.id.

Infine, i nostri file dovrebbero avere un aspetto simile a questo:

manifest.json

{
    "name": "Meet Joinees Notifier",
    "version": "1.0",
    "manifest_version": 3,
    "description": "Adds the ability to receive a notification when a participant joins a Google Meet",
    "author": "<YOUR_EMAIL>",
    "content_scripts": [
        {
          "matches": ["https://meet.google.com/*"],
          "js": ["content.js"]
        }
    ],
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
            "notifications"
    ]
}

content.js

function checkJoinees(mutations) {
    for (const mutation of mutations) {
      if (mutation.type === 'childList') {
        // A child node was added or removed.
        if (document.querySelector('div.U04fid') && document.querySelector('div.U04fid').childElementCount > 0) {
            const name = document.querySelector('div.U04fid > img').getAttribute('title');
            sendMessage(name);
        }
      }
    }
    return false;
}

const observer = new MutationObserver(checkJoinees);
observer.observe(document.body, {
  childList: true,
  delay: 1000
});

function sendMessage(name) {
    const joinee = (name === null ? 'Someone' : name),
        txt = `${joinee} has joined the call!`;

    chrome.runtime.sendMessage({
        txt,
        action: "people_joined",
    });
}

background.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "people_joined") {
      sendNotification("" + sender.tab.id, message.txt); // We are casting this to string as notificationId is expected to be a string while sender.tab.id is an integer.
    }
  });
  

function sendNotification(notificationId, message) {
    chrome.notifications.create(notificationId, {
      type: "basic",
      title: "A user joined the call",
      message: message,
      iconUrl: "./success.png"
    });
}

7. Complimenti

In breve tempo siamo riusciti a creare un'estensione di Chrome con l'aiuto di Gemini. Che tu sia uno sviluppatore di estensioni di Chrome esperto o alle prime armi, Gemini può aiutarti a svolgere qualsiasi attività.

Ti consiglio di chiedere informazioni sulle diverse cose che puoi fare con un'estensione di Chrome. Esistono molte API da esplorare, come chrome.storage, alarms e così via. Se hai difficoltà, usa Gemini o la documentazione per capire cosa stai sbagliando o per trovare modi diversi per risolvere il problema.

Spesso è necessario modificare il prompt per ottenere l'aiuto necessario, ma possiamo farlo da una sola scheda che conserva tutto il nostro percorso contestuale.