Come scrivere un'estensione di Chrome: guida passo passo con codice di esempio

Pubblicato: 2022-04-10

Le estensioni del browser possono essere un ottimo modo per mettere a frutto le tue capacità di programmazione e creare qualcosa che ti permetta di svolgere attività ripetitive con pochi clic. Se vuoi raggiungere questo obiettivo, imparare a scrivere un'estensione di Chrome è un ottimo inizio.

Google Chrome fornisce molte API diverse ai suoi sviluppatori di estensioni, come l'aggiunta di una nuova pagina, popup, la creazione di notifiche, l'impostazione di un motore di ricerca predefinito o persino la creazione di una voce del menu contestuale (il menu che viene visualizzato quando si fa clic con il pulsante destro del mouse su una pagina).

Le possibilità sono illimitate, da un'estensione che rende "Hello World!" a un'estensione che ti consente di fare uno screenshot della pagina web.

Sommario:

La struttura dell'estensione
Caricamento dell'estensione
Aggiunta di un'interfaccia utente popup
Utilizzando l'API delle notifiche
Aggiunta di una voce di menu contestuale
Utilizzo dell'API di archiviazione per archiviare i dati
Distribuzione dell'estensione

Come creare un'estensione #Google #Chrome: guida passo passo per principianti

Fare clic per twittare

In questo tutorial, ti mostreremo come scrivere un'estensione Chrome che invia notifiche al browser da un menu popup. Utilizzeremo anche il menu contestuale e le API di archiviazione dei dati per trarne il massimo. Lo chiamiamo Notifica! con un punto esclamativo!

Il codice dell'estensione è pubblico su GitHub, quindi sentiti libero di eseguire il fork e usarlo.

Come scrivere un'estensione Chrome: la struttura

Prima di andare avanti, dovresti esaminare la documentazione per sviluppatori di Google Chrome per conoscere lo sviluppo delle estensioni di Chrome in generale.

Inoltre, se stai cercando di scrivere un'estensione di Chrome per il Chrome Web Store, dai un'occhiata alla loro politica univoca.

Iniziamo creando una nuova cartella denominata notify sul tuo dispositivo. Questa cartella conterrà tutto ciò che farà parte della tua estensione.

Ora devi creare un file manifest che conterrà tutte le informazioni sulla nostra estensione. Crea un file chiamato manifest.json e includi il codice seguente:

 { "name" : "Notify!" , "description" : "A Google Chrome extension!" , "version" : "1.0" , "manifest_version" : 3 , "icons" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } }
 Linguaggio del codice: JSON / JSON con commenti ( json )

Come puoi vedere, finora contiene solo meta-informazioni sulla tua estensione, come nome, descrizione e versione. manifest_version indica a Chrome quale versione dell'API delle estensioni stai utilizzando.

Caricamento dell'estensione

Dopo aver posizionato il file manifest, puoi caricare la tua estensione nel browser Chrome:

Caricamento di un'estensione su Google Chrome

Apri la pagina Gestione estensioni navigando su chrome://extensions oppure puoi anche aprirla dal menu Estensioni nelle impostazioni.

Una volta lì, abilita la modalità sviluppatore e usa il pulsante Carica decompresso per selezionare la directory dell'estensione.

Guarda la tua estensione! Ora che la tua estensione è stata caricata, puoi migliorarla passo dopo passo e osservare le modifiche.

Assicurati di aggiungere un'icona per la tua estensione alle assets/icons/ cartella, altrimenti apparirà un'icona predefinita.

Aggiunta di un'interfaccia utente popup

Continuiamo aggiungendo un'interfaccia utente all'estensione da cui le persone possono interagire con le opzioni fornite.

Esistono diversi modi per farlo, come aggiungere un'intera pagina, ma un popup è solitamente la strada da percorrere per la maggior parte delle estensioni.

Per aggiungere un popup all'estensione, dovrai aggiungerlo al tuo file manifest.json :

 "action" : { "default_popup" : "popup.html" , "default_icon" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } },
 Linguaggio del codice: JavaScript ( javascript )

Con questo, dici all'estensione la posizione del file HTML del tuo popup e le icone predefinite. Questa è solo l'icona predefinita poiché l'API ti consente di cambiare l'icona in movimento. Ad esempio, se crei un test di PageSpeed di Google, è possibile visualizzare icone diverse sul sito Web in base al ranking delle pagine.

Popup dell'estensione di Google Chrome

