Apprendi le nozioni di base dello sviluppo di estensioni di Chrome creando la tua prima estensione Hello World.
Panoramica
Creerai un esempio "Hello World", caricherai l'estensione localmente, individuerai i log ed esplora altri consigli.
Hello World
Questa estensione mostrerà "Hello Extensions" quando l'utente fa clic sull'icona della barra degli strumenti dell'estensione.
Per iniziare, crea una nuova directory in cui archiviare i file delle estensioni. Se preferisci, puoi scaricare il codice sorgente completo da GitHub.
Quindi, crea un nuovo file in questa directory denominata manifest.json. Questo file JSON descrive le funzionalità
e la configurazione dell'estensione. Ad esempio, la maggior parte dei file manifest contiene una chiave "action" che dichiara l'immagine che Chrome deve utilizzare come icona di azione dell'estensione e la pagina HTML da mostrare in un popup quando l'utente fa clic sull'icona di azione dell'estensione.
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
Scarica l'icona nella tua directory e assicurati di cambiarne il nome in modo che corrisponda al contenuto della chiave "default_icon".
Per il popup, crea un file denominato hello.html e aggiungi il seguente codice:
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
L'estensione ora mostra un popup quando l'utente fa clic sull'icona di azione dell'estensione (icona della barra degli strumenti). Puoi testarlo in Chrome caricandolo localmente. Assicurati che tutti i file siano salvati.
Carica un'estensione non pacchettizzata
Per caricare un'estensione non pacchettizzata in modalità sviluppatore:
- Vai alla pagina Estensioni inserendo
chrome://extensionsin una nuova scheda. (Per impostazione predefinita, gli URLchrome://non sono collegabili.)- In alternativa, fai clic sul pulsante del puzzle del menu Estensioni e seleziona Gestisci estensioni in fondo al menu.
- In alternativa, fai clic sul menu Chrome, passa il mouse sopra Altri strumenti e seleziona Estensioni.
- Attiva la modalità sviluppatore facendo clic sul pulsante di attivazione/disattivazione accanto a Modalità sviluppatore.
- Fai clic sul pulsante Carica file non pacchettizzato e seleziona la directory dell'estensione.
Pagina Estensioni (chrome://extensions)
Fatto! L'estensione è stata installata. Se nel file manifest non sono incluse icone di estensione, ne verrà creata un'icona generica.
Blocca l'estensione
Per impostazione predefinita, quando carichi l'estensione localmente, verrà visualizzata nel menu delle estensioni (
). Blocca l'estensione sulla barra degli strumenti per accedervi rapidamente durante lo sviluppo.
Fai clic sull'icona di azione dell'estensione (icona della barra degli strumenti); verrà visualizzato un popup.
Ricarica l'estensione
Torna al codice e modifica il nome dell'estensione in "Hello Extensions of the world!" nel file manifest.
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
...
}
Dopo aver salvato il file, per vedere la modifica nel browser devi anche aggiornare l'estensione. Vai alla pagina Estensioni e fai clic sull'icona di aggiornamento accanto all'opzione di attivazione/disattivazione:
Quando ricaricare l'estensione
La tabella seguente mostra quali componenti devono essere ricaricati per visualizzare le modifiche:
| Componente estensione | Richiede il ricaricamento dell'estensione |
|---|---|
| Il file manifest | Sì |
| Service worker | Sì |
| Script di contenuti | Sì (più la pagina host) |
| Il popup | No |
| Pagina Opzioni | No |
| Pagine HTML di altre estensioni | No |
Trovare i log e gli errori della console
Log della console
Durante lo sviluppo, puoi eseguire il debug del codice accedendo ai log della console del browser. In questo caso, individueremo i log per il popup. Inizia aggiungendo un tag script a hello.html.
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>
Crea un file popup.js e aggiungi il seguente codice:
console.log("This is a popup!")
Per visualizzare il messaggio registrato nella console:
- Apri il popup.
- Fai clic con il tasto destro del mouse sul popup.
- Seleziona Ispeziona.
Ispezione di un popup. - In DevTools, vai al riquadro Console.
Ispezione di un popup
Log degli errori
Ora interrompiamo l'estensione. A questo scopo, rimuoviamo la citazione di chiusura in popup.js:
console.log("This is a popup!) // ❌ broken code
Vai alla pagina Estensioni e apri il popup. Viene visualizzato il pulsante Errori.
Fai clic sul pulsante Errori per scoprire di più sull'errore:
Per scoprire di più sul debug del service worker, della pagina delle opzioni e degli script di contenuti, consulta Estensioni di debug.
Strutturare un progetto di estensione
Esistono molti modi per strutturare un progetto di estensione. Tuttavia, l'unico prerequisito è posizionare il file manifest.json nella directory root dell'estensione, come nell'esempio seguente:
Utilizza TypeScript
Se sviluppi utilizzando un editor di codice come VSCode o Atom, puoi utilizzare il pacchetto npm chrome-types per sfruttare il completamento automatico per l'API di Chrome. Questo pacchetto npm viene aggiornato automaticamente quando il codice sorgente di Chromium cambia.
🚀 Tutto pronto per iniziare a creare?
Scegli uno dei seguenti tutorial per iniziare il percorso di apprendimento delle estensioni.
| Estensione | Cosa imparerai a fare |
|---|---|
| Eseguire script su ogni pagina | Per inserire automaticamente un elemento in ogni pagina. |
| Inserisci script nella scheda attiva | Per eseguire il codice nella pagina corrente dopo aver fatto clic sull'azione dell'estensione. |
| Gestire le schede | Per creare un popup che gestisca le schede del browser. |
| Gestire gli eventi con i Service worker | Il modo in cui un service worker di estensione gestisce gli eventi. |