Créer un navigateur personnalisé - 1ère partie

Initialisation du projet avec Electron

10 janvier 2016

Introduction

Ce projet est open source et accessible depuis https://github.com/emmanuelroecker/GL-Browser.

Nous entamons 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 utiliserons Electron qui mixe le navigateur open source Chromium avec la richesse du framework Node.js.

Le framework Electron n'est pas spécialement destiné à réaliser un navigateur mais cela nous paraît suffisant pour réaliser un prototype.

Les fonctionnalités seront ajoutées au fur et à mesure des articles.

Objectifs

L'objectif de ce premier article est de créer une fenêtre qui contiendra :

puis d'ajouter le projet à GitHub.

Pré-requis

Node.js doit être installé (ce logiciel libre permet d'exécuter du JavaScript).
Git doit être installé (ce logiciel libre permet la gestion des codes sources).

Installer les librairies

Créer un répertoire qui contiendra le projet.
Dans ce répertoire, créer un fichier de configuration package.json précisant l'utilisation d'Electron :

{
    "name": "GL-Browser",
    "version": "0.0.1",
    "description": "A custom browser",
    "main": "main.js",
    "author": "Emmanuel ROECKER & Rym BOUCHAGOUR",
    "license": "GPL",
    "devDependencies": {
        "electron-prebuilt": "^0.36.0"
    }
}

Pour installer, exécuter en ligne de commande depuis le même répertoire :

npm install

Le code

Cette première version est en JavaScript natif.
Dans les futures versions, des librairies comme Bootstrap et jQuery seront utilisées.

Le processus principal

Electron utilise un processus principal responsable de la gestion des différentes fenêtres créées. Chaque fenêtre est un rendu d'une page HTML.

Le fichier main.js sera exécuté par le processus principal pour afficher index.html dans une fenêtre.

mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html');

Le processus de rendu

La page index.html est identique à une page HTML d'un site internet, elle contient :

Lancer le navigateur

Le répertoire du projet contient désormais les fichiers suivants :

index.html
main.js
package.json
node_modules

Configurer le lancement du navigateur en ajoutant dans le fichier package.json :

{
    "scripts": {
        "start": "electron main.js"
    }
}

Exécuter la ligne de commande :

npm start

L'interface obtenue :

Capture d'écran du résultat

Info : pour recharger la page après avoir modifié le code, utiliser le raccourci clavier Ctrl+R ou le menu View->Reload.

Gestion de version

Il est conseillé d'utiliser un gestionnaire de version pour avoir un historique des modifications, travailler en équipe, gérer différentes versions, ...

Le gestionnaire Git sera utilisé et ce projet open source stocké sur le site internet GitHub.

Ignorer des fichiers

Pour ne pas alourdir Git avec des fichiers inutiles, comme le répertoire node_modules, créer à la racine un fichier .gitignore contenant :

node_modules

La licence

Pour un projet open source, il est important d'indiquer la licence utilisée dans un fichier LICENSE stocké à la racine.

Le site Choose a License guide dans le choix de celle-ci.

Ce projet est sous licence GPL.

Le README

Sur GitHub, il est d'usage de créer un fichier README.md décrivant le projet, il est automatiquement affiché sur la page d'accueil du projet.

README.md est un fichier au format Markdown ou plus précisément CommonMark.

GitHub

Placer le projet dans un dépôt Git :

git init

Ajouter et valider les fichiers du projet :

git add -A
git commit -m "article 1"

Envoyer le projet sur le repository du compte GitHub :

git remote add origin https://github.com/emmanuelroecker/GL-Browser.git
git push -u origin master

Prochain article

Le prochain article traitera de l'injection d'un style CSS et d'un code JavaScript dans la page internet du moteur de recherche de Google afin de modifier son comportement.