1 - C'est quoi une extension Google chrome

Les extensions google chrome sont de petits logiciels qui personnalisent et améliore la navigation. Ils permettent aux utilisateurs d’adapter les fonctionnalités et le comportement de Chrome à leurs besoins et à leurs préférences. Ils reposent sur des technologies Web telles que HTML, JavaScript et CSS...

Une extension doit remplir un seul objectif, défini de manière étroite et facile à comprendre. Une seule extension peut inclure plusieurs composants et une gamme de fonctionnalités, dans la mesure où tout contribue à un objectif commun.

Une capture d'écran de l'icône d'une extension dans la barre de navigation. Les interfaces utilisateur doivent être minimales et intentionnelles. Ils peuvent aller d’une simple icône, telle que l’extension Google Mail Checker indiquée à droite, à la substitution d’une page entière.

Les fichiers d'extension sont compressés dans un seul paquet .crx que l'utilisateur télécharge et installe. Cela signifie que les extensions ne dépendent pas du contenu du Web, contrairement aux applications Web ordinaires.

Les extensions sont distribuées via le tableau de bord du développeur Chrome et publiées sur le Chrome Web Store.

2 - Créer son propre extension google chrome

2.1 - Structure de l'extension

Dans ce tutoriel nous allons voir comment créer une toute simple extension pour Google chrome qui permet d'afficher un message de bienvenue. Pour cela nous aurons besoin de deux fichiers à créer et leurs ajouter une icone :

• manifest.json
• popup.html
• img / icon.png (icone qui s'affiche en haut à droite sur le navigateur chrome)
   icon_128.png (icone qui s'affiche sur la page des extensions de google chrome)

2.2 - Code du fichier manifest.json

{
"manifest_version": 2,
"name": "Une simple extension ",
"description": "Affiche message de bienvenue", 
"version": "1.0", // indique la version de l'extension

"browser_action": { // indique les actions à réaliser
"default_icon" : "img/icon.png", 
"default_popup": "popup.html" // c'est ce popup.html qui va s'afficher lorsqu'on clique sur l'icone
},
"icons": { 
"128" : "img/icon_ext.png" // icone qui s'affiche sur le navigateur en haut à droite.
}
}

2.3 - Code du fichier popup.html

<style>
 h1,p{
     text-align:center
	 color:red;
    }
	
</style>
<h1>My Extension</h1>
<h2><marquee>Welcome to my first extension !</marquee></h2>

3 - Installation de l'extension

Activer maintenant le mode développeur pour google chrome en cliquant sur les trois points à droite en haut du browser et choisissez ensuite  Plus d'outils --> Extensions

Activer ensuite le mode développeur qui se trouve à droite en haut du browser :

Cliquez ensuite sur  le bouton charger une extension non empaquetée:

Sélectionnez ensuite le répertoire racine de votre extension:

L'extension est maintenant installée et est opérationnelle :

Younes Derfoufi
CRMEF OUJDA