Comment créer une simple extension Chrome

Créer une extension Chrome est un processus assez simple. Lorsque vous aurez terminé, vous pourrez l'utiliser sur votre ordinateur pour améliorer le fonctionnement du navigateur.

Le navigateur a besoin de certains composants de base avant que l'extension ne soit pleinement opérationnelle. Nous allons passer en revue tout cela ci-dessous, y compris comment faire fonctionner votre extension personnalisée dans Chrome sans avoir besoin de la télécharger ou de la partager avec quelqu'un d'autre.

Construire une extension Chrome(Chrome) complexe est un processus beaucoup plus détaillé que ce que vous verrez ci-dessous, mais le processus général est le même. Continuez à lire pour savoir comment créer une extension Chrome que vous pouvez commencer à utiliser dès aujourd'hui.(Chrome)

Astuce(Tip) : Pour voir à quel point votre propre extension pourrait être géniale, consultez ces incroyables extensions Chrome(these amazing Chrome extensions) .

Comment créer une extension Chrome

À l'aide de ce guide, vous allez créer une simple extension Chrome qui répertorie certains de vos sites Web préférés. Il est entièrement personnalisable et très facile à mettre à jour.

Voici ce qu'il faut faire :

  • Créez un dossier qui contiendra tous les fichiers qui composent l'extension.
  • Créez les fichiers de base requis par cette extension : manifest.json , popup.html , background.html , styles.css .
  • Ouvrez popup.html dans un éditeur de texte, puis collez-y tout ce qui suit, en veillant à l'enregistrer lorsque vous avez terminé.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

N'hésitez(Feel) pas à modifier les liens et le texte du lien, ou si vous voulez que l' extension Chrome soit exactement comme nous, gardez tout pareil.

  • Ouvrez manifest.json dans l'éditeur de texte et copiez/collez ce qui suit :

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

"manifest_version": 2,
"name": "Sites favoris", ( “name”: “Favorite Sites”,)
"description": "Tous mes sites Web favoris.", ( “description”: “All my favorite websites.”,)
"version": "1.0",
"icons": {
"16": "icon.png",
"32": "icône.png", ( “32”: “icon.png”,)
"48": "icône.png", ( “48”: “icon.png”,)
"128": "icône.png" ( “128”: “icon.png”)
},

   "background": { 
        "page":"background.html"
},

    "browser_action" : {
        "default_icon" : "icon.png",
        "default_title" : "Sites favoris", (        “default_title” : “Favorite Sites”,)
        "default_popup": "popup.html"
    }
}

Les zones comestibles de ce code incluent name , description et default_title .

  • Ouvrez styles.css et collez le code suivant. C'est ce qui décore le menu contextuel pour le rendre beaucoup plus attrayant à regarder et encore plus facile à utiliser.

#myUL {
type-style-liste : aucun ; (list-style-type: none;)
   rembourrage : 0 ; (   padding: 0;)
   marge : 0 ; (   margin: 0;)
   largeur : 300 pixels ; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  marge supérieure : -1px ; (  margin-top: -1px;)
  background-color: #f6f6f6;
  rembourrage : 12px ; (  padding: 12px;)
  décoration de texte : aucune ; (  text-decoration: none;)
  taille de police : 18 px ; (  font-size: 18px;)
  la couleur noire; (  color: black;)
  bloc de visualisation; (  display: block;)
  famille de polices : 'Noto Sans', sans empattement ; (  font-family: ‘Noto Sans’, sans-serif;)
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

Vous pouvez modifier beaucoup de choses dans le fichier CSS . Jouez avec ces options après avoir créé votre extension Chrome pour la personnaliser à votre guise.(Chrome)

  • Créez(Create) une icône pour l'extension et nommez-la icon.png . Placez-le dans votre dossier d'extension Chrome . Comme vous pouvez le voir dans le code ci-dessus, vous pouvez créer une icône distincte pour ces tailles : 16×16 pixels, 32×32, etc.

Conseil : (Tip: )Google dispose de plus d'informations(Google has more information) sur la création d' extensions Chrome . Il existe d'autres exemples et options avancées qui vont au-delà des étapes simples que nous avons présentées ici.

Comment ajouter une extension personnalisée(Custom Extension) à Chrome

Maintenant que vous avez créé l' extension Chrome , il est temps de l'ajouter au navigateur afin que vous puissiez réellement utiliser tous les fichiers que vous venez de créer. L'installation d'une extension personnalisée implique une procédure différente de la procédure d'installation d'une extension Chrome normale(how you’d install a normal Chrome extension) .

  • Dans le menu Chrome, accédez à Plus d'outils(More tools ) > Extensions . Ou tapez chrome://extensions/ dans la barre d'adresse.
  • Sélectionnez le bouton à côté du mode développeur(Developer mode) s'il n'est pas déjà sélectionné. Cela activera un mode spécial qui vous permettra d'importer vos propres extensions Chrome .

  • Utilisez le bouton Load unpacked en haut de cette page pour sélectionner le dossier que vous avez créé à l' étape 1(Step 1) ci-dessus.

  • Acceptez(Accept) toutes les invites si vous les voyez. Sinon, votre extension Chrome personnalisée s'affichera avec toutes les autres que vous avez dans le coin supérieur droit du navigateur.

Modification de votre extension Chrome

Maintenant que votre extension Chrome est utilisable, vous pouvez apporter des modifications pour vous l'approprier. 

Le fichier styles.css contrôle l'apparence de l'extension, vous pouvez donc ajuster le style général de la liste et modifier la couleur ou le type de police. W3Schools est l'une des meilleures ressources pour en savoir plus sur toutes les différentes choses que vous pouvez faire avec CSS .

Pour modifier l'ordre dans lequel les sites Web sont répertoriés, ou pour ajouter ou supprimer des sites existants, modifiez le fichier popup.html. Assurez-vous simplement de ne conserver vos modifications que sur l' URL et le nom. Tous les autres caractères, comme <li> et <html> , sont obligatoires et ne doivent pas être modifiés. Le didacticiel HTML sur W3Schools(HTML Tutorial on W3Schools) est un bon endroit pour en savoir plus sur cette langue.



Léonie Mathieu

About the author

Je suis un ingénieur logiciel expérimenté, avec plus de 10 ans d'expérience dans le développement et la maintenance d'applications Microsoft Office. J'ai une forte passion pour aider les autres à atteindre leurs objectifs, à la fois par mon travail d'ingénieur logiciel et par mes compétences en prise de parole en public et en réseautage. Je suis également extrêmement compétent en matière de pilotes de matériel et de clavier, ayant développé et testé plusieurs d'entre eux moi-même.


Related posts