Créez votre première extension qui insère un nouvel élément sur la page.
Présentation
Ce tutoriel crée une extension qui ajoute le temps de lecture attendu à n'importe quelle extension Chrome et Page de documentation du Chrome Web Store.
<ph type="x-smartling-placeholder">Dans ce guide, nous allons expliquer les concepts suivants:
- Fichier manifeste de l'extension.
- Tailles des icônes utilisées par une extension
- Injecter du code dans des pages à l'aide de scripts de contenu
- Utiliser les modèles de correspondance
- Autorisations des extensions.
Avant de commencer
Dans ce guide, nous partons du principe que vous avez des connaissances de base en développement Web. Nous vous recommandons de consulter Tutoriel Hello World pour une introduction au workflow de développement des extensions.
Créer l'extension
Pour commencer, créez un répertoire appelé reading-time
qui contiendra les fichiers de l'extension. Si vous
vous pouvez télécharger le code source complet sur GitHub.
Étape 1: Ajoutez des informations sur l'extension
Le fichier manifeste JSON est le seul fichier obligatoire. Il contient des informations importantes
. Créez un fichier manifest.json
à la racine du projet et ajoutez le code suivant:
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
Ces clés contiennent des métadonnées de base pour l'extension. Ils déterminent la façon dont l'extension apparaît sur la page des extensions et, lorsqu'elle est publiée, sur le Chrome Web Store. Pour en savoir plus, consultez les
touches "name"
, "version"
et "description"
sur la
Page de présentation du fichier manifeste.
💡 Autres informations sur le fichier manifeste de l'extension
- Il doit se trouver à la racine du projet.
- Les seules clés obligatoires sont
"manifest_version"
,"name"
et"version"
. - Il est compatible avec les commentaires (
//
) pendant le développement, mais vous devez les supprimer avant d'importer votre code dans le Chrome Web Store.
Étape 2: Fournissez les icônes
Pourquoi avez-vous besoin d'icônes ? Bien que les icônes soient facultatives pendant le développement, elles sont obligatoire si vous prévoyez de distribuer votre extension sur le Chrome Web Store. Elles apparaissent également dans d'autres comme la page "Gestion des extensions".
Créez un dossier images
et placez-y les icônes. Vous pouvez télécharger
les icônes sur
GitHub Ajoutez ensuite le code en surbrillance à votre fichier manifeste pour déclarer des icônes:
{
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Nous vous recommandons d'utiliser des fichiers PNG, mais d'autres formats de fichiers sont autorisés, à l'exception des fichiers SVG.
💡 Où ces icônes de tailles différentes s'affichent-elles ?
Taille de l'icône | Utilisation des icônes |
---|---|
16x16 | Favicon sur les pages et dans le menu contextuel de l'extension. |
32x32 | Les ordinateurs Windows nécessitent souvent cette taille. |
48x48 | S'affiche sur la page "Extensions". |
128x128 | S'affiche lors de l'installation et sur le Chrome Web Store. |
Étape 3: Déclarez le script de contenu
Les extensions peuvent exécuter des scripts qui lisent et modifient le contenu d'une page. Il s'agit du contenu scripts. Ils vivent dans un monde isolé, ce qui signifie qu'ils peuvent modifier leur environnement JavaScript sans entrer en conflit avec leur page hôte ou d'autres extensions. scripts de contenu.
Ajoutez le code suivant à manifest.json
pour enregistrer un script de contenu appelé
content.js
{
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
Le champ "matches"
peut contenir un ou plusieurs formats de correspondance. Celles-ci permettent au
navigateur de
identifier les sites dans lesquels injecter les scripts de contenu. Les modèles de correspondance se composent de trois parties:
<scheme>://<host><path>
Ils peuvent contenir "*
" caractères.
💡 Cette extension affiche-t-elle un avertissement d'autorisation ?
Lorsqu'un utilisateur installe une extension, le navigateur l'informe des fonctionnalités de l'extension. Les scripts de contenu demandent l'autorisation de s'exécuter sur les sites qui répondent aux critères de format de correspondance.
Dans cet exemple, l'utilisateur verrait l'avertissement d'autorisation suivant:
<ph type="x-smartling-placeholder">Pour en savoir plus sur les autorisations des extensions, consultez Déclarer des autorisations et avertir les utilisateurs.
Étape 4: Calculez et insérez le temps de lecture
Les scripts de contenu peuvent utiliser le Document Object Model (DOM) standard pour lire et modifier les valeurs
d'une page. L'extension vérifie d'abord si la page contient l'élément <article>
.
Ensuite, il comptera tous les mots de cet élément et créera un paragraphe qui affichera le total
le temps de lecture.
Créez un fichier nommé content.js
dans un dossier nommé scripts
et ajoutez le code suivant:
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);
}
💡 Code JavaScript intéressant utilisé dans ce code
- Standard
expressions utilisées pour ne compter que les mots à l'intérieur de l'élément
<article>
. insertAdjacentElement()
permet d'insérer le nœud de temps de lecture après l'élément.- Propriété classList utilisée pour ajouter des noms de classe CSS à l'attribut de classe de l'élément.
- Chaînage facultatif utilisé pour accéder à une propriété d'objet qui peut être non définie ou nulle.
- La coalescence nulle renvoie l'
<heading>
si<date>
est nul ou non défini.
Tester son fonctionnement
Vérifiez que la structure de fichiers de votre projet se présente comme suit:
Charger votre extension en local
Pour charger une extension non empaquetée en mode développeur, suivez la procédure décrite dans la section Développement Principes de base
Ouvrir la documentation sur une extension ou le Chrome Web Store
Voici quelques pages que vous pouvez ouvrir pour voir le temps que met chaque article à lire.
Elle devrait se présenter comme ceci :
<ph type="x-smartling-placeholder">.🛍 Améliorations potentielles
En vous basant sur ce que vous avez appris aujourd'hui, essayez de mettre en œuvre l'un des éléments suivants:
- Ajoutez un autre motif de correspondance dans le fichier manifest.json pour que les autres développeurs Chrome puissent en bénéficier. telles que les Outils pour les développeurs Chrome ou Workbox.
- Ajoutez un nouveau script de contenu qui calcule le temps de lecture pour l'un de vos blogs préférés ou de documentation.
Continuez à développer
Félicitations, vous avez terminé ce tutoriel 🎉. Continuez à développer vos compétences en terminant d'autres de cette série:
Extension | Objectifs de l'atelier |
---|---|
Mode Sans distractions | Permet d'exécuter le code sur la page actuelle après avoir cliqué sur l'action de l'extension. |
Gestionnaire d'onglets | Pour créer un pop-up qui gère les onglets du navigateur : |
Continuer à explorer
Nous espérons que cette extension Chrome vous a plu et sommes impatients de poursuivre votre d'apprentissage du développement d'applications. Nous vous recommandons de suivre le parcours de formation suivant:
- Le guide du développeur contient des dizaines de liens supplémentaires vers de la documentation. pertinentes pour créer des extensions avancées.
- Les extensions ont accès à des API puissantes, en plus de celles disponibles sur le Web ouvert. La documentation des API Chrome décrit chacune de ces API.