Creation d’un plugin chrome, partie 1

Allez c’est parti. Va savoir si j’irais jusqu’au bout. Toujours est-il que j’ai décidé de faire une série d’article sur la création d’extension/plugin pour Google Chrome…Tu as quelques connaissance en html, javascript ? Et bien te voilà développeur d’extension chrome. Allons-y.

Commençons par le commencement chef…Si tu as déjà Google Chrome, vas jeter un oeil du côté des extensions pour voir un peu comment se passe la chose.

Si j’ai décidé de faire quelques tutos sur la création de plugin, c’est suite à quelques découvertes bien intéressantes sur les principe de création sous Chrome.

Alors pour ne pas faire comme tout le monde et coller notre extension dans le repertoire Google, on commencer par voir comment Stocker notre extension sur un site ( le notre ) et apprendre à notre extension à bosser en tâche de fond sans aucune intervention de notre part.

J’adore Google Chrome pour cette dernière phrase: « Une Extension Chrome Peut Faire Des Choses Sans Intervention ».

Facile, même pas un bouton à cliquer, géniale non ? Tu installes ton extension, ok tu cliques une fois…mais ensuite, la mise à jour se fait toute seule et ton extension peut lancer des actions autonomes sur la page que tu visites.

Point fort également…et c’est tout bête à y repenser. Je suis quelque peu curieux sur les extensions SEO, que ce soit pour Firefox ou Chrome. Mais dernièrement, en apprenant que Google Chrome permettait les requêtes Cross-Domain, je me suis rendu compte de la supercherie de la toolbar Google qui va checker le Pagerank de la page visitée en externe. Il suffisait de réagir

Si tu codes un peu en PHP et que tu as quelques notions de Scraping par exemple, tu dois savoir que récupérer le PR de quelques Pages sur Google te vaut au bout de quelques requêtes un petit banissement de ton adresse IP. On est d’accord sur ce point ? Bon, donc lorsque tu ouvre ton navigateur avec la toolbar google par exemple, a chaque navigation, la toolbar va chercher le pagerank tel un Scraper…Mais sans se faire virer à tout bout de champ. Tu commences à comprendre où je veux en venir, j’en suis certain.

Alors je me suis mis à faire le tour des plugins Chromes, vu comment certains aller chercher le pagerank avec un hash et une requête du type:

function getGooglePr(url) {

    try {

        if (url.indexOf("#") != -1) {

            url = url.substring(0, url.indexOf("#"))

        }

        var hash = awesomeHash(url.split("//")[1]);

        var query = "http://www.google.com/search?client=navclient-auto&ch=8" + hash + "&features=Rank&q=info:" + url.split("//")[1];

        var xhr = new XMLHttpRequest();

        xhr.open("GET", query, false);

        xhr.send();

        var pageRank = "N/A";

        if (xhr.responseText.length < 15) {

            pageRank = xhr.responseText.split(":")[2].split("\n")[0]

        } else {

            pageRank = "0"

        }

        return trim(pageRank)

    } catch (e) {

        console.log(e);

        return "0"

    }

}

Joues donc avec ça sur ton site et tu vas vite te rendre compte que c’est quasi impossible sans jouer avec des Iframes ou autres choses.

Bref, passons, tu as compris quelques chose d’important ici. C’est que l’on peut requêter sans Curl, sans PHP, ni rien grâce à un navigateur ( qui ouvre en quelques sortes des fenêtres invisibles ).

Débutons notre plugin pour comprendre un peu mieux la chose.

On va se la jouer funny pour débuter ok ? Parce que moi, j’adore coder mais comme toi peut-être j’apprends encore. Le javascript et moi, ça fait encore 2 alors je joues avec jQuery pour aller plus vite.

Notre plugin sera donc sur notre site…Bien mieux pour faire des conneries que de le mettre sur Google hein, tu me comprendras. Pour celà, il te faut un fichier XML sur ton site. C’est ce fichier qui dira à Google Chrome si oui ou non la version de ton plugin est plus récente que celle que tu as installé.

Ce fichier ressemble à ceci ( on le nomme update.xml pour les besoins de l’article ):

< ? xml version='1.0' encoding='UTF-8' ? >

< gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>

  < app appid='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'>

    < updatecheck codebase='http://tonsite.com/chrome/extensions/tonextension.crx' version='0.2' / >

  < /app >

< /gupdate >

*Attention aux espaces pour le formatage du code sur le site. Rapidement tu as:

• xxxxxxxxxxx

  => La clé de ton extension, visible dans la page d’extension de Google Chrome si tu ouvres en mode développeur

• codebase= etc… .crx

  => C’est l’url par laquelle tu accède au ZIP ( si j’ai tout compris ) de ton extension, seul le format change de .zip pour .crx

• version=

  => La version de ton extension, la dernière…qui sera comparée avec les version déjà installé sur Chrome chez toi ou tes utilisateurs.

Rapide non ? en 5 minutes, tu as un sytème complet de gestion des updates de tes extensions. En sachant que Chrome mettra à jour sans que ton utilisateur n’est besoin de cliquer sur un bouton. Pa défaut Google Check les mises à jour toute les heures il me semble.

- Les renseignements de Google Lui-même

ça, c’est fait, tu sais déjà comment mettre à jour , il te suffit d’envoyer ta nouvelle extension empaquetée ( on y vient ) sur ton serveur à l’adresse que tu auras indiqué dans ton fichier d’update.

Passons à l’extension elle-même

