Comment construire une simple extension Chrome en JavaScript Vanilla

Aujourd’hui, je vais vous montrer comment créer une extension Chrome dans du code JavaScript vanille, c’est-à-dire du code JavaScript simple, sans aucun framework supplémentaire comme React, Angular ou Vue.

Construire une extension Chrome n’a pas à être difficile: au cours de ma première année de programmation, j’ai publié deux extensions, créées à la fois en HTML, CSS et en JavaScript. Dans cet article, je vais vous expliquer comment faire de même en quelques minutes.

Je vais vous montrer comment créer un tableau de bord simple avec une extension Chrome. Si vous avez toutefois votre propre idée d'une extension et que vous voulez juste savoir quoi ajouter à vos fichiers de projet existants pour le faire fonctionner dans Chrome, vous pouvez passer à la section consacrée à la personnalisation de votre propre fichier et de votre icône manifest.json.

À propos des extensions Chrome

Une extension Chrome est essentiellement un groupe de fichiers qui personnalise votre expérience dans le navigateur Google Chrome. Il existe différents types d'extensions Chrome. certains s’activent lorsqu’une certaine condition est remplie, comme lorsque vous êtes sur une page de paiement en magasin; certains n'apparaissent que lorsque vous cliquez sur une icône; et certains apparaissent à chaque fois que vous ouvrez un nouvel onglet. Les deux extensions que j’ai publiées cette année sont des extensions «nouvel onglet»; le premier est Compliment Dash, un tableau de bord qui conserve une liste de tâches à faire et complimente l'utilisateur, et le second est un outil pour les pasteurs appelé Liturgical.li. Si vous savez coder un site Web de base, vous pouvez coder ce type d’extension sans trop de difficulté.

Conditions préalables

Nous allons garder les choses simples, donc dans ce tutoriel, nous allons simplement utiliser HTML, CSS, et quelques bases de JavaScript, ainsi que la personnalisation d’un fichier manifest.json que je vais inclure ci-dessous. La complexité des extensions Chrome étant différente, la création d'une extension Chrome peut être aussi simple ou compliquée que vous le souhaitez. Une fois que vous aurez appris les bases, vous pourrez créer quelque chose de beaucoup plus compliqué en utilisant vos propres compétences.

Configuration de vos fichiers

Pour ce tutoriel, nous allons créer un tableau de bord simple qui salue l’utilisateur par son nom. Appelons notre extension Simple Greeting Dashboard.

Pour commencer, vous voudrez créer trois fichiers: index.html, main.css et main.js. Mettez ces derniers dans leur propre dossier. Ensuite, remplissez le fichier HTML avec la configuration de base d'un document HTML et connectez-le aux fichiers CSS et JS:

Tableau de bord de souhaits simple
================================= - -
  
   Tableau de bord de souhaits simples </ title></pre><pre>  <link rel = "stylesheet" type = "text / css" media = "screen" href = "main.css" /></pre><pre></ head></pre><pre><body></pre><pre>   <! - Mon code ira ici -></pre><pre>   </ins><div class="neighbor-articles"><h4 class="ui header">Voir également</h4><a href="/article/how-to-write-an-api-in-3-lines-of-code-with-django-rest-framework-63f757/" title="Comment écrire une API en 3 lignes de code avec la structure Django REST">Comment écrire une API en 3 lignes de code avec la structure Django REST</a><a href="/article/chapter-9-how-to-build-a-google-home-app-with-dialogflow-fulfillment-via-inline-editor-7ef253/" title="Chapitre 9: Comment créer une application Google Home avec DialogFlow | Réalisation via l'éditeur en ligne">Chapitre 9: Comment créer une application Google Home avec DialogFlow | Réalisation via l'éditeur en ligne</a><a href="/article/how-to-write-better-tests-for-drag-and-drop-operations-in-the-browser-afb556/" title="Comment rédiger de meilleurs tests pour les opérations de glisser-déposer dans le navigateur">Comment rédiger de meilleurs tests pour les opérations de glisser-déposer dans le navigateur</a><a href="/article/how-to-talk-the-talk-in-front-of-hundreds-717cf9/" title="Comment parler (devant des centaines)">Comment parler (devant des centaines)</a><a href="/article/how-to-get-better-sleep-not-just-more-sleep-fa6b21/" title="Comment mieux dormir, pas seulement plus de sommeil">Comment mieux dormir, pas seulement plus de sommeil</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="vn flag"></i></a><a href="https://uk.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ua flag"></i></a><a href="https://tr.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="tr flag"></i></a><a href="https://th.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="th flag"></i></a><a href="https://sv.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ch flag"></i></a><a href="https://sr.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="rs flag"></i></a><a href="https://sl.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="si flag"></i></a><a href="https://sk.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="sk flag"></i></a><a href="https://ru.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ru flag"></i></a><a href="https://ro.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ro flag"></i></a><a href="https://pt.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="pt flag"></i></a><a href="https://pl.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="pl flag"></i></a><a href="https://de.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="de flag"></i></a><a href="https://ar.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="sa flag"></i></a><a href="https://bg.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="bg flag"></i></a><a href="https://cs.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="cz flag"></i></a><a href="https://da.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="dk flag"></i></a><a href="https://el.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="gr flag"></i></a><a href="https://ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="es flag"></i></a><a href="https://et.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ee flag"></i></a><a href="https://fi.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="fi flag"></i></a><a href="https://hi.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="in flag"></i></a><a href="https://hr.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="hr flag"></i></a><a href="https://hu.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="hu flag"></i></a><a href="https://id.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="id flag"></i></a><a href="https://it.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="it flag"></i></a><a href="https://ja.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="jp flag"></i></a><a href="https://ko.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="kr flag"></i></a><a href="https://lt.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="lt flag"></i></a><a href="https://lv.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="lv flag"></i></a><a href="https://ms.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="my flag"></i></a><a href="https://nl.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="nl flag"></i></a><a href="https://no.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="no flag"></i></a><a href="https://uz.ceadesc.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="uz flag"></i></a></div>ceadesc.org<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>