Apprendi le nozioni di base sullo sviluppo delle estensioni di Chrome creando la tua prima estensione Hello World.
Panoramica
Creerai "Hello World" Ad esempio, carica l'estensione localmente, individua i log ed esplora altri suggerimenti.
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 l'intera da GitHub.
Quindi, crea un nuovo file in questa directory denominato manifest.json. Questo file JSON descrive i tipi di estensione
funzionalità e configurazione. Ad esempio, la maggior parte dei file manifest contiene una chiave "action" che dichiara
l'immagine che Chrome deve usare come icona di azione dell'estensione e la pagina HTML da mostrare in un popup quando
viene fatto 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 directory e assicurati di modificarne il nome in modo che corrisponda a quello presente nella chiave "default_icon".
Per il popup, crea un file denominato hello.html e aggiungi il codice seguente:
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
L'estensione ora visualizza un popup quando l'utente fa clic sull'icona di azione dell'estensione (icona della barra degli strumenti). Puoi testare in Chrome caricandola localmente. Assicurati che tutti i file siano stati 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,chrome://URL non è collegabile.- In alternativa, fai clic sul pulsante 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 sull'opzione di attivazione/disattivazione accanto alla Modalità sviluppatore.
- Fai clic sul pulsante Carica non pacchettizzata e seleziona la directory dell'estensione.
. Pagina Estensioni (chrome://extensions)
Fatto! L'estensione è stata installata correttamente. Se non sono state incluse icone di estensioni in manifest, verrà creata un'icona generica per l'estensione.
Blocca l'estensione
Per impostazione predefinita, quando carichi l'estensione localmente, questa viene visualizzata nel menu delle estensioni (
). Blocca l'estensione nella barra degli strumenti per accedervi rapidamente durante lo sviluppo.
Fai clic sull'icona di azione dell'estensione (icona della barra degli strumenti); dovrebbe apparire un popup.
Ricarica l'estensione
Torna al codice e cambia 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 dovrai anche aggiornare l'estensione. Vai alla pagina Estensioni e fai clic sull'icona di aggiornamento accanto al pulsante di attivazione/disattivazione on/off:
Quando ricaricare l'estensione
La tabella seguente mostra quali componenti devono essere ricaricati per vedere le modifiche:
| Componente estensione | Richiede il ricaricamento dell'estensione |
|---|---|
| Il file manifest | Sì |
| Service worker | Sì |
| Script di contenuti | Sì (oltre alla pagina host) |
| Il popup | No |
| Pagina Opzioni | No |
| Altre pagine HTML di estensioni | No |
Trova 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,
individuerà i log per il popup. Per iniziare, aggiungi 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 codice seguente:
console.log("This is a popup!")
Per visualizzare questo messaggio dopo aver eseguito l'accesso 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. Possiamo farlo rimuovendo la virgoletta di chiusura in popup.js:
console.log("This is a popup!) // ❌ broken code
Vai alla pagina Estensioni e apri il popup. Verrà visualizzato il pulsante Errori.
Per saperne di più sull'errore, fai clic sul pulsante Errori:
Per scoprire di più sul debug del service worker, della pagina delle opzioni e degli script dei contenuti, consulta Debug .
Strutturare un progetto di estensione
Esistono molti modi per strutturare un progetto di estensione; tuttavia, l'unico prerequisito è inserire il il file manifest.json nella directory root dell'estensione, come nell'esempio seguente:
Utilizzare TypeScript
Se stai sviluppando utilizzando un editor di codice come VSCode o Atom, puoi usare il comando npm pacchetto chrome-types per sfruttare il completamento automatico per Chrome di terze parti. Questo pacchetto npm viene aggiornato automaticamente quando il codice sorgente di Chromium modifiche.
🚀 Tutto pronto per iniziare a creare?
Scegli uno dei seguenti tutorial per iniziare il tuo percorso di apprendimento con le estensioni.
| Estensione | Cosa imparerai a fare |
|---|---|
| Eseguire script su ogni pagina | Per inserire automaticamente un elemento in ogni pagina. |
| Inserire gli script nella scheda Attiva | Eseguire il codice nella pagina corrente dopo aver fatto clic sull'azione di estensione. |
| Gestire le schede | Per creare un popup per la gestione delle schede del browser. |
| Gestire gli eventi con i service worker | Il modo in cui un service worker di estensione gestisce gli eventi. |