Ora puoi aggiungere il codice HTML del tuo popup al file, come facciamo nel nostro esempio:

 <!DOCTYPE html > < html > < head > < link rel = "stylesheet" href = "assets/css/popup.css" > </ head > < body > < div id = "notify-wrapper" > < div id = "notify-header" > < h1 > Notify! </ h1 > </ div > < div id = "notify-containers" > < div class = "notify-form" > < label for = "text" > Notification </ label > < textarea name = "text" id = "notify-text" placeholder = "Let's notify!" > </ textarea > </ div > < div class = notify-buttons > < p > Total: < span id = "notify-count" > </ span > </ p > < button class = "button" id = "notify-reset" > Reset </ button > < button class = "button primary" id = "notify-button" > Notify! </ button > </ div > </ div > </ div > < script src = "assets/js/popup.js" > </ script > </ body > </ html >
 Linguaggio codice: HTML, XML ( xml )

Questo file HTML si collega anche a un foglio di stile e uno script per aggiungere stile e funzionalità al nostro popup.

Se stai seguendo, puoi ottenere il codice CSS da qui. Aggiungeremo JavaScript al file più avanti in questo tutorial.

Finora, hai creato un'estensione di Google Chrome con un popup e ci sono volute solo poche righe di codice. Come dicevamo all'inizio, creare un'estensione per Google Chrome è molto semplice!

Andando avanti in questo tutorial, aggiungeremo funzionalità a questa estensione e la renderemo più di un semplice segnaposto.

Utilizzando l'API delle notifiche

Come suggerisce il nome dell'estensione, si tratta di un'estensione per le notifiche, quindi aggiungiamone qualcuna!

Prima di utilizzare alcune delle API, devi specificare le autorizzazioni per esse nel file manifest.json . Uno dei motivi per farlo è che gli utenti dell'estensione sappiano quali autorizzazioni richiede l'estensione prima di installarle.

Per le notifiche, procedi in questo modo:

 "permissions" : [ "notifications" ],
 Linguaggio del codice: JavaScript ( javascript )

È inoltre necessario aggiungere un addetto al servizio all'interno per inviare notifiche. Per questo, devi aggiungere questo al tuo manifest:

 "background" : { "service_worker" : "background.js" },
 Linguaggio del codice: JavaScript ( javascript )

È necessario un addetto al servizio per l'API di notifica poiché non può essere utilizzata direttamente dal file popup.js .

Nel file background.js , devi aggiungere il seguente codice per inviare una notifica:

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : data.message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); } });
 Linguaggio del codice: JavaScript ( javascript )

Qui, utilizziamo il listener di eventi onMessage per ottenere il trigger per inviare notifiche dal popup.

Usiamo anche il metodo create per creare una nuova notifica. Le notifiche possono essere di vario tipo, ma qui viene utilizzato il tipo “base”. Dovresti dare un'occhiata a tutte le opzioni disponibili.

Ora che il metodo create è a posto, puoi attivarlo dal file popup.js questo modo:

 const text = document .getElementById( 'notify-text' ); const notify = document .getElementById( 'notify-button' ); notify.addEventListener( 'click' , () => { chrome.runtime.sendMessage( '' , { type : 'notification' , message : text.value }); } );
 Linguaggio del codice: JavaScript ( javascript )

Qui, l'azione sendMessage viene utilizzata per attivare la notifica. E voilà! Abbiamo un'estensione che attiva una notifica.

Assicurati di utilizzare l'ultima versione di Google Chrome e di aver concesso le autorizzazioni per attivare le notifiche. In breve, non essere come me, che ho passato ore a cercare di capire perché le notifiche non venivano visualizzate.

Aggiunta di una voce di menu contestuale

Come accennato nell'introduzione, il menu contestuale è il menu che compare facendo clic con il tasto destro:

Ci possono essere molte ragioni per cui la tua estensione potrebbe avere una voce del menu di scelta rapida. Un esempio importante è selezionare del testo con il cursore e quindi cercarlo su Google.

Puoi aggiungere tutti gli elementi che desideri al menu di scelta rapida, ma se la tua estensione aggiunge più di un elemento, questi verranno compressi sotto un elemento principale.

Per questo, devi anche aggiungere le autorizzazioni al tuo file manifest:

 "permissions" : [ "contextMenus" , "notifications" ],
 Linguaggio del codice: JavaScript ( javascript )

