Content Scripts - Modifier les pages internet grâce au CSS et Javascript

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.

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 :

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

https://*/*

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

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.

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) :

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.

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

{
	"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.

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.

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

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

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

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

#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 :

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

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.

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

{
	"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é.

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

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

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

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

Et une fois que vous cliquez sur le bouton :