Comment coder et publier une extension Chrome depuis son Chromebook 

Il y a quelque temps, après une discussion avec @misterobot, j’ai décidé de refaire l’extension Chrome de Mychromebook. L’idée est simple ! Afficher les titres des 5 derniers articles du site via notre flux RSS, puis d’ajouter le moteur de recherche Google pour les articles Mychromebook. Enfin, j’ajouterais également 4 icônes pour nous soutenir et nous trouver sur les réseaux sociaux. Les bases sont jetées, et comme d’habitude je vous partage mon travail. Voici donc comment coder et publier une extension Chrome depuis son Chromebook. 

Où trouver les extensions Chrome

Chrome est exceptionnel, et c’est en partie grâce à l’ajout d’extensions qui permet d’intégrer de nombreuses fonctionnalités supplémentaires. Il existe une extension pour à peu près tous les usages et les besoins. Que vous souhaitiez ajouter une fonctionnalité de productivité ou simplement vous détendre, il y a forcément l’extension qu’il vous faut sur le Chrome Web Store de Google. 

C’est une véritable caverne d’Alibaba. Grâce au moteur de recherche ou aux différentes rubriques, vous pourrez trouver chaussure à votre pied. Une fois l’extension choisie, cliquez sur le bouton [Ajouter à Chrome] pour télécharger et installer l’extension sur votre navigateur. 

Enfin, depuis quelques mois, Chrome, n’épingle plus les extensions directement sur l’omnibox. De ce fait, il vous faudra cliquer sur l’icône en forme de pièce de Puzzle puis épingler l’icône. 

Que doit-on savoir avant de créer une extension Chrome

Tout d’abord, vous devez savoir que les extensions Chrome sont écrites en utilisant des technologies Web telles que HTML, CSS et JavaScript. Vous pouvez utiliser ces technologies pour afficher tout ce que vous voulez tel que des flux RSS, des images, des champs texte … et même créer des interactions avec le navigateur ou l’utilisateur. 

Voici les étapes générales que vous devez suivre pour créer votre première extension. La première chose à faire, et donc de créer un dossier ou vous pourrez y stocker tous les fichiers de votre extensions, ensuite nous allons créer 4 fichiers distincts:

Étape 1: Créez un fichier manifest.json pour votre extension. 

Ce fichier contient des informations sur l’extension, telles que son nom, sa version et ses autorisations. Vous devez également spécifier les fichiers que vous allez inclure dans votre extension.

Étape 2: Créez un fichier popup.html.

Ce fichier sera la partie visible de votre extension. Vous pouvez y ajouter des API, des images, du code HTML … 

Étape 3: Écrivez du code JavaScript.

Popup.js permet d’interagir avec l’API, les flux, ou les sites web afin d’afficher les informations dans popup.html. 

Étape 4: Créez un fichier popup.css pour styliser votre popup.

Dans ce fichier vous allez pouvoir donner le style visuel de votre extension. Les couleurs, les formes, la polices et même les espacements seront paramétrables via ce fichier. 

Une fois tous les fichiers créés, il est possible de tester votre extension en la chargeant dans Chrome.

Comment coder et publier une extension Chrome depuis son Chromebook 

Passons aux choses sérieuses, lançons-nous dans le codage pur de votre première extension. Sur Chromebook, vous allez en un premier temps ouvrir l’application Fichier de ChromeOS pour créer votre dossier extension

Ouvrez l’application TEXT préinstallée sur votre Chromebook en passant par le lanceur d’application. 

Depuis l’application Text, vous allez pouvoir créer dans le dossier les 4 fichiers suivants manifest.json, popup.html, popup.js, popup.css, pour cela:

• Cliquez sur nouveau
• Puis enregistrer sous
• enfin renommer le fichier

Réalisez ces actions pour les 4 fichiers. 

Coder les différents fichiers pour votre extension Chrome

Nous allons à présent écrire nos différents fichiers et je vous invite à commencer par le fichier json. Chaque extension nécessite un fichier au format JSON nommé manifest.json.  Il fournit des informations importantes. Ce fichier doit se trouver dans le répertoire racine de l’extension et il doit contenir des informations particulières, comme le nom, la version … 

Voici un exemple de fichier Manifest.json pour créer votre première extension Hello World 

Comme vous pouvez le constater nous allons appeler une icône, de ce fait il vous faudra ajouter un fichier icon.png à votre dossier pour définir l’icône de l’extension. Ensuite vous allez ajouter le code dans votre fichier popup.html

Enfin dans notre fichier popup.js, nous allons définir l’ouverture d’un nouvel onglet avec inscrit la phrase “Hello World”

Pour définir la taille du texte et la couleur de notre extension, nous allons ajouter dans le fichier CSS le code suivant:

Tester son extension Chrome 

À ce stade, vous avez un dossier avec 5 fichiers:

• manifest.json
• popup.html
• popup.js
• popup.css
• icon.png

Vous pouvez, à présent, charger votre extension en accédant à la page des extensions de Chrome (chrome://extensions/) et en activant le mode développeur. Cliquez sur le bouton « Charger l’extension non empaquetée » et sélectionnez le dossier contenant votre extension.

Cela empaquettera automatiquement l’extension et la rendra disponible sur votre navigateur Chrome. À présent, il ne vous reste plus qu’à la tester. Si tout vous convient vous pouvez passer à la prochaine étape, la publication sur le Chrome Web Store.

Mettre en ligne votre extension sur le Chrome Web Store :

Vous êtes satisfait du résultat ? Alors il ne vous reste plus qu’à le proposer sur le Chrome Web Store de Google. Mais avant cela il vous faut compresser le dossier en Fichier au format zip 

• Ouvrez l’application fichiers de ChromeOS
• Faites un clic droit sur l’icône de votre dossier à compresser
• Dans le menu contextuel choisissez Compresser au format ZIP

Ensuite, nous allons proposer le fichier Zip de notre extension à Google 

• Rendez-vous sur le Tableau de bord du développeur Google
• Importez votre dossier compressé et ajoutez une description, une icône, quelques captures d’écran
• Attendez quelques minutes avant publication.

Si votre extension demande des privilèges d’accès host, l’extension devra être analysée par les équipes de Google avant la publication définitive. 

Le coût d’accès au Chrome Web store de Google

Si créer son extension reste simple, et que la publication l’est aussi, il faudra s’acquitter des frais de première inscription applicables aux développeurs. Rassurez-vous, Google n’est pas très gourmand. En effet, le prix à payer ne s’élève qu’à 5 US$ pour valider votre compte et publier vos applications ou extensions sur le Chrome Web store..

Comment coder et publier une extension Chrome depuis son Chromebook 

Évidemment dans cet article je vous montre comment coder une toute petite extension, mais il n’y à pas de limite à votre créativité. Pour Mychromebook, je suis allé un tout petit peu plus loin, mais sans forcément quelques chose de compliquer:

J’ai ajouté quelques icônes, des liens, une lecture d’un flux RSS et un champ de saisie, pour renvoyer la requête saisie sur Google.com avec comme élément de recherche site:Mychromebook.fr. Voilà à quoi ressemble l’extension 

Si vous désirez avoir le code de l’extension, faites en la demande dans la suite de cet article, je me ferais une joie de vous le fournir par mail. 

Petite astuce, il existe des frameworks tels que « Extensions » qui peuvent vous aider à créer une extension de base que vous pouvez personnaliser en fonction de vos besoins.