Chrome: parce qu'un jour nous vivrons tous dans un navigateur!
Ceux qui me connaissent savent que j'aime beaucoup Google, donc j'aime Chrome. J'avais déjà lu des tutoriels sur les extensions de Chrome, mais je n'avais jamais vraiment fait de quoi de concret. Or, un collègue de travail a récemment créé un site pour rapetisser des URLs, et ça m'a donner une idée de créer un petit extension très simple qui appel son service Web et me retourne l'URL rapetissé (l'extension sera disponible sur le site officiel des extensions de Chrome sous peu, j'attends simplement de créer un package pro: icône, descriptions, screenshots, etc. ;)
Ceci dit, après quelques heures de R&D sur le sujet, l'extension m'a pris une ou deux heures à créer. C'est très simple et efficace.
Extension Chrome, ce qu'il faut savoir.
Non, je ne ferai pas un autre tutoriel pour créer une extension de Chrome; il en existe déjà beaucoup. Par contre, voici les problèmes que j'ai rencontrés, et peut-être ça pourra vous aider à ne pas perdre trop de temps lorsque vous allez créer votre première extension.
- Les permissions
C'est important de comprendre le concept de permission dans une extension. D'abord, lorsque le fichier manifest.json est créé, il faut ajouter toutes les sites que l'extension utilisera. Dans mon cas, j'avais besoin de JQuery, le service de Shortoritos et de l'api Tabs de Chrome. J'ai donc dû ajouter ces trois objets dans le manifest:
À noter que si j'avais utilisé JQuery localement, je n'aurais pas eu besoin d'ajouter la permission de Google API's.{ ... "permissions": ["tabs", "http://ajax.googleapis.com/", "http://stos.me/"] ... }
- Le "inspect popup", ou comment déboguer mon extension
En mode de développement, c'est possible d'utiliser l'inspecteur de Chrome (CTRL+SHIFT+J) pour son extension. Il faut simplement cliquer avec le bouton de droit de la souris sur l'icône de l'extension et choisir "Inspect Popup".
À noter que l'action d'inspecter refait l'action de cliquer (refresh) sur l'icône. Alors, si vous voulez mettre un break point, il faudra bous mettre une alerte dans le document.ready afin de pouvoir bloquer le processus y mettre le break point. Je ferai un post sur l'utilisation du débogueur de Chrome plus tard... - Confusion sur le background page, content-script, etc.
En faisant mes recherches pour utiliser JQuery.ajax afin d'appeler le service web, j'ai trouvé beaucoup d'explications différentes sur le sujet, mais rien n'a été vraiment concluant. En gros, les bonnes pratiques veulent que les appels soit délégués à une page (SRP), mais dans mon cas, je n'avais pas besoin de tout ça.
KIS(S): L'appel ajax peut se faire simplement dans le fichier html qui se fait appeler par le bouton:
$(document).ready(function () { ... $.ajax({ url: "http://stos.me/shortme.ashx?u=http://www.google.com" }, ... ); ... });
