Crea la tua prima estensione che inserisca un nuovo elemento nella pagina.
Panoramica
Questo tutorial crea un'estensione che aggiunge il tempo di lettura previsto a qualsiasi estensione di Chrome e pagina della documentazione del Chrome Web Store.
In questa guida, spiegheremo i seguenti concetti:
- Il file manifest dell'estensione.
- Le dimensioni delle icone utilizzate da un'estensione.
- Come inserire il codice nelle pagine utilizzando gli script di contenuti.
- Come utilizzare i pattern di corrispondenza.
- Autorizzazioni delle estensioni.
Prima di iniziare
Questa guida presuppone che tu abbia esperienza di base di sviluppo web. Ti consigliamo di consultare Tutorial Hello World per un'introduzione al flusso di lavoro per lo sviluppo delle estensioni.
Crea l'estensione
Per iniziare, crea una nuova directory denominata reading-time in cui inserire i file dell'estensione. Se
puoi scaricare il codice sorgente completo da GitHub.
Passaggio 1: aggiungi informazioni sull'estensione
Il file JSON manifest è l'unico file richiesto. Contiene informazioni importanti
. Crea un file manifest.json nella root del progetto e aggiungi il codice seguente:
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
Queste chiavi contengono metadati di base per l'estensione. Controllano il modo in cui l'estensione viene visualizzata nella pagina delle estensioni e, quando pubblicata, sul Chrome Web Store. Per saperne di più, dai un'occhiata alle
"name", "version" e "description" nella
Pagina Panoramica del file manifest.
💡 Altre informazioni sul file manifest dell'estensione
- Deve trovarsi nella principale del progetto.
- Le uniche chiavi obbligatorie sono
"manifest_version","name"e"version". - Supporta i commenti (
//) durante lo sviluppo, che devono essere rimossi prima di caricare il codice nel Chrome Web Store.
Passaggio 2: fornisci le icone
Ma perché hanno bisogno di icone? Sebbene le icone siano facoltative in fase di sviluppo, necessaria se prevedi di distribuire la tua estensione sul Chrome Web Store. Appaiono anche in altri come la pagina Gestione delle estensioni.
Crea una cartella images e posiziona le icone al suo interno. Puoi scaricare le icone su
GitHub. Poi, aggiungi il codice evidenziato al file manifest per dichiarare le icone:
{
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Consigliamo di utilizzare i file PNG, ma sono consentiti altri formati file, ad eccezione dei file SVG.
💡 Dove vengono visualizzate queste icone di dimensioni diverse?
| Dimensioni icona | Utilizzo delle icone |
|---|---|
| 16x16 | Favicon nelle pagine dell'estensione e nel menu contestuale. |
| 32x32 | I computer Windows spesso richiedono queste dimensioni. |
| 48x48 | Viene visualizzata nella pagina Estensioni. |
| 128x128 | Viene visualizzata al momento dell'installazione e nel Chrome Web Store. |
Passaggio 3: dichiara lo script dei contenuti
Le estensioni possono eseguire script che leggono e modificano i contenuti di una pagina. Questi si chiamano contenuti script. Vivono in un mondo isolato, ossia possono apportare modifiche al proprio ambiente JavaScript senza entrare in conflitto con la pagina host o con altre estensioni. script di contenuti.
Aggiungi il seguente codice a manifest.json per registrare uno script di contenuti denominato
content.js.
{
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
Il campo "matches" può avere uno o più pattern di corrispondenza. che consentono al browser
identificare in quali siti inserire gli script di contenuti. I pattern di corrispondenza sono composti da tre parti:
<scheme>://<host><path>. Possono contenere "*" caratteri.
💡 Questa estensione mostra un avviso di autorizzazione?
Quando un utente installa un'estensione, il browser lo informa su cosa può fare l'estensione. Gli script di contenuti richiedono l'autorizzazione per l'esecuzione su siti che soddisfano i criteri del pattern di corrispondenza.
In questo esempio, l'utente vedrà il seguente avviso di autorizzazione:
Per approfondire le autorizzazioni delle estensioni, vedi Dichiarare le autorizzazioni e avvisare gli utenti.
Passaggio 4: calcola e inserisci il tempo di lettura
Gli script di contenuti possono utilizzare il DOM (Document Object Model) standard per leggere e modificare
contenuti di una pagina. L'estensione verifica innanzitutto se la pagina contiene l'elemento <article>.
Quindi, conta tutte le parole all'interno dell'elemento e crea un paragrafo che mostra il totale
l'ora di lettura.
Crea un file denominato content.js all'interno di una cartella denominata scripts e aggiungi il seguente codice:
const article = document.querySelector("article");
// `document.querySelector` may return null if the selector doesn't match anything.
if (article) {
const text = article.textContent;
const wordMatchRegExp = /[^\s]+/g; // Regular expression
const words = text.matchAll(wordMatchRegExp);
// matchAll returns an iterator, convert to array to get word count
const wordCount = [...words].length;
const readingTime = Math.round(wordCount / 200);
const badge = document.createElement("p");
// Use the same styling as the publish information in an article's header
badge.classList.add("color-secondary-text", "type--caption");
badge.textContent = `⏱️ ${readingTime} min read`;
// Support for API reference docs
const heading = article.querySelector("h1");
// Support for article docs with date
const date = article.querySelector("time")?.parentNode;
(date ?? heading).insertAdjacentElement("afterend", badge);
}
💡 JavaScript interessante utilizzato in questo codice
- Normale
espressioni utilizzate per contare solo le parole all'interno dell'elemento
<article>. insertAdjacentElement()utilizzato per inserire il nodo del tempo di lettura dopo l'elemento.- La proprietà classList utilizzata per aggiungere nomi delle classi CSS all'attributo classe dell'elemento.
- Concatenamento facoltativo utilizzato per accedere a una proprietà dell'oggetto che potrebbe essere non definita o nulla.
- La coalescenza originale restituisce
<heading>se<date>è nullo o non definito.
Verifica che funzioni
Verifica che la struttura dei file del tuo progetto abbia il seguente aspetto:
Caricare l'estensione localmente
Per caricare un'estensione non pacchettizzata in modalità sviluppatore, segui i passaggi in Sviluppo Nozioni di base.
Apri un'estensione o la documentazione del Chrome Web Store
Ecco alcune pagine che puoi aprire per vedere quanto tempo ci vorrà per la lettura di ciascun articolo.
Dovrebbe avere il seguente aspetto:
🎯 Potenziali miglioramenti
In base a quanto hai appreso oggi, prova a implementare una delle seguenti opzioni:
- Aggiungi un altro pattern di corrispondenza nel file manifest.json per supportare altri sviluppatori di Chrome come ad esempio Chrome DevTools o Workbox.
- Aggiungi un nuovo script di contenuti che calcoli il tempo di lettura di uno dei tuoi blog preferiti o siti di documentazione.
Continua a creare
Complimenti per aver completato questo tutorial 🎉. Continua a sviluppare le tue competenze completando tutorial su questa serie:
| Estensione | Cosa imparerai a fare |
|---|---|
| Modalità Niente distrazioni | Eseguire il codice nella pagina corrente dopo aver fatto clic sull'azione di estensione. |
| Gestione schede | Per creare un popup per la gestione delle schede del browser. |
Continua a esplorare
Ci auguriamo che la creazione di questa estensione di Chrome sia stata di tuo gradimento e che non vediamo l'ora di continuare a utilizzare Chrome percorso di apprendimento per lo sviluppo. Ti consigliamo il seguente percorso di apprendimento:
- La guida per gli sviluppatori contiene decine di link aggiuntivi alla documentazione pertinente alla creazione di estensioni avanzate.
- Le estensioni hanno accesso ad API potenti oltre a quelle disponibili sul web aperto. La documentazione delle API di Chrome illustra ogni API.