Les extensions de navigateur sont des modules complémentaires aux navigateurs qui sont utilisés pour ajouter de l'esthétique au site et également offrir une expérience utilisateur optimale.
Le concept de script de contenu dans le développement d'extensions est une connaissance très utile à acquérir par les développeurs, car il élargit considérablement les cas d'utilisation des extensions de navigateur.

Cet article vise à présenter ce que sont les scripts de contenu et comment ils fonctionnent. Il y aurait également un projet de démonstration dans lequel les bases des extensions Chrome seront discutées et un simple script de contenu sera utilisé dans notre extension. Sur ce, commençons.

Comprendre les scripts de contenu

Tout d’abord, qu’est-ce qu’un script de contenu ? Les scripts de contenu sont des codes JavaScript qui, lors de l'interaction avec des pages Web via une extension de navigateur, sont exécutés pour modifier la page Web.

Il y parvient facilement en interagissant avec le modèle objet du document de la page Web. Le modèle objet de document de page Web est la structure brute de la page Web donnée. La manière dont les scripts de contenu Chrome agissent pour modifier la page Web en question est généralement appelée injection.

Après avoir eu une brève introduction aux scripts de contenu, nous continuerions ensuite à les implémenter sur nos pages Web. Mais avant cela, nous devons configurer notre extension de navigateur qui alimentera le script.

Configuration de votre extension Chrome

La configuration d'un fichier d'extension Chrome est assez simple. Pour plus d'informations sur la création d'extensions de référence, vous trouverez ci-dessous le lien vers la page de documentation de l'extension Chrome.
Une extension Chrome idéale doit inclure un fichier manifest.json bien détaillé qui fournit les informations de base par défaut sur l'extension Chrome.
En outre, le fichier JS approprié à exécuter est également inclus. D'autres fichiers supplémentaires (HTML et CSS) contribuent à apporter une esthétique à l'extension.
Sur ce, passons à la construction de notre extension, en incorporant notre injection de script de contenu. Nous illustrerons la puissance des scripts de contenu en créant une extension Chrome qui affiche un bouton superposé sur toute page Web active vers laquelle nous naviguons.

Écrire un fichier manifeste

Dans cette section, les parties du fichier manifeste seront mises en évidence et discutées. Voici le code du fichier manifeste du projet.

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": [""],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

Version du manifeste : La version du manifeste est généralement demandée. Par défaut, il est défini sur 3. car il s'agit d'une mise à niveau nettement meilleure que la version 2.
Nom : Le nom de l'extension est également saisi dans le fichier manifeste. Dans mon cas, le projet s'appelle le bouton Ajouter. Cela peut être modifié en fonction des préférences de l'utilisateur.
La version de l'extension Chrome est également saisie. Dans notre cas, il s'agit de la première version de l'extension, elle est donc nommée 1.0, les améliorations ultérieures de cette extension peuvent inciter à modifier le fichier pour augmenter respectivement les versions.
Description : une description de ce que fait l'extension donne également du crédit à l'extension Chrome aux utilisateurs non techniques de l'extension.

Les points ultérieurs soulevés sont tout à fait convaincants dans la construction des scripts de contenu.

L'objet autorisations met en évidence l'itinéraire d'exécution des scripts de contenu. Cela empêche également les scripts de contenu de s'exécuter dans des onglets et des pages Web inattendus. Cela nous permet de lister toutes les autorisations dont notre extension Chrome peut avoir besoin. Certaines extensions Chrome peuvent avoir besoin d'accéder au stockage du navigateur, à d'autres API Chrome et à certains sites en question. Dans notre cas pour ce projet, nous limitons notre extension Chrome uniquement à l'onglet actif du navigateur utilisé. Il est important de mettre cela en place pour réduire le risque qu'une extension Chrome compromette d'autres parties non utilisées de notre navigateur Chrome.

Nous configurerons ensuite le champ des scripts de contenu dans notre fichier manifeste.
Le champ des scripts de contenu spécifie les différents fichiers de code que nous avons l'intention d'injecter dans notre page Web.
Il contient le sous-champ matches qui spécifie l'URL de la page Web sur laquelle nous voulons qu'il agisse. Pour faciliter l'utilisation, nous avons simplement inclus toutes les URL permettant à cela d'agir sur toutes les pages Web auxquelles nous accédons. Vous pouvez cependant préciser l'URL que vous comptez injecter dans la valeur du sous-champ. Par exemple, www.google.com,

"matches": ["https://*.google.com/*"]
run_at": "document_idle

Les fichiers JS qui contiennent le code d'injection sont également précisés. Dans notre cas,
Notre fichier JS s'appelle Content script.js. Nous avons également spécifié le fichier CSS utilisé pour styliser ce projet.

Grâce à cela, nous avons eu une implémentation miniature du fichier manifeste pour notre projet. Nous passerons ensuite à l'écriture de notre code d'injection dans la section suivante

Création de scripts de contenu

Dans un esprit de simplicité, nous créerions un simple bouton qui, lorsque vous cliquez dessus, affiche un message d'alerte. Ce bouton est censé superposer la page Web existante.
Voici le code ci-dessous

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

Le style peut être modifié selon vos préférences, mais un modèle de style a été inclus dans le référentiel de code.

voici une photo de sa mise en œuvre.

Voici le lien vers le code source contenant le style du code.

Techniques avancées et cas d'utilisation

Jusqu'à présent, nous avons terminé le projet. Cependant, pour approfondir vos connaissances, voici quelques-unes des techniques avancées et des meilleures pratiques que vous pouvez également mettre en œuvre lors de la création de scripts de contenu.

• Interaction croisée avec les scripts d'arrière-plan du navigateur
• Mise en œuvre de gestionnaires d'état de données pour permettre les scripts dynamiques
• L'intégration d'autres API externes permet la manipulation et l'analyse des données
• Utiliser des stratégies de mise en cache afin d'optimiser les performances des extensions
• Intégration de scripts de contenu avec les service Workers

Conclusion

Vous pouvez également interagir avec moi sur mon blog et consulter mes autres articles ici. Jusqu'à la prochaine fois, continuez à coder !