Alors là fastoche, j’ai pour habitude de mettre mes codes dans mon dossier wamp/www, tu peux évidemment mettre ça ou tu veux et lancer n’importe quel programme d’édition…Notepad++ est un bon compromis entre l’éfficace et le rapide.

Tu crées un dossier bidon ( /monpremierplug/ ) ou tu vas créer un 3 fichiers de bases en html.

• popup.html
• background.html
• options.html

- Popup sera la fenêtre de ton plugin qui s’ouvre lorsque tu clic sur l’icone d’une extension.

- Background est la page qui va bosser en arrière plan ( temps que tu auras ton navigateur ouvert, cette page peut-être utilisée)

La page options sera en règle générale un formulaire pour enregistrer les options du plugin…Afficher ou non des infos, trier , modifier des attributs CSS, etc…

Voilà trois pages de départ…Pour un peu plus de confort, on va refaire la même chose mais cette fois-ci en Javascript dans un dossier JS: js/popup.js, js/background.js et js/option.js

C’est rangé, ordonné, 3 fichiers html à la racine de ton extension, 3 autre .js dans un repertoire /js. On pousse plus loin et on va ajouter de suite un 4ème fichier js, content_script.js

Pour les trois premiers, ce seront bien sûr des fichiers reliés et agissant avec leur équivalents html. Content_script en revanche agit sur le contenu de la page visitée dans le navigateur ( modification css, ajout de balises, calcul de lien nofollow par exemple, etc… ), tu n’auras donc besoin d’aucune autre page html pour ce dernier car il interagit avec la page en cours.

Je t’explique comment faire pour le CSS ou tu vas trouver toi-même , idem que pour les fichiers JS: css/popup.css, etc…

Le fichier manifest.json, la configuration du plugin

J’ai dis que j’allais faire plusieurs tutos, hein !!! Alors je vais finir ce premier par la création basique du fichier de configuration

Nous en sommes donc à 2 repertoires ( css & js ) et 3 fichiers html en racine du repertoire de l’extension. A cette racine, tu vas ajouter un fichier manifest.json, ce fichier est le fichier qui sera lu par Google chrome pour comprendre, ou quand et comment…C’est dans ce fichier, entre autre, que tu vas retrouvé la version du plugin en cours et l’url du fichier update.xml vu plus haut.

Ce fichier sera évidemment composé de données en Json, en voici un exemple

{
   "background_page": "background.html",
   "browser_action": {
      "default_icon": "img/icon.png",
      "default_title": "BH Chromium",
      "popup": "popup.html"
   },
   "content_scripts": [ {
      "css": [ "css/content-script.css" ],
      "js": [ "js/jquery.min.js", "js/helpers.js", "js/content_script.js" ],
      "matches": [ "http://*/*", "https://*/*" ],
      "run_at": "document_end"
   } ],
   "description": "BH Chromium Google Chrome",
   "icons": {
      "128": "img/icon128.png",
      "48": "img/icon48.png"
   },
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDJuqT2ZxwzeaB7L2HohpNDjEQ/hEf542Wf3UoARKhXfb55iu6eWwrzv7g/VZdfP7MJdXdIf+IBnKmwruZkZ1knoPwhQn5kUX3hQPNhwJuknEitEsFe8jdbNF4CILleK+uBVLBewp+CiLBKQKI/UiATENLTFtv02HuEHszIu+BDtwIDAQAB",
   "name": "BH Chromium",
   "options_page": "options.html",
   "permissions": [ "http://*/*", "https://*/*", "tabs" ],
   "update_url": "http://tonsite.com/chrome/extensions/updates.xml",
   "version": "0.1"
}

Voilà, c’est tout. Je n’étale pas les explications pour te pommer en pleine lecture.

Il faut juste retenir pour l’instant ces deux ou trois choses:

• version => la version du plugin installé ( ici la 0.1 sera mise à jour car le fichier xml sur le serveur distant parle d’une version 0.2 disponible, ok ?
• update_url => c’est tu le comprendras l’url où Chrome devra chercher les mises à jour.

Et voilà…J’adore laisser les gens chercher alors tu vas me faire plaisir hein et chercher ce que veulent dire les autres configurations. Tu vas voir c’est assez simple

A savoir que pour le prochain article, je commencerais surement par la configuration « permissions », je te laisse deviner ce que cette configuration permet ( It’s Magik ! ).

En complétant correctement name, browser_action et les autre vu ci-dessus, tu peux déjà te rendre sur chrome, partie outils => extension, et cliquer sur « Mode Développeur » qui laissera apparaitre quelques onglets. Charger l’extension non empaquetée, c’est ce que tu vas utilisé pour charger ton extension sous chrome…et voilà, ton extension ne fait encore rien mais elle est active et peut se mettre à jour toute seule

Il faut juste retenir que, comme tu l’auras deviner, le bouton « Empaqueter l’extension » va te permettre de transfomer ton dossier /monpremierplug/ en monpremierplug.crx ( ton extension packagée ).

Je finirais ici pour ce soir, on se bip bientôt pour aller un peu plus loin, pour l’instant , on a juste un squelette qui ne fait pas grand chose ( quoique ). Nous allons lui donner un peu de vie prochainement.

Ressources pour débuter rapidement en attendant ( je remplirais au fur et à mesure )

• Créer une extension Chrome

Recherches récentes:

• créer un plugin chrome
• créer plugin chrome
• plugin chrome créer
• developper un plugin chrome
• creer plugin google chrome
• empaqueter extension chrome
• écrire plugin chrome
• comment faire un plugin chrome
• realiser des plugin sous chrome
• comment develloper un module sur google chrome

• Création d’une extension chrome – Partie 4