Exécuter des scripts sur chaque page

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> <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 ?

É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> <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.

• Publier sur le Chrome Web Store
• Comprendre les scripts de contenu

Elle devrait se présenter comme ceci :

</ph> <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:

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.