Ora che hai aggiunto le autorizzazioni per contextMenus , puoi aggiungerlo al tuo file background.js :

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { notify( data.message ); } }); chrome.runtime.onInstalled.addListener( () => { chrome.contextMenus.create({ id : 'notify' , title : "Notify!: %s" , contexts :[ "selection" ] }); }); chrome.contextMenus.onClicked.addListener( ( info, tab ) => { if ( 'notify' === info.menuItemId ) { notify( info.selectionText ); } } ); const notify = message => { return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 Linguaggio del codice: JavaScript ( javascript )

Il codice precedente include anche il codice del passaggio precedente per l'attivazione di una notifica che ora è astratta nella funzione di notify in modo che possa essere riutilizzata.

L'azione contextMenus.create viene utilizzata per aggiungere un elemento al menu di scelta rapida. È agganciato a onInstalled poiché deve essere inizializzato solo una volta.

Successivamente, analogamente al passaggio precedente, utilizziamo contextMenus.onClicked per acquisire il clic e attivare una notifica.

Può essere un modo molto ingegnoso per raggruppare le funzionalità della tua estensione. Se dai un'occhiata alle estensioni utilizzate sul tuo browser, troverai molte estensioni che utilizzano abilmente questo spazio per migliorare l'esperienza della loro estensione.

Utilizzo dell'API di archiviazione per archiviare i dati

Ora che la tua estensione ha alcune funzionalità da mostrare, diamo un'occhiata all'API di archiviazione. L'API di archiviazione è utile quando desideri archiviare alcuni dati utente nel tuo interno.

Esistono due tipi di API di archiviazione: locale e di sincronizzazione. L'archiviazione locale, come suggerisce il nome, viene salvata nel browser e rimane locale. In confronto, l'archiviazione sincronizzata consente di sincronizzare i dati tra browser utilizzando lo stesso account Google. Per i nostri scopi, utilizziamo l'archiviazione locale.

Innanzitutto, devi aggiungere l'autorizzazione di archiviazione al tuo file manifest:

 "permissions" : [ "contextMenus" , "notifications" , "storage" ],
 Linguaggio del codice: JavaScript ( javascript )

Successivamente, puoi utilizzare storage, i metodi storage.local.get e storage.local.set , per recuperare o salvare i dati.

Puoi aggiungere il seguente codice al tuo file popup.js :

 const reset = document .getElementById( 'notify-reset' ); const counter = document .getElementById( 'notify-count' ); chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; counter.innerHTML = value; } ); chrome.storage.onChanged.addListener( ( changes, namespace ) => { if ( changes.notifyCount ) { let value = changes.notifyCount.newValue || 0 ; counter.innerHTML = value; } }); reset.addEventListener( 'click' , () => { chrome.storage.local.clear(); text.value = '' ; } );
 Linguaggio del codice: JavaScript ( javascript )

Questo codice fa due cose:

Aggiorna il conteggio delle notifiche nel popup quando apriamo il popup o cambia il valore di archiviazione. Per ascoltare la modifica dello spazio di archiviazione, viene utilizzato storage.onChanged .
In parte, cancelliamo la memoria quando l'utente fa clic sul pulsante di ripristino.

Il codice sopra fa il lavoro di ottenere l'ultimo conteggio e lo aggiorna. Ora la configurazione dei dati rimane. Per questo, puoi aggiornare la nostra funzione di notify con questo:

 const notify = message => { chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; chrome.storage.local.set({ 'notifyCount' : Number ( value ) + 1 }); } ); return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 Linguaggio del codice: JavaScript ( javascript )

Qui, otteniamo gli ultimi dati di archiviazione e quindi li aggiorniamo con l'ultimo conteggio.

Allo stesso modo, puoi utilizzare l'API chrome.storage.sync per sincronizzare le opzioni tra i browser.

Distribuzione dell'estensione

Congratulazioni! L'hai fatto! Hai creato correttamente un'estensione di Google Chrome che utilizza molte parti diverse dell'esperienza di Google Chrome, tra cui:

Popup
API di notifica
Menù contestuale
API di archiviazione

Se vuoi vedere il codice per questa estensione, puoi ottenerlo in questo repository GitHub di notifica.

A tutti noi piace mostrare al mondo il grande lavoro che facciamo. Una volta completata l'estensione, puoi inviarla al Chrome Web Store per il download da parte di altri utenti di Chrome.

Se desideri esplorare altre opzioni che Google Chrome offre agli sviluppatori di estensioni, ti consigliamo di controllare la documentazione ufficiale.

Spero che questo articolo abbia fatto la sua parte insegnandoti come scrivere un'estensione di Chrome. Siamo entusiasti di vedere cosa puoi creare, quindi facci sapere delle tue avventure con lo sviluppo dell'estensione di Google Chrome nella sezione commenti qui sotto.