Notre extension consite à repertorier pleins de sites cools pour nous les devs sous forme de liste, les uns après les autres.
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.
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.
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>
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;
}
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:
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.
Ensuite, on cliquera sur "Load extension" et on selectionnera notre projet.
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.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.