Créer une extension pour son navigateur

Notre extension

Notre extension consite à repertorier pleins de sites cools pour nous les devs sous forme de liste, les uns après les autres.

Ça va être plus ou moins comme d'habitude

Pour créer une extension, on va devoir créer une page html et un fichier css, comme on a l'habitude de faire. On va juste modifier certaines choses.

Prérequis

• Des connaissances en HTML
• Des connaissances en CSS
• Des bases avec JSON

Si vous avez besoin de petits rafraichissements ou d'apprendre le HTML ainsi que le CSS, suivez donc ce cours puis revenez vers cet article.

Mise en place du projet

Nous allons devoir créer un dossier dans lequel nous aurons index.html, style.css et manifest.json.

Dans index.html, nous allons écrire le code de base d'une page html :

<!DOCTYPE html>
<html lang="en">

  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <link rel="stylesheet" href="./style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
      <h1>Ma première extension</h1>
  </body>
</html>

Ajoutons nos premiers sites internet, un générateur de palettes, un comparateur de JSON et un générateur de vagues CSS :

  <body>
      <h1>Ma première extension</h1>

      <a href="https://coolors.co/e6eed6-dde2c6-bbc5aa-a72608-090c02">Générateur de palettes</a>
      <a href="https://getwaves.io/">Générateur de vagues</a>
      <a href="https://jsoneditoronline.org/#left=local.wixiyo&right=local.jozayo">Comparateur de JSON</a>
  </body>

Attaquons le CSS

Pour ce qui est du CSS, il faut simplement préciser la taille de notre fenêtre en modifiant la taille de body :

body {
  width: 400px;
  height: 500px;
  font-family: Arial;
}

Ajoutons un style à nos liens:

a {
  width: 90%;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  padding: 7px;
  gap: 5px;
  text-decoration: none;
  color: #fff;
  transition: 0.2s;
  background: #333333;
  align-items: center;
  margin-bottom: 10px;
}
a:hover {
  transform: scale(1.02);
  opacity: 0.8;
}

Le manifest.json

Dans manifest.json, nous allons préciser tout un tas de choses :

{
    "name": "Ma première extension",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "La meilleure extension qui existe !",
    "icons": {
        "48": "icon.png"
    },
    "action": {
        "default_popup": "index.html"
    }
}

Dans ce cas, nous avons:

• name : le nom de notre extension
• manifest_version : la version du manifest.json (veillez à ce qu'elle soit bien sur la version 3)
• description : la description de notre extension
• icons : le chemin de nos/notre icone(s) sous différentes résolutions
• action => default_popup : le chemin de notre page html

Utiliser notre extension sur notre navigateur

Pour utiliser notre extension sur notre navigateur, sur la plupart d'entre eux, il va falloir activer le mode développeur. Accédez à la page des extensions et cliquez sur le bouton "Developer mode" pour activer le mode développeur.

• gerer les extensions chrome : chrome://extensions
• gerer les extensions edge : edge://extensions

Ensuite, on cliquera sur "Load extension" et on selectionnera notre projet.

Publier mon extension

Pour publier notre extension, ce n'est pas forcément le même procédé. Tout va surtout se jouer sur le navigateur pour lequel vous souhaitez rendre disponible votre projet.

• Documentation Google Chrome
• Documentation Microsoft Edge
• Documentation de Modzilla Firefox