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.
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 start
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: 
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 coalescentie 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:
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:
🎯 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 |
|---|---|
| Focus modus | 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 web. De documentatie over Chrome API's doorloopt elke API.