Aller au contenu

Comment créer et publier une extension Chrome ?

Antoine Brisset
Antoine Brisset
Temps de lecture : 3 min
Comment créer et publier une extension Chrome ?

Table des matières

Ça faisait déjà un petit moment que je voulais créer une extension Chrome.

Et bien... c'est désormais chose faite !

La semaine dernière, j'ai lancé Centuple.

Centuple, c'est une petite extension gratuite qui permet d'afficher 100 résultats Google en un clic (ça marche sur n'importe quelle version du moteur de recherche).

Le fonctionnement est ultra basique :

  • clique une fois sur l'icône pour afficher 100 résultats par page
  • clique une deuxième fois sur l'icône pour revenir à 10 résultats par page

Tu te dis peut-être : OK, mais t'avais déjà fait un bookmarklet, alors quel intérêt ?

À vrai dire aucun, si ce n'est la curiosité... et le fun !

Je voulais comprendre comment faire pour transformer un bookmarklet en extension.

Au final, c'est plutôt simple. Je te montre !

Création de l'extension

Un package d'extension Chrome se compose :

  • d'un fichier manifest.json, qui est une sorte de fichier "à propos" contenant le nom de l'extension, sa description, sa version, etc.
{
  "background": {
     "service_worker": "background.js",
     "type": "module"
   },
  "action": {
    "default_icon": "icon-128.png",
    "default_title": "Centuple"
  },
  "name": "Centuple",
  "description": "Display 100 Google search results on one page",
  "homepage_url": "https://www.seomemento.com",
  "icons": {
    "16": "icon-16.png",
    "48": "icon-48.png",
    "128": "icon-128.png"
  },
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "version": "0.1",
  "manifest_version": 3
}
Fichier manifest.json
  • d'une icône de 128px au format PNG
Icône de Centuple
  • d'un fichier JS contenant le code à exécuter
url = new URL(window.location);urlParams=url.searchParams;if(url.hostname.match(/^www.google./) && url.pathname == '/search'){if (!urlParams.get('num')){url.searchParams.set('num', 100);location.href=url.toString()}else{url.searchParams.delete('num');location.href=url.toString()}}
Fichier JavaScript
  • d'un fichier background.js indiquant quelles actions doivent être exécutées en fonction de quel événement : dans mon cas, au clic sur l'icône de l'extension, le script JS doit être injecté et exécuté dans la page
chrome.action.onClicked.addListener(function(tab) {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['bookmarklet.js']
  });
});
Fichier background.js

Et c'est tout !

Pour aller plus vite dans le développement de l'extension, j'ai utilisé cet outil qui permet de convertir un bookmarklet en extension.

Le zip généré contenait des fichiers dont la syntaxe n'était plus tout à fait conforme aux exigences de Google Chrome (le site utilise notamment le Manifest V2 alors que le Chrome Web Store n'accepte désormais que le Manifest V3).

J'ai donc du adapter un peu le code en m'appuyant sur la documentation.

Pour m'assurer qu'il n'y avait aucune erreur, j'ai chargé mon extension dans Chrome.

Voici comment faire :

  • Accéder à chrome://extensions dans Google Chrome
  • Activer Mode développeur en haut à droite
  • Cliquer sur Charger l’extension non empaquetée puis sélectionner le répertoire contenant les fichiers de l'extension
chrome://extensions

Si aucun message d'erreur ne s'affiche et que l'extension fonctionne bien une fois activée, c'est bon, tu peux passer à la suite !

Publication de l'extension

D'abord, il faut zipper le dossier contenant les fichiers de l'extension.

Puis créer un compte sur le Chrome Developer Dashboard et uploader le package.

Chrome Web Store

Ensuite, il faut remplir le formulaire de soumission :

  • Fiche Play Store : c'est ici que tu présentes l'extension (nom, description), que tu choisis une catégorie, que tu ajoutes un logo, etc.
  • Pratiques en matière de confidentialité : c'est ici que tu décris l'objectif de l'extension et que tu justifies les autorisations demandées au navigateur
  • Paiements et distributions : c'est ici que tu indiques si l'extension est payante ou non

Dernière étape : tu cliques sur le bouton Envoyer pour examen.

Et... tu attends !

Dans mon cas, quelques jours plus tard, c'était validé 😀

Voilà, j'espère que ça pourra t'être utile si tu souhaites toi aussi te lancer dans le développement d'une extension Chrome.

PS : si tu te poses la question, le lien vers www.seomemento.com sous le nom de l'extension dans le Chrome Web Store est malheureusement en nofollow ;)

Chrome

Antoine Brisset Twitter

Consultant SEO depuis 2010. Je traque les clics inutiles et automatise les tâches répétitives pour gagner du temps dans mon quotidien de travailleur du web.

Commentaires


Articles Similaires

Membres Public

Comment rechercher plus vite dans les onglets ouverts sur Google Chrome ?

J'ai une mauvaise habitude dont j'ai vraiment beaucoup de mal à me débarrasser : laisser des dizaines d'onglets ouverts en permanence. Pourtant, je le sais, le multitâche est un mythe (lisez à ce propos le livre The one thing), mais mon cerveau a encore beaucoup de mal à l'intégrer. J'entasse des

Comment rechercher plus vite dans les onglets ouverts sur Google Chrome ?
Membres Public

3 techniques pour ouvrir plusieurs URLs en même temps

Il y a quelques semaines, je t'ai partagé une technique pour ouvrir l'admin WordPress de plusieurs articles en même temps. Aujourd'hui, je vais aller un peu plus loin en te proposant 3 techniques pour ouvrir plusieurs URLs en un clic. Je ne sais pas pour toi, mais de mon côté

3 techniques pour ouvrir plusieurs URLs en même temps
Membres Public

Mon astuce pour accéder rapidement à un site protégé par login/mot de passe

Aujourd'hui, petite astuce qui, si tu ne la connais pas encore, va te faciliter la vie. Je suis sûr que tu as déjà vécu ce moment plus d'une fois. Tu dois recetter un site sur un environnement protégé par login + mot de passe (ce qu'on appelle dans le jargon technique

Mon astuce pour accéder rapidement à un site protégé par login/mot de passe