Comment créer des extensions Chrome à partir de zéro

Si vous souhaitez ajouter ou modifier des fonctionnalités dans Google Chrome, vous devez utiliser une extension. Bien que vous puissiez télécharger une extension à partir du Chrome Web Store, vous avez parfois besoin d'une fonctionnalité spécifique que vous ne pouvez trouver dans aucune extension existante..

La bonne nouvelle est que vous pouvez créer votre propre extension pour ajouter ou modifier les fonctionnalités requises ou créer un nouvel add-on ou une nouvelle application pour Google Chrome, que vous pourrez ultérieurement. distribuer à d'autres utilisateurs en utilisant le Chrome Web Store.

Dans la suite, je vais vous montrer le moyen le plus simple de créer une extension. Si vous avez des connaissances en développement Web (HTML, CSS et JS), vous vous sentirez comme à la maison. Sinon, regardez d'abord ces chaînes pour apprendre les bases du développement web, puis continuez ci-dessous.

Conditions préalables

Les conditions suivantes doivent être remplies avant de commencer avec ce tutoriel..

1. Vous devez être familier avec HTML, CSS et JavaScript. [Vérifier les ressources]
2. Vous devez avoir un éditeur de code écrire l'extension. [Comparer les éditeurs]
3. (Facultatif) Si vous souhaitez distribuer votre extension à d'autres utilisateurs, vous devez disposer d'un compte développeur sur le Chrome Web Store. [Créer un compte]

Remarque: Google vous demande de payer une somme modique pour la création d'un compte de développeur sur le Chrome Web Store..

Créer une extension

Dans ce tutoriel, je vais partager le processus de création d’un extension de tâches pour Google Chrome. Ce sera un utilitaire (comme indiqué ci-dessous) permettant de démontrer les composants essentiels et les capacités fournies aux extensions..

1. Obtenez un modèle

Google Chrome, comme toute autre plate-forme, nécessite sa extensions pour avoir une structure d'ensemble, ce qui peut paraître complexe pour les débutants. C’est pourquoi il est bon de se procurer un gabarit standard pour une extension répondant à tous les besoins..

Extensionizr est le meilleur générateur standard pour les extensions chromées. Il vous permet de choisir l’un des types d’extensions donnés. - action du navigateur (une action pour toutes les pages ou le navigateur), action de page (une action pour la page en cours), ou extension cachée (action en arrière-plan généralement masquée dans l'interface frontale).

De plus, il offre diverses options de réglage fin pour inclure / exclure les add-ons nécessaires, les autorisations, etc. Vous devez sélectionner “Action du navigateur” comme type d'extension et “Pas de fond” comme page de fond pour ce tutoriel.

Lorsque vous avez terminé de choisir les options pour créer votre extension d’échantillon, appuyez sur le bouton “Télécharge le!” bouton dans Extensionizr. finalement, extraire l'archive (.zip) dans un répertoire et ouvrez votre éditeur de code pour commencer à écrire l'extension.

2. Coder l'extension

Une fois que vous avez téléchargé et extrait le modèle, vous verrez une structure de répertoires comme indiqué dans la capture d'écran ci-dessous. Le modèle est bien organisé et vous devez savoir que le fichier le plus important est “manifest.json“.

Apprenons également à connaître les autres fichiers et dossiers de ce répertoire:

1. _locales: Il est utilisé pour stocker les informations de langue pour une application multilingue.
2. css: Il fonctionne pour stocker des bibliothèques tierces telles que Bootstrap 4.
3. icônes: Il est conçu pour avoir des icônes pour votre extension dans des tailles variées.
4. js: C'est pratique pour économiser bibliothèques de back-end tierces comme jQuery 3.
5. src: Il stocke le code que vous allez écrire pour votre extension.

manifest.json

Il contient le métadonnées de base sur votre application, qui définit les détails de votre application pour le navigateur. Vous pouvez le modifier pour définir le nom, la description, le site Web, l'icône, etc. de votre extension, avec des détails tels que actions et autorisations du navigateur.

Par exemple, dans le code ci-dessous, vous remarquerez que j'ai changé le nom, la description et homepage_url avec default_title sous browser_action. De plus, je ajoutée “espace de rangement” sous autorisations car nous avons besoin de stocker des données dans notre extension.

 "name": "Todoizr - To-do Simplified", "version": "0.0.1", "manifest_version": 2, "description": "Une application simple pour tout le monde.", "homepage_url": " https://go.aksingh.net/todoizr "," icons ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" icons / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - Tâche simplifiée "," default_popup ":" src / browser_action / browser_action.html "," permissions ": [" storage "] 

src \ browser_action

Ce répertoire contiendra le code pour l'action du navigateur. Dans notre cas, nous allons coder la fenêtre popup en cliquant sur l'icône de l'extension dans le navigateur. Notre extension permettra aux utilisateurs d'ajouter et d'afficher des tâches dans la fenêtre contextuelle..

Remarque: Vous pouvez toujours démarrer avec le code en clonant ce référentiel.

Code initial du modèle

Bien que ce répertoire ne contienne qu'un fichier HTML contenant tout le code, j'ai décidé de le diviser en trois fichiers distincts pour plus de clarté. Cela dit, le fichier HTML nommé “browser_action.html” a maintenant le code suivant:

De plus, le fichier de style nommé “browser_action.css” a le contenu ci-dessous pendant que le fichier JavaScript nommé “browser_action.js” est vide pour l'instant.

 #mainPopup padding: 10px; hauteur: 200px; largeur: 400px; famille de polices: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Concevoir l'interface du popup

Après avoir configuré le projet initial, concevons d’abord l’interface de la fenêtre contextuelle. j'ai mettre en place l'interface avec une approche minimaliste, affiche le nom en haut suivi d'un formulaire pour ajouter des éléments à faire et d'une zone ci-dessous pour afficher les éléments ajoutés. Il s’inspire du design simpliste de “Style de formulaire 5“.

Dans le code ci-dessous, j'ai ajouté deux divs - un pour afficher le formulaire permettant d'ajouter une tâche à faire et l'autre pour afficher la liste des tâches déjà ajoutées. Cela dit, le nouveau code pour “browser_action.html” est comme suit:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Et le fichier de style “browser_action.css” a maintenant le code suivant:

 @import url ("./ form_style_5.css"); #mainPopup height: 200px; largeur: 300px; famille de polices: Helvetica, Ubuntu, Arial, sans-serif;  / * Forme de la tâche * / .form-style-5 margin: auto; remplissage: 0px 20px;  .form-style-5: premier-enfant background: none;  .form-style-5 h1 color: # 308ce3; taille de police: 20px; text-align: center;  .form-style-5 input [type = "text"] width: auto; float: gauche; marge-bas: non défini;  .form-style-5 input [type = "bouton"] background: # 308ce3; largeur: auto; Flotter à droite; rembourrage: 7px; bordure: aucune; border-radius: 4px; taille de police: 14px;  .form-style-5 input [type = "bouton"]: hover background: # 3868d5;  / * Liste des tâches * / .form-style-5: last-child height: inherit; marge inférieure: 5px;  .form-style-5 ul padding: 20px;  .form-style-5 ul li taille de la police: 14px;  

Enfin, le fichier de style tiers “form_style_5.css” a le contenu ci-dessous. Il est simplement tiré de son site Web pour inspirer la conception de notre extension..

 / * Style de formulaire 5 de Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; rembourrage: 10px 20px; arrière-plan: # f4f7f8; marge: auto 10px; rembourrage: 20px; arrière-plan: # f4f7f8; border-radius: 8px; famille de polices: Georgia, "Times New Roman", Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 légende font-size: 1.4em; marge inférieure: 10px;  .form-style-5 label display: block; marge inférieure: 8px;  .form-style-5 input [type = "text"], .form-style-5 input [type = "date"], .form-style-5 input [type = "datetime"], .form-style -5 entrée [type = "email"], .form-style-5 entrée [type = "numéro"], .form-style-5 entrée [type = "recherche"], .form-style-5 entrée [type = "heure"], .form-style-5 entrée [type = "url"], .form-style-5 textarea, .form-style-5 sélectionnez font-family: Géorgie, "Times New Roman", Times , serif; arrière-plan: rgba (255,255,255, .1); bordure: aucune; border-radius: 4px; taille de police: 16px; marge: 0; contour: 0; rembourrage: 7px; largeur: 100%; taille de la boîte: boîte-frontière; -webkit-box-dimensionnement: border-box; -moz-box-dimensionnement: border-box; couleur de fond: # e8eeef; couleur: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0,03) en médaillon; box-shadow: 0 1px 0 rgba (0,0,0,0,03) en médaillon; marge inférieure: 30 px;  .form-style-5 input [type = "text"]: focus, .form-style-5 input [type = "date"]: focus, .form-style-5 input [type = "datetime"]: focus, .form-style-5 entrée [type = "email"]: focus, .form-style-5 entrée [type = "numéro"]: focus, .form-style-5 entrée [type = "recherche"] : focus, .form-style-5 entrée [type = "time"]: focus, .form-style-5 entrée [type = "url"]: focus, .form-style-5 textarea: focus, .form- style-5 select: focus background: # d2d9dd;  .form-style-5 select -webkit-apparence: menulist-button; hauteur: 35px;  .form-style-5 .number background: # 1abc9c; couleur: #fff; hauteur: 30px; largeur: 30px; affichage: inline-block; taille de police: 0.8em; marge droite: 4px; hauteur de ligne: 30px; text-align: center; ombre du texte: 0 1px 0 rgba (255,255,255,0.2); border-radius: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], .form-style-5 input [type = "bouton"] position: relative; bloc de visualisation; remplissage: 19px 39px 18px 39px; couleur: #FFF; marge: 0 auto; arrière-plan: # 1abc9c; taille de police: 18px; text-align: center; style de police: normal; largeur: 100%; bordure: 1px solide # 16a085; largeur de la bordure: 1px 1px 3px; marge inférieure: 10px;  .form-style-5 input [type = "submit"]: survol, .form-style-5 input [type = "bouton"]: hover background: # 109177;  

Ecrire la logique du popup

Une fois que nous en avons terminé avec le front-end de l’extension, écrivons maintenant la logique de son fonctionnement. Nous avons besoin de notre extension pour pouvoir ajouter des éléments à faire et les afficher dans la fenêtre popup. Nous allons donc ajouter un écouteur cliquer sur un bouton pour ajouter le texte d'entrée en tant que tâche à faire et un écouteur de chargement de page pour afficher ces éléments..

Dans le code ci-dessous, nous allons utiliser deux fonctions - sync.get () et sync.set (), qui font partie de “stockage chrome“. Nous avons besoin du second pour sauvegarder les tâches à effectuer dans le stockage et du premier pour les récupérer et les afficher..

Cela dit, ci-dessous est le code final de la “browser_action.js” fichier. Comme vous pouvez le voir ci-dessous, le code est hautement commenté pour vous aider à comprendre son objectif..

 function loadItems () / * Tout d'abord, récupérez () les données du stockage * / chrome.storage.sync.get (['todo'], fonction (résultat) var todo = [] if (résultat && result.todo && result.todo.trim ()! == ") / * Analyse et récupère le tableau tel qu'il est enregistré sous forme de chaîne * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) pour (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Charger l'extension

Une fois votre extension écrite, il est temps de la tester grâce à la fonctionnalité de Google Chrome qui permet de charger des extensions non stockées et non stockées. Mais d'abord, vous devez activer le mode développeur dans votre navigateur: cliquez sur le options bouton > choisir “Plus d'outils” > Les extensions, puis basculer sur “mode développeur“.

Vous verrez maintenant plus de boutons sous la barre de recherche. Ici cliquez sur le “Charge déballée” bouton. Il demandera le répertoire - parcourez et sélectionnez le répertoire de votre extension, et chargera l'extension. Si vous éditez ou mettez à jour le code de votre extension, vous pouvez cliquer sur le bouton bouton de rechargement pour charger les dernières modifications.

Dans notre exemple, vous verrez l'icône de l'extension à côté de l’icône de profil car nous avons ajouté une action de navigateur dans notre exemple d’extension. Vous pouvez cliquer sur cette icône pour ajouter et afficher des tâches dans notre extension car c'est l'action spécifiée.

Distribuer une extension

Bien que ce soit facile de télécharger une extension sur Chrome Web Store, le processus est trop long pour couvrir tous les détails. En bref, vous créez un compte de développeur, créez un package pour votre extension, puis soumettez-le avec les détails de son contenu (nom, icône, captures d'écran, etc.); comme indiqué dans son guide étape par étape.

Et ensuite? Lire et coder

Comme vous vous en doutez, l'objectif de ce didacticiel est de vous familiariser avec le développement des extensions pour Google Chrome. J'ai essayé de couvrir les concepts de base; toutefois, vous devez en savoir plus pour faire de sérieux développement de l'extension.

Cela dit, voici quelques-unes de mes ressources préférées pour apprendre à développer des extensions pour Google Chrome et d'autres navigateurs basés sur Chromium:

1. Toutes les capacités, composants et fonctionnalités des extensions.
2. Exemples d'extensions réalisées par l'équipe derrière Google Chrome.

Si vous avez parcouru ces ressources et êtes prêt à relever quelques défis, essayez d'ajouter les fonctionnalités ci-dessous dans l'extension que vous venez de développer:

1. Une option pour supprimer les tâches sauvegardées.
2. Une fonctionnalité pour afficher les notifications lorsque l'ajout d'un élément est terminé.

Il s’agit de développer votre première extension pour le navigateur le plus populaire.. Quelle extension as-tu créé? Avez-vous eu un problème? Faites-moi savoir votre histoire en écrivant un commentaire ci-dessous ou en m'envoyant un message à @aksinghnet.

Dernier point mais non le moindre, notez que vous pouvez essayer Todoizr (l'extension que nous avons créée) sur Chrome Web Store et vérifier le code complet dans ce référentiel..