I. Introduction

Dans ce tutoriel, nous allons voir comment injecter des pages CSS dans certains sites ainsi que du code Javascript qui permettra, entre autres, la modification du code HTML. Différents plugins seront développés pour vous montrer les possibilités qui s'offrent à vous.

I-A. Connaissances nécessaires

La compréhension de ce tutoriel nécessite de connaitre un minimum les langages HTML, Javascript et CSS. Les extensions seront volontairement simplistes afin d'être compréhensibles par un maximum de personnes. Si vous n'avez jamais créé d'extension pour Google Chrome, allez lire le tutoriel d'introduction iciTutoriel d'introduction aux extensions Google Chrome.

II. Les content scripts

Les content scripts représentent un ou plusieurs fichiers qui sont injectés dans une page Web et exécutés comme s'ils en constituaient une partie intégrante. Dans le fichier manifest.json, il vous sera nécessaire de renseigner certains de ces paramètres :

  • matches : Informe les pages où les fichiers seront injectés.
  • css : Fichier CSS à injecter (facultatif).
  • js : Fichier Javascript à injecter (facultatif).
  • run_at : Moment où le fichier Javascript sera injecté (facultatif).
  • all_frames : Pour insérer le code dans toutes les frames ou seulement la première (facultatif).

II-A. Le paramètre "matches"

Ce paramètre est un masque qui permettra à Google Chrome de déterminer les pages où l'extension devra injecter les fichiers CSS ou JS. Le caractère '*' sera utilisé pour remplacer n'importe quelle séquence de caractères. Par exemple :

 
Sélectionnez

					1) http://fr.wikipedia.org/*
					2) http://*.wikipedia.org/*
					

Le premier masque s'appliquera à toutes les pages de wikipedia en français alors que le deuxième s'appliquera à toutes les langues et à toutes les pages. Ce fonctionnement s'applique aux protocoles http, https, ftp, file

 
Sélectionnez

					https://*/*
					

S'appliquera donc à toutes les pages utilisant le protocole https.

II-B. Le paramètre "run_at"

Il peut être important d'injecter le code javascript à un moment précis. Trois choix s'offrent à vous grâce à ce paramètre :

  • document_start : Juste après les fichiers CSS.
  • document_idle : Entre les évènements window.onload et document_end en fonction de la complexité du document (Valeur par défaut).
  • document_end : Une fois le code HTML chargé, avant les images.

III. Modifier l'apparence d'un site

III-A. Spécifications

Cette première extension modifiera l'affichage d'un site très à la mode qui fourmille d'informations sans intérêt... Facebook. En faisant un petit tour sur ce site, on aperçoit vite plein de choses à éliminer (à mon avis) :

Facebook

Maintenant, faites Ctrl+Maj+I pour ouvrir la boite de dialogue Developer Tools. Une fois cela fait, vous pouvez parcourir le code à la recherche des balises qui nous intéressent.

Facebook

III-B. Le fichier manifest.json

Nous allons donc éditer le fichier manifest.json qui définira les informations de l'extension :

 
Sélectionnez

				{
				   "name": "Content Test",
				   "version": "1.0",
				   "content_scripts": [ {
				      "css": [ "facebook.css" ],
				      "matches": [ "http://*.facebook.com/*" ]
				   } ]
				}
				

Cette extension injectera donc un fichier CSS nommé facebook.css dans toutes les pages du site Facebook.

III-C. Le fichier facebook.css

Le but est donc de ne pas afficher certains blocs délimités par des balises <div> dont voici la liste des identifiants :

  • pagelet_stream_header
  • pagelet_pymkbox
  • pagelet_adbox
  • pagelet_connectbox

A partir de là, il est très facile d'écrire le fichier CSS.

 
Sélectionnez

				#pagelet_stream_header, #pagelet_pymkbox, #pagelet_adbox, #pagelet_connectbox
				{
					display: none;
				}
				

III-D. Résultat

Vous n'avez plus qu'à charger l'extension puis à aller sur Facebook.

Facebook

On remarque bien que les informations non souhaitées ont disparu.

III-E. Une autre possibilité

Voici un second exemple pour vous montrer une autre possibilité de l'injection d'un fichier CSS. Remplacez votre code CSS par celui-ci :

 
Sélectionnez

				#menubar_container
				{
				  background-color: #ff82ae !important;
				}
 
				a
				{
				  color: #ff82ae !important;
				}
				

Notez le "!important" qui permet de passer outre les valeurs définies dans les fichiers CSS du site. Et voici le résultat :

Facebook

Pas forcément au goût de tous...

IV. Ajouter des fonctionnalités

IV-A. Spécifications

Cette deuxième extension ajoutera un bouton dans toutes les pages. Lorsque l'on cliquera sur celui-ci, il affichera certaines informations. Pour rester sur un exemple simple, les données affichées seront le nombre de balises div, span et img.

IV-B. Le fichier manifest.json

Ce coup-ci, nous allons devoir injecter un fichier Javascript et un fichier CSS :

 
Sélectionnez

				{
				   "name": "Content Test",
				   "version": "1.0",
				   "content_scripts": [ {
				      "js": [ "content.js" ],
				      "css": [ "content.css" ],
				      "matches": [ "http://*/*" ],
				      "run_at": "document_end"
				   } ]
				}
				

Un autre changement est l'ajout du paramètre run_at qui injectera le Javascript une fois le fichier HTML chargé.

IV-C. Le fichier content.js

 
Sélectionnez

				// Ajoute un élément HTML dans le BODY
				function add_element_to_body(element)
				{
					var body = document.getElementsByTagName("body")[0];
					body.appendChild(element);
				}
 
				// Affiche les informations
				var show = function show_infos()
				{
					// Cache le bouton
					document.getElementById("reduce_div").style.display = "none";
 
					// Créé une zone d'affichage
					var div = document.createElement("div");
					div.id = "infos_div";
 
					// Récupère les informations voulues
					nb_div = document.getElementsByTagName("div").length;
					nb_span = document.getElementsByTagName("span").length;
					nb_img = document.getElementsByTagName("img").length;
 
					// Insère les informations
					div.innerHTML = "Infos<br />Div : "+nb_div+"<br />Span : "+nb_span+"<br />Img : "+nb_img;
					add_element_to_body(div);
				}
 
				// Affiche le bouton
				function show_maximise_button()
				{
					// Créé un zone d'affichage
					var div = document.createElement("div");
					div.id = "reduce_div";
 
					// Insertion des éléments dans cette zone
					var button = document.createElement("button");
					button.id = "maximise_button";
					button.addEventListener("click", show);
 
					var title = document.createTextNode('+');
					button.appendChild(title);
 
					div.appendChild(button);
					add_element_to_body(div);
				}
 
				// Initialise l'affichage
				show_maximise_button();
				

Ce code se contente d'insérer du code HTML au lancement de la page puis d'afficher les informations voulues lors d'un clic. Les commentaires devraient vous permettre d'en comprendre le fonctionnement.

IV-D. Le fichier content.css

Ce fichier contiendra simplement la position des éléments.

 
Sélectionnez

				#reduce_div, #infos_div
				{
					position: fixed;
					bottom: 0;
					right: 0;
				}
 
				#infos_div
				{
				  background-color: white;
				}
				

IV-E. Résultat

Une fois de plus, chargez l'extension pour voir le résultat :

Image non disponible

Et une fois que vous cliquez sur le bouton :

Image non disponible

V. Les limites des content scripts

Les content scripts ont des limites par souci de sécurité pour l'utilisateur. Ainsi, vous ne pourrez pas utiliser :

  • les APIs de Chrome à l'exception de chrome.extension.
  • les fonctions ou variables de la page Web.
  • les fonctions ou variables d'autres pages.
  • XMLHttpRequests sur un autre serveur.

VI. Conclusion

Les exemples vus ici sont simples pour éviter de longues explications n'ayant aucun rapport avec Google Chrome. Vous pourrez facilement les améliorer à votre guise. N'hésitez pas à me transmettre vos suggestions pour enrichir et améliorer ce document, notamment si vous trouvez des explications peu claires, des passages de code non optimisés, ou toute autre remarque. Elles seront les bienvenues.

Tous mes remerciements à Furr et Bovino pour la relecture de ce tutoriel.