Injecter du CSS et du JavaScript dans Google
Ce projet est open source et accessible depuis GitHub GL-Browser.
Cet article est le 2ème d'une série d'articles concernant la création d'un navigateur internet incluant par défaut des fonctionnalités que l'on retrouve habituellement sous forme d'extensions dans Chrome ou Firefox.
Exemples de fonctionnalités :
Nous souhaitons :
Nous utilisons Electron qui mixe le navigateur open source Chromium avec la richesse du framework Node.js.
Dans ce 2nd article, nous injecterons un style CSS et un code JavaScript dans la page internet du moteur de recherche de Google afin de modifier son apparence (mettre un fond noir) et supprimer certaines zones (supprimer "les rappels des règles de confidentialité").
Le 1er article concernait l'initialisation du projet avec Electron.
Pour récupérer directement les sources du 1er article :
git clone https://github.com/emmanuelroecker/GL-Browser
git checkout article1
Le fichier inject.css contient l'ensemble des styles des éléments de la page Google à modifier.
Pour modifier la couleur de fond de la page principale :
body {
background-color: black !important;
}
Pour modifier la couleur du texte des résultats de recherche :
.s {
color: #FFFFFF !important;
}
Afin que ces modifications soient prioritaires sur le style chargé par défaut, il est nécessaire d'ajouter !important à chaque propriété de style.
Le fichier inject.js contient le code JavaScript permettant de supprimer de la page Google des éléments HTML.
Pour supprimer l'affichage des rappels des règles de confidentialité :
let cnso = document.getElementById("cnso");
if (cnso) {
cnso.remove();
}
let cnsh = document.getElementById("cnsh");
if (cnsh) {
cnsh.remove();
}
Ces deux éléments n'existent pas immédiatement au chargement de la page.
MutationObserver permet de scruter les modifications et supprimer ces deux éléments dès qu'ils existent :
let MutationObserver = window.MutationObserver;
if (MutationObserver) {
let observer = new MutationObserver(function(mutations) {
modify(); //fonction appelée à chaque modification du body
});
observer.observe(document.body, {
childList: true,
subtree: true
});
}
Toutes les librairies de Node.js peuvent être utilisées avec Electron, comme File System qui permet d'accéder aux fichiers locaux.
Pour lire les fichiers inject.css et inject.js, ajouter à index.html :
let fs = require('fs');
fs.readFile( __dirname + '/inject.css', function (err, data) {
if (err) {
throw err;
}
injectCSS = data.toString();
});
fs.readFile( __dirname + '/inject.js', function (err, data) {
if (err) {
throw err;
}
injectJS = data.toString();
});
Pour injecter leurs contenus une fois la page chargée :
let webview = document.getElementById("main");
var loadfinish = function () {
webview.insertCSS(injectCSS);
webview.executeJavaScript(injectJS);
};
webview.addEventListener("did-finish-load", loadfinish);
Avant | Après |
---|---|
Avant | Après |
---|---|
git add -A
git commit -m "article 2"
git push
Pour le moment, le code CSS et JavaScript injecté est identique quelle que soit la page affichée, le prochain article traitera de l'injection de scripts suivant l'URL indiquée :