Créer un navigateur personnalisé - 2ème partie

Injecter du CSS et du JavaScript dans Google

Introduction

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 :

• modifier le comportement d'une page internet : Greasemonkey et Stylish
• supprimer les publicités : Adblock ou uBlock
• télécharger des vidéos
• ...

Nous souhaitons :

• une intégration plus cohérente de l'ensemble de ces fonctionnalités à l'instar de Torch
• une interaction simplifiée et plus naturelle entre l'utilisateur et le navigateur à l'instar du projet Ubiquity

Nous utilisons Electron qui mixe le navigateur open source Chromium avec la richesse du framework Node.js.

Objectifs

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

Résumé des articles précédents

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

Injection CSS et JavaScript

Le style CSS à injecter

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 code JavaScript à injecter

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

• supprimer l'élément avec l'id cnsh de la page principale
• supprimer l'élément avec l'id cnso de la page résultat de recherche

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
    });
}

Injecter le style CSS et le code JavaScript

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

Le rendu

Page principale

Avant	Après

Page de résultat de la recherche

Avant	Après

Envoyer sur GitHub

git add -A
git commit -m "article 2"
git push

Prochain article

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 :

• Supprimer le voile Pinterest
• Supprimer les annonces et recommandations de Twitter