Les extensions de navigateur sont devenues une partie essentielle de notre vie en ligne. Elles nous permettent de personnaliser nos expériences de navigation et d'ajouter des fonctionnalités supplémentaires à notre navigateur préféré. Si vous êtes un développeur ou un designer, vous pouvez créer votre propre extension Chrome pour améliorer votre flux de travail et rendre votre expérience de navigation plus efficace. Dans cet article, nous allons vous montrer comment créer une extension Chrome de palette de couleurs pour vous aider à choisir les couleurs parfaites pour votre prochain projet de conception. Nous allons vous guider étape par étape à travers le processus de développement de votre propre extension de palette de couleurs, en utilisant les outils et les ressources disponibles pour les développeurs de Chrome. Que vous soyez un débutant ou un développeur expérimenté, cet article vous aidera à créer votre propre extension Chrome de palette de couleurs en un rien de temps.
Étape 1 : Créer un nouveau projet d'extension
La première étape consiste à créer un nouveau projet d'extension dans Google Chrome. Pour ce faire, suivez ces étapes :
1-Ouvrez Google Chrome et accédez au menu "Paramètres".
2-Cliquez sur "Extensions" dans la barre latérale gauche.
3-Cochez la case "Mode développeur" en haut à droite de la page.
4-Cliquez sur "Nouvelle extension" en haut à gauche de la page.
Une nouvelle fenêtre de projet s'ouvrira, avec un ensemble de fichiers et de dossiers de base pour votre extension.
Étape 2 : Ajouter un bouton d'extension à la barre d'outils
La première chose que nous allons faire est d'ajouter un bouton d'extension à la barre d'outils de Google Chrome. Cela nous permettra d'accéder facilement à notre palette de couleurs.
1-Ouvrez le fichier "manifest.json" dans votre éditeur de code.
2-Ajoutez la propriété "browser_action" en bas du fichier, comme suit :
Code pour créer une extension de palette de couleurs Chrome
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}Cette propriété spécifie l'icône à utiliser pour le bouton d'extension, ainsi que la page à afficher lorsque l'utilisateur clique sur le bouton. Nous allons créer cette page dans la prochaine étape.
3-Créez un fichier "popup.html" dans le dossier racine de l'extension.
4-Ajoutez le code HTML suivant dans le fichier :
Ce code crée une page HTML de base avec un titre et un titre de niveau 1.
-------------Code--------------
<!DOCTYPE html>
<html>
<head>
<title>Palette de couleurs</title>
</head>
<body>
<h1>Palette de couleurs</h1>
</body>
</html>
5-Ouvrez Google Chrome et accédez à la page "Extensions" en cliquant sur le bouton de menu en haut à droite de la fenêtre, puis en sélectionnant "Extensions".
6-Assurez-vous que le mode développeur est activé.
7-Cliquez sur le bouton "Charger l'extension non empaquetée".
8-Sélectionnez le dossier racine de votre extension et cliquez sur "Sélectionner un dossier".
Votre extension devrait maintenant être chargée dans Google Chrome, avec un bouton d'extension ajouté à la barre d'outils.
Étape 3 : Ajouter une palette de couleurs
Maintenant que nous avons ajouté un bouton d'extension à la barre d'outils, nous allons ajouter une palette de couleurs à la page "popup.html".
1-Ajoutez le code CSS suivant dans le fichier "popup.html" :
-------------------------code---------------------------
.color-picker {
display: flex;
flex-wrap: wrap;
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
.color-picker div {
width: 25%;
height: 25%;
box-sizing: border-box;
}
------------------------code----------------------------
Ce code crée un conteneur pour notre palette de couleurs, ainsi que des styles de base pour chaque case de couleur dans la palette.
2-Ajoutez le code HTML suivant dans le fichier "popup.html", juste en dessous du titre de niveau 1 :
-------------------------code-------------------------
<div class="color-picker">
<div style="background-color: #000;"></div>
<div style="background-color: #333;"></div>
<div style="background-color: #666;"></div>
<div style="background-color: #999;"></div>
<div style="background-color: #ccc;"></div>
<div style="background-color: #fff;"></div>
</div>
-------------------------code---------------------------
Ce code crée une palette de couleurs de base avec six couleurs.
3-Ouvrez Google Chrome et actualisez la page de l'extension en cliquant sur le bouton "Actualiser" dans la section de l'extension de la page "Extensions".
4-Cliquez sur le bouton d'extension pour ouvrir la page "popup.html" avec la palette de couleurs.
5-Vous devriez maintenant voir une palette de couleurs de base dans la page "popup.html"
Étape 4 : Ajouter des fonctionnalités de sélection de couleurs
Maintenant que nous avons une palette de couleurs de base, nous allons ajouter des fonctionnalités pour sélectionner une couleur et la copier dans le presse-papiers.
1-Ajoutez le code JavaScript suivant dans le fichier "popup.html", juste avant la fin du fichier :
-------------------------code--------------------------
// Récupère tous les éléments div de la palette de couleurs
const colorDivs = document.querySelectorAll('.color-picker div');
// Parcourt tous les éléments div de la palette de couleurs et ajoute un événement de clic
colorDivs.forEach((div) => {
div.addEventListener('click', () => {
// Récupère la couleur de fond de l'élément div cliqué
const color = div.style.backgroundColor;
// Copie la couleur dans le presse-papiers
navigator.clipboard.writeText(color);
// Affiche un message de confirmation
alert(`La couleur ${color} a été copiée dans le presse-papiers !`);
});
});
----------------------------code-----------------------------------
Ce code ajoute un événement de clic à chaque case de couleur de la palette. Lorsqu'un utilisateur clique sur une case de couleur, la couleur de fond de la case est récupérée, copiée dans le presse-papiers et un message de confirmation est affiché.
2-Ouvrez Google Chrome et actualisez la page de l'extension en cliquant sur le bouton "Actualiser" dans la section de l'extension de la page "Extensions".
3-Cliquez sur le bouton d'extension pour ouvrir la page "popup.html" avec la palette de couleurs.
4-Testez la fonctionnalité en cliquant sur une case de couleur. Vous devriez voir le message de confirmation s'afficher et la couleur devrait être copiée dans le presse-papiers.