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 j'automatise les tâches répétitives pour gagner du temps dans mon quotidien de travailleur du web.


Articles Similaires

Membres Public

Une astuce pour gagner du temps sur Ereferer

Aujourd'hui, petite astuce rapide. Quand je me connecte sur Ereferer pour acheter un lien, je passe pas mal de temps à filtrer les sites pour afficher uniquement les spots susceptibles de m'intéresser. Une fois que j'ai la liste, j'aime bien prendre les

Une astuce pour gagner du temps sur Ereferer
Membres Public

Un snippet pour récupérer les mots-clés de la Search Console

Il y a quelques mois, je t'avais partagé un tuto sur les snippets Chrome. Tu te souviens ? Et bien cette semaine, justement, j'ai créé un snippet qui permet de récupérer les mots-clés affichés dans le rapport Performances de la Search Console. En fait, je trouvais ça

Un snippet pour récupérer les mots-clés de la Search Console
Membres Public

Trop de bookmarklets ? Utilise les snippets Chrome !

Au quotidien, j'utilise énormément les bookmarklets : vérification de balises meta, affichage du robots.txt, accès à la Google Search Console d'une page, etc. Le hic, c'est que j'en ai tellement, que je dois maintenant cliquer sur les deux petites flèches à droite

Trop de bookmarklets ? Utilise les snippets Chrome !