Elles me servent à me notifier d'un évènement comme la réception de mails, de nouveau messages dans mes flux RSS et bien plus encore comme lecteur de radio web ou indicateur de batterie pour mon ordinateur portable.
Une seule me fait défaut, il s'agit d'une extension pour la météo, il en existe des dizaines mais aucune ne comble mes attentes.
J'ai besoin de la précision de Météo France que cela soit dans le choix des villes ou dans les prévisions en elles-même.
J'ai également besoin d'un affichage simple et visuel et enfin d'un icône animé pour avoir toutes ces informations en un coup d'oeil.
Vous l'avez compris cette extension n'existe pas et après avoir vu l'avancée de Météo France au niveau informatique je crois que je peux toujours attendre, en effet leur site ainsi que le site mobile est assez bien pensé mais leurs applications iPhone et Android ne sont pas du tout optimisées et ils ne proposent rien pour les sites web (hormis un truc moche qui a 10 ans) et encore moins d'extensions pour les navigateurs web !
J'ai essayé de leur laisser un message dans ce sens mais voilà le questionnaire à remplir :
Donc le dernier OS Windows est Vista et Chrome n'existe pas, je ne suis pas allé plus loin dans ma demande....
De toute façon la dernière extension iGoogle qui existait a été fermée à leur demande !
Bref me voilà parti dans la création d'extension Chrome, et là surprise, c'est enfantin.
En effet quelques pages html avec du javascript et surtout la possibilité d'utiliser du Jquery : le top !
Composition de l'extension :
- background.html : page chargée en arrière plan qui fait vivre l'extension
- background.js : j'ai décidé de coder dans cette page de script pour que cela soit plus propre que dans la précédente.
- manifest.json : description du package
- options.html : page d'options
- popup.html : page popup qui s'ouvre lorsque l'on clique sur l'icône de l'extension.
Fonctionnement de l'extension :
Je ne vais pas donner l'intégralité de mon source pour éviter les problèmes avec Météo France mais le fonctionnement global est le suivant :
- Aller chercher les données météo des villes qui m’intéressent (paramétrable dans les options)
- Afficher en popup la source Météo France de la ville sélectionnée
- Afficher sur l'icône de l'extension le cycle suivant :
- la météo active avec un badge indiquant la température
- le sens du vent avec sa force
- les rafales de vents
- Afficher une info-bulle regroupant toutes les informations récupérées :
Contenu des fichiers de l'extension :
Pour le contenu des fichiers voici la principal sans, comme je vous le disais, les routines complètes :
Fichier manifest.jsonMettre les permissions en fonction du site utilisé !
{
"name": "Meteo France",
"version": "2.0",
"description": "Previsions meteo France avec jQuery.",
"background_page": "background.html",
"options_page":"options.html",
"browser_action": {
"default_icon": "icon.gif",
"default_title": "Meteo France",
"popup": "popup.html"
},
"permissions": [
"http://...."
]
}
Fichier background.html
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src='background.js'></script>
</head>
<body>
</body>
</html>
Pour ainsi dire vide !
Il appelle le framework (latest) jQuery et mon script qui tourne dans mon fichier .js.
Le fichier background.js est donc le moteur, il récupère la page qui m’intéresse avec la fonction suivante :
$.get(monUrl, function(data) {
Puis je parse les informations utiles et je gère leur affichage via un timer et des boucles et cases !
Les fonctions Chrome utilisées sont les suivantes :
chrome.browserAction.setIcon({path:varIco})Les varXX étant mes variables locales.
chrome.browserAction.setBadgeBackgroundColor({color:[varR, varG, varB, varA]});
chrome.browserAction.setBadgeText({text:varTxt});
chrome.browserAction.setTitle({title: VarInfoB });
Pour la couleur du fond du badge, VarA est un pourcentage de transparence à faire varier entre 0 et 255, 255 étant le plus opaque non transparent.
La force du jQuery permet une utilisation facile des données, par exemple cette petite fonction me ramène
tous les <TD> d'une source :
$('table td', data).each(function() {Je n'ai plus qu'à récupérer un .html() ou .text() selon mes besoins et les mettre dans un tableau de variables.
Et voilà vous êtes prêts à créer votre première extension Chrome !
Voici quelques adresses utiles :
http://code.google.com/chrome/extensions/getstarted.html
http://code.google.com/chrome/extensions/browserAction.html
http://code.google.com/chrome/extensions/samples.html
Et n'hésitez pas à télécharger des extensions qui font ce que vous voulez faire et à regarder leur contenu depuis le répertoire Extensions de Chrome ;)
Aucun commentaire:
Enregistrer un commentaire