Extension Web Chrome - Aucune expérience de codage préalable requise : 6 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:05

Les extensions Chrome sont de petits programmes conçus pour améliorer l'expérience de navigation des utilisateurs. Pour plus d'informations sur les extensions Chrome, rendez-vous sur

Pour créer une extension Web Chrome, le codage est requis, il est donc très utile de consulter HTML, JavaScript et CSS sur le site Web ci-dessous:

www.w3schools.com/default.asp (w3 schools est un bon site Web pour les ressources de codage)

Vous ne savez pas coder ? Ne vous inquiétez pas, ce tutoriel vous aidera à vous guider.

La meilleure chose à propos des extensions Chrome est qu'elles peuvent être personnalisées. Ce n'est pas seulement une chose spécifique qui peut être faite, alors soyez créatif.

Fournitures

Les fournitures nécessaires sont ci-dessous:

• Un ordinateur avec un éditeur de texte (j'utilise le Bloc-notes)
• Google Chrome

Et c'est tout!

Étape 1: Créer le répertoire

Tout d'abord, créez un dossier pour contenir tous les fichiers et nommez-le « extension ». Le nom peut être modifié ultérieurement si vous le souhaitez.

Étape 2: créez le fichier manifeste et codez-le

Le fichier manifeste est une partie très importante de l'extension. Il indique à l'extension exactement ce qu'elle doit faire et être. Les fichiers manifestes sont formatés en JSON. La première étape consiste à ouvrir un éditeur de texte et à enregistrer un nouveau fichier sous le nom "manifest.json".

Tapez ensuite le script ci-dessous:

{

"name": "First Extension", "version": "1.0", "description": "Je peux coder une extension", "manifest_version": 2, "browser_action": { "default_title": "First Extension" } }

N'oubliez pas les virgules après les valeurs !

Une fois que cela est tapé, enregistrez le fichier manifeste et accédez à chrome://extensions (Chrome doit être utilisé comme navigateur pour cela). Une fois sur chrome://extensions, activez le mode développeur. Après cela, appuyez sur le bouton « Charger décompressé » et sélectionnez le dossier « extension ».

roulement de tambour s'il vous plaît…

Yay! C'est une extension, sauf que… c'est un peu ennuyeux. Cela ne fait littéralement rien pour le moment, mais bientôt ce sera super cool.

Étape 3: créer les icônes et mettre à jour le manifeste

Un site Web qui fonctionne bien pour dessiner des icônes est https://www.piskelapp.com/. Il existe également d'autres programmes de dessin disponibles. Les icônes doivent être carrées. Ce projet utilisera des icônes 16x16, 32x32, 48x48 et 128x128. Une fois l'icône créée, créez un dossier appelé « images » dans le dossier d'extension et placez l'icône dans ce dossier. Il peut être judicieux de nommer une image en fonction de sa taille. Par exemple, 'icon32.png'. Le nouveau code est ci-dessous:

{

"name": "First Extension", "version": "1.0", "description": "Je peux coder une extension", "manifest_version": 2, "browser_action": { "default_title": "First Extension", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128-p.webp

Pour référence sur le code manifeste, accédez à

Étape 4: ajouter une fenêtre contextuelle

Cette extension aura une fenêtre contextuelle. Le popup est un fichier HTML (Hypertext Markup Language), il est donc bon d'apprendre d'abord les bases de HTML, CSS et JavaScript.

Tout d'abord, enregistrez un document en tant que fichier « popup.html » dans le dossier d'extension.

Ensuite, modifiez le fichier manifeste pour afficher « popup.html » lorsque vous cliquez dessus. Le nouveau code est ci-dessous:

{

"name": "First Extension", "version": "1.0", "description": "Je peux coder une extension", "manifest_version": 2, "browser_action": { "default_title": "First Extension", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128-p.webp

N'oubliez pas la virgule !

Maintenant, si le code HTML suivant est ajouté dans popup.html, il affichera « Hello World » lorsque vous cliquerez dessus.

Bonjour le monde

Étape 5: Rendez-le beau et rendez-le interactif

Si une ligne HTML de base est tapée, alors elle fait le strict minimum. Si CSS (Cascading Style Sheets) est ajouté, alors il aura l'air plus cool, et si JavaScript est ajouté, alors il peut être plus interactif. Ce didacticiel n'entrera pas dans les détails pour expliquer HTML, JavaScript et CSS, mais il existe de nombreuses ressources en ligne. Vous trouverez ci-dessous le code du programme simple "Hello World", puis le programme le plus coloré, respectivement:

Bonjour le monde

Bonjour le monde

#hello{ background-color: #000000; couleur: #ff0000; bordure: 8 px de départ #86a3b2; rayon de bordure: 50px; transformation: rotation (57 degrés); rembourrage: 10px; sélection par l'utilisateur: aucun; curseur: réticule; transition: transformer 2s; } #hello:hover { transform: rotate(-417deg); }

Ce deuxième exemple pourrait être très déroutant, pour un débutant. Mais, c'était pour vous montrer à quel point CSS est important pour un programme/une extension. Ce serait maintenant le bon moment pour faire une pause et apprendre le codage HTML5 et utiliser developer.chrome.com comme référence. Cela peut prendre un certain temps, mais une grande extension peut être faite.

Étape 6: le publier sur le Chrome Web Store

Si quelqu'un a fait une très bonne extension et qu'il veut la partager avec le monde, alors il peut la publier. C'est, après tout, le point d'une extension. Ce tutoriel a seulement essayé d'expliquer le fichier manifeste, et comment vous pouvez l'utiliser, et il avait juste un programme "Hello World".

La première chose à faire pour rendre une extension publique est de transformer le dossier d'extension en un fichier zip. La deuxième chose à faire est d'aller sur https://chrome.google.com/webstore/category/extensions et de vous connecter à un compte google. Ensuite, cliquez sur le bouton d'engrenage des paramètres, puis sur « tableau de bord du développeur ». Appuyez sur le bouton « Nouvel élément » pour télécharger le fichier zip. Une fois là-bas, il est nécessaire de modifier la liste du magasin, la confidentialité et les prix. Une extension peut être publiée facilement si elle est soumise pour révision.

Maintenant que l'extension est terminée, continuez à coder !