Voer scripts uit op elke pagina

Maak uw eerste extensie die een nieuw element op de pagina invoegt.

Overzicht

In deze zelfstudie wordt een extensie gebouwd die de verwachte leestijd toevoegt aan elke Chrome-extensie en de documentatiepagina van de Chrome Web Store.

Leestijdverlenging op de welkomstpagina van de extensie
Leestijdverlenging op de welkomstpagina van de extensie.

In deze handleiding gaan we de volgende concepten uitleggen:

  • Het extensiemanifest.
  • Welke pictogramgroottes een extensie gebruikt.
  • Hoe u code in pagina's kunt injecteren met behulp van inhoudsscripts .
  • Matchpatronen gebruiken.
  • Extensierechten.

Voordat je begint

In deze handleiding wordt ervan uitgegaan dat u over basiservaring op het gebied van webontwikkeling beschikt. We raden u aan de Hello world- tutorial te bekijken voor een inleiding tot de workflow voor het ontwikkelen van extensies.

Bouw de extensie

Maak om te beginnen een nieuwe map met de naam reading-time om de bestanden van de extensie te bewaren. Als u wilt, kunt u de volledige broncode downloaden van GitHub .

Stap 1: Voeg informatie over de extensie toe

Het manifest JSON-bestand is het enige vereiste bestand. Het bevat belangrijke informatie over de extensie. Maak een manifest.json bestand in de hoofdmap van het project en voeg de volgende code toe:

{
  "manifest_version": 3,
  "name": "Reading time",
  "version": "1.0",
  "description": "Add the reading time to Chrome Extension documentation articles"
}

Deze sleutels bevatten basismetagegevens voor de extensie. Ze bepalen hoe de extensie wordt weergegeven op de extensiepagina en, indien gepubliceerd, in de Chrome Web Store. Om dieper te duiken, bekijk de toetsen "name" , "version" en "description" op de overzichtspagina van Manifest .

💡Andere weetjes over het extensiemanifest

  • Het moet zich in de hoofdmap van het project bevinden.
  • De enige vereiste sleutels zijn "manifest_version" , "name" en "version" .
  • Het ondersteunt opmerkingen ( // ) tijdens de ontwikkeling, maar deze moeten worden verwijderd voordat u uw code naar de Chrome Web Store uploadt.

Stap 2: Geef de pictogrammen op

Dus waarom heb je pictogrammen nodig? Hoewel pictogrammen optioneel zijn tijdens de ontwikkeling, zijn ze vereist als u van plan bent uw extensie in de Chrome Web Store te distribueren. Ze verschijnen ook op andere plaatsen, zoals de pagina Extensiebeheer.

Maak een map images en plaats de pictogrammen erin. Je kunt de iconen downloaden op GitHub . Voeg vervolgens de gemarkeerde code toe aan uw manifest om pictogrammen te declareren:

{
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

Wij raden het gebruik van PNG-bestanden aan, maar andere bestandsformaten zijn toegestaan, behalve SVG-bestanden.

💡 Waar worden deze pictogrammen van verschillende grootte weergegeven?

Pictogramgrootte Pictogramgebruik
16x16 Favicon op de pagina's en het contextmenu van de extensie.
32x32 Windows-computers hebben vaak dit formaat nodig.
48x48 Wordt weergegeven op de pagina Extensies.
128x128 Wordt weergegeven bij installatie en in de Chrome Web Store.

Stap 3: Declareer het inhoudsscript

Extensies kunnen scripts uitvoeren die de inhoud van een pagina lezen en wijzigen. Dit worden inhoudsscripts genoemd. Ze leven in een geïsoleerde wereld , wat betekent dat ze wijzigingen kunnen aanbrengen in hun JavaScript-omgeving zonder conflicten met de inhoudsscripts van hun hostpagina of andere extensies.

Voeg de volgende code toe aan manifest.json om een ​​inhoudsscript met de naam content.js te registreren.

{
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": [
        "https://developer.chrome.com/docs/extensions/*",
        "https://developer.chrome.com/docs/webstore/*"
      ]
    }
  ]
}

Het veld "matches" kan een of meer matchpatronen bevatten. Hiermee kan de browser identificeren op welke sites de inhoudsscripts moeten worden geïnjecteerd. Overeenkomstpatronen bestaan ​​uit drie delen: <scheme>://<host><path> . Ze kunnen ' * '-tekens bevatten.

💡 Geeft deze extensie een toestemmingswaarschuwing weer?

Wanneer een gebruiker een extensie installeert, informeert de browser hem wat de extensie kan doen. Contentscripts vragen toestemming om te worden uitgevoerd op sites die voldoen aan de matchpatrooncriteria.

In dit voorbeeld ziet de gebruiker de volgende toestemmingswaarschuwing:

Toestemmingswaarschuwing die de gebruiker te zien krijgt bij het installeren van de leestijdextensie
Waarschuwing voor leestijdtoestemming.

Zie Machtigingen declareren en gebruikers waarschuwen voor meer informatie over extensiemachtigingen.

Stap 4: Bereken de leestijd en voer deze in

Contentscripts kunnen het standaard Document Object Model (DOM) gebruiken om de inhoud van een pagina te lezen en te wijzigen. De extensie controleert eerst of de pagina het <article> -element bevat. Vervolgens telt het alle woorden binnen dit element en wordt er een paragraaf gemaakt die de totale leestijd weergeeft.

Maak een bestand met de naam content.js in een map met de naam scripts en voeg de volgende code toe:

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);
}

💡 Interessant JavaScript dat in deze code wordt gebruikt

  • Reguliere expressies die worden gebruikt om alleen de woorden binnen het <article> -element te tellen.
  • insertAdjacentElement() gebruikt om het leestijdknooppunt na het element in te voegen.
  • De eigenschap classList die wordt gebruikt om CSS-klassenamen toe te voegen aan het elementklasse-attribuut.
  • Optionele ketening die wordt gebruikt om toegang te krijgen tot een objecteigenschap die mogelijk niet gedefinieerd of nul is.
  • Nullish coalesceren retourneert de <heading> als de <date> nul of ongedefinieerd is.

Test of het werkt

Controleer of de bestandsstructuur van uw project er als volgt uitziet:

De inhoud van de leestijdmap: manifest.json, content.js in de map scripts en de map afbeeldingen.

Laad uw extensie lokaal

Om een ​​uitgepakte extensie in de ontwikkelaarsmodus te laden, volgt u de stappen in Development Basics .

Open een extensie of Chrome Web Store-documentatie

Hier zijn een paar pagina's die u kunt openen om te zien hoe lang het duurt om elk artikel te lezen.

Het zou er zo uit moeten zien:

Leestijd loopt op de welkomstpagina
Extensie Welkomstpagina met de leestijdverlenging

🎯 Mogelijke verbeteringen

Probeer op basis van wat je vandaag hebt geleerd een van de volgende dingen te implementeren:

  • Voeg nog een overeenkomstpatroon toe in manifest.json om andere Chrome-ontwikkelaarspagina 's te ondersteunen, zoals bijvoorbeeld de Chrome DevTools of Workbox .
  • Voeg een nieuw inhoudsscript toe dat de leestijd voor al uw favoriete blogs of documentatiesites berekent.

Blijf bouwen

Gefeliciteerd met het voltooien van deze tutorial 🎉. Ga door met het opbouwen van je vaardigheden door andere tutorials over deze serie te voltooien:

Verlenging Wat je gaat leren
Focusmodus Om code uit te voeren op de huidige pagina nadat u op de extensieactie heeft geklikt.
Tabbladenbeheer Om een ​​pop-up te maken die browsertabbladen beheert.

Ga door met verkennen

We hopen dat u deze Chrome-extensie met plezier heeft gemaakt en dat u graag uw leertraject voor Chrome-ontwikkeling wilt voortzetten. Wij raden het volgende leertraject aan:

  • De ontwikkelaarshandleiding bevat tientallen extra links naar documentatie die relevant is voor het maken van geavanceerde extensies.
  • Extensies hebben toegang tot krachtige API's die verder gaan dan wat beschikbaar is op het open internet. De documentatie over Chrome API's doorloopt elke API.