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 afficher des données sous forme de tableau dans la console Google Chrome ?

Aujourd'hui, je vais te montrer une petite astuce pour afficher les éléments HTML d'une page (balises Hx, meta tags, liens, etc.) sous forme de tableau, directement dans la console Chrome. Pour parvenir à ce résultat, je vais utiliser deux petits "utilitaires" bien pratiques : $$() et table(). Récupérer des données avec $$() Une

Comment afficher des données sous forme de tableau dans la console Google Chrome ?
Membres Public

Comment faire la capture d'écran d'une page entière sur Chrome sans extension ?

Est-ce que tu savais qu'il était possible, sur Google Chrome, de faire un screenshot d'une page web au complet sans passer par une extension ? Pour ma part, j'ai découvert ça il y a seulement quelques semaines et depuis je ne me sers plus du tout de l'extension que j'avais installée

Comment faire la capture d'écran d'une page entière sur Chrome sans extension ?
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 ?