Une extension navigateur [Clef en main]

Développer une extension de navigateur

Contexte

On peut installer des extensions à son navigateur, qui permettent d’ajouter des fonctionnalités non « natives » à celui ci.

Une fonctionnalité « native » est une fonctionnalité déjà inclue dans le navigateur. Par exemple, l’inspecteur de firefox est natif.

Une fonctionnalité « non native » est par opposition une fonctionnalité qu’il faut installer en plus. Par exemple, l’extension Dyslexiefont permet d’avoir des fonctionnalités d’amélioration des pages web pour les personnes ayant besoin d’une petite aide pour faciliter la lecture.

Ce projet a pour objectif de développer une extension pour le navigateur de votre choix.
Vous pouvez l’aborder soit:

  • en vous choisissant un sujet de votre idée (il y a quelques idées dans la section « Idées d’extensions à développer »)
  • en suivant les idées proposées (plus décrites) dans la section orientation du projet

Idées d’extensions à développer

Voici quelques idées si vous souhaitez travailler sur un projet non décrit:

  • faire une extension qui "féminise les noms de métiers sur le web” sur le modèle du projet proxy
  • un bloqueur de publicités, de mouchards ou d’autres contenus estimés comme indésirables
  • faire une extensions pour l’accessibilité (visuel, auditif), qui permet de faciliter la lecture des pages Web (exemple: changer la taille de la font, la font en elle-même, les couleurs des font ou du fond de la page, etc)

Contraintes générales

  • Groupes: libre
  • Langage: javascript
  • Durée de la séquence: 1 semaine

Outils à utiliser

  • Un éditeur de texte
  • Un navigateur Web (par exemple, Firefox)
  • Un outil de développement du navigateur (Le devtool de Firefox, par exemple)
  • Git
  • Github ou Gitlab (ou assimilé, avec un compte)
  • Miro pour partager facilement et s’organiser en équipes
  • Outil de conférence pour partager son écran (type Jitsi)

Pour partager votre projet en équipe, créez un dossier dans le répertoire Github suivant:

Si vous souhaitez utiliser ce projet pour nourrir votre portfolio, n’hésitez pas à le « forker » pour le récupérer sur un compte personnel.

Orientation du projet

Objectifs globaux pédagogiques

Personnel

  • Découvrir l’écosystème d’un navigateur
  • Découvrir comment coder une extension pour navigateur
  • Se familiariser avec la documentation d’un navigateur

Collectif

  • Apprendre à s’organiser en équipe
    • Découper en petites taches
    • Se distribuer les taches
    • Utiliser des outils de suivi de projet (comme Miro) pour pouvoir communiquer sur son avancée

# Je débute

Personnaliser ses pages Web

Nous vous proposons de réaliser une extension pour personnaliser les pages du navigateur que vous allez parcourir.

L’extension pourrait permettre par exemple:

  • de colorier les balises h1 de tous les sites en vert
  • d’entourer toutes les images des sites avec une bordure rouge
  • de changer la taille de la font utilisée sur les sites

Objectifs pédagogiques

Personnel
  • Se familiariser avec le langage Javascript
  • Manipuler du CSS et du HTML
Collectif
  • Discuter d’un projet commun avec d’autres personnes pour débattre / faire des choix

# Je suis à l’aise avec certains langages

1. Changer les images du Web

Ce que l’extension peut faire:
Quand vous naviguez sur des sites Web, toutes les images rencontrées sont remplacées par les images de votre choix (par exemple des portraits de l’adorable Grumpy Cat)

L’extension est affichée dans les boutons d’extension du navigateur dès qu’elle est installée.
Au click du bouton, on peut choisir l’image avec laquelle on veut remplacer toutes les images du web.
L’image choisie est ensuite affichée en miniature sur le bouton.

Objectifs pédagogiques
Personnel
  • Mieux comprendre le fonctionnement d’une extension, et tout ce qui gravite autour
  • Customiser son extension
Collectif
  • Travailler en équipe pour se découper les taches à effectuer pour mener à bien le projet

2. Choisir la font utilisée sur le navigateur

Ce que l’extension peut faire:
Quand vous naviguez sur une page Web, le plug-in permet, avec un bouton, de choisir une font à appliquer à la page web pour changer la manière dont le contenu est écrit.
Le bouton servira à activer/désactiver la font et à la choisir.

Personnel
  • Manipuler les fonts pour comprendre comment les intégrer à une page web
  • Utiliser le bouton de l’extension Web
Collectif
  • Faire un travail d’équipe pour faire les choix de direction du projet et se départager les taches

# Je veux aller plus loin

1. Découvrir la définition d’un mot

Ce que l’extension peut faire:
Quand vous naviguez sur une page Web, le plug-in permet de souligner les mots qu’il connait. Si vous cliquez sur un mot souligné, une pop-up s’ouvre pour vous afficher la définition du mot.
Tip: Wikipédia propose une API de recherche

Objectifs pédagogiques
Personnel
  • Manipuler une API et l’utiliser pour créer son extension
Collectif
  • Faire un travail d’équipe pour rechercher et comparer les APIs possibles à utiliser pour ce projet

2. Lancer des tests

Ce que l’extension peut faire:
Quand vous naviguez sur votre navigateur, il est possible d’appuyer sur le bouton de l’extension pour lancer les tests d’un répertoire distant (sur Github ou Gitlab par exemple).
Exemple d’extension existante: https://github.com/mdn/webextensions-examples/tree/master/mocha-client-tests (le but étant d’en recréer une à soi, pas d’utiliser celle la)

Personnel
  • Commencer à appréhender le fonctionnement des tests automatisés sur une plateforme comme Github ou Gitlab
  • Intégrer un outil existant dans une extension Web
Collectif
  • Faire un travail d’équipe pour faire les choix de direction du projet et se départager les taches

Ressources