Cum se scrie și se creează o extensie Chrome de bază

Come scrivere e creare un’estensione Chrome di base

⌛ Reading Time: 4 minutes

Chrome è facilmente il browser web più popolare del pianeta. Secondo il sondaggio sulla quota di mercato dei browser desktop di Statcounter, Chrome porta a casa un ben il 65% del mercato nei browser desktop a partire dalla fine del 2017.

Con quel tipo di potere di definizione del mercato, progettare per Chrome è diventata una priorità. Lo stesso vale per le estensioni: Chrome offre di gran lunga la più ampia base di utenti per le estensioni, con decine di migliaia di estensioni, temi e app che popolano il Chrome Web Store.

Se vuoi approfittare della tendenza, puoi creare la tua estensione Chrome di base. Avrai solo bisogno di alcune abilità di sviluppo web di base (HTML, CSS e Javascript) e un cucchiaino di JSON per legare tutto insieme.

In questo post esamineremo la struttura di base richiesta per creare un’estensione Chrome di base. Per avere una visione approfondita delle possibilità disponibili, controlla Guida all’estensione per sviluppatori di Chrome.

Scrittura di un’estensione Chrome di base: Manifest Destiny

Per questo tutorial creeremo un’estensione Chrome di base che visualizza un semplice messaggio popup quando si fa clic. Avremo bisogno di un paio di file importanti: un’icona (“icon.png”), un file HTML (“popup.html”) e l’importantissimo manifest (“manifest.json”). Tutti questi file risiederanno all’interno di una directory con il nome della tua estensione. In questo caso si chiama “Hello World”.

Un’estensione di Chrome è definita dal suo manifest. Questo frammento di JSON mostra a Chrome come interpretare l’estensione, quali file caricare e come interagire con l’utente.

Il file manifest per la nostra estensione di base è simile a questo:

Questo file manifest inserirà un’icona nella barra degli strumenti dell’utente che, se cliccata, carica il contenuto del file denominato “popup.html”. Quello che segue è il nocciolo del resto dei contenuti:

  • manifest_version indica a Chrome la versione del markup manifest con cui stai lavorando. Per le estensioni moderne, dovrai impostarlo su 2.
  • name mostra il nome che l’estensione mostrerà nello store di Chrome e “chrome: // extensions”.
  • description mostra il testo descrittivo visualizzato in “chrome: // extensions”.
  • browser action carica l’icona nella barra degli strumenti. Consente inoltre all’estensione di rispondere all’input dell’utente visualizzando una descrizione comando, un popup o un badge. Dai un’occhiata a elenco completo di tutto ciò che “browser_action” può fare.
  • default_icon mostra il percorso dell’icona dalla directory dell’estensione.
  • default_popup mostra il percorso del file che verrà caricato quando si fa clic sull’icona dell’estensione.
  • permissions limita la regione funzionale dell’estensione. activeTab è il più comune, consentendo all’estensione di accedere alla scheda in primo piano. Google fornisce un elenco di tutte le autorizzazioni che un’estensione può richiedere.

Se desideri un’analisi approfondita di tutto ciò che il manifest di un’estensione di Chrome può dichiarare, dai un’occhiata Documenti di Google sui manifesti delle estensioni.

Scrittura di un’estensione Chrome di base: popup

Ora che abbiamo scritto il nostro manifest, possiamo capire cosa mostrerà la nostra estensione. Dipende dal nostro file “popup.html”, che verrà visualizzato al caricamento dell’estensione. Ecco cosa useremo per questo progetto:

Come puoi vedere, questo renderà del testo in stile con CSS. Se vuoi aggiungere Javascript o CSS esterno alla tua estensione, è necessario dichiarare gli script nel manifest, sotto il content_scripts chiave. Una volta che hai fatto riferimento a questo nel manifest, puoi caricare quegli script come faresti normalmente.

Scrittura di un’estensione Chrome di base: caricamento in Chrome

Dopo aver scritto il codice di base per la nostra estensione e aver trovato un’icona adatta, possiamo caricarlo in Chrome.

1. Vai a “chrome: // extensions” e attiva la “Modalità sviluppatore” selezionando la casella di controllo in alto a destra.

build-a-chrome-extension-load-extension-1

2. Fare clic sul pulsante “Carica estensione decompressa …” e selezionare la directory dell’estensione.

build-a-chrome-extension-load-extension-2

3. Una volta caricata l’estensione, vedrai la sua icona nella barra dei menu.

build-a-chrome-extension-load-extension-3

4. Fare clic sull’estensione per vedere il suo effetto (molto semplice).

build-a-chrome-extension-load-extension-4

Conclusione: espansione dell’estensione di Chrome

Una volta che hai finito con la tua estensione e sei pronto per la pubblicazione, dovrai creare un account sviluppatore Chrome. Non è un processo esattamente semplice, ma Google lo fornisce istruzioni complete per pubblicare la tua estensione di Chrome qui.

Ovviamente c’è molto di più che puoi fare con la tua estensione di Chrome, ma questo va un po ‘oltre lo scopo di questo post. Se vuoi saperne di più su tutto ciò che possono fare le estensioni di Chrome, dai un’occhiata a Google Guida all’estensione per sviluppatori di Chrome.