Esegui script su ogni pagina

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?

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.

• Pubblicare nel Chrome Web Store
• Informazioni sugli script dei contenuti

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:

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.