Ma première exten­sion : HTML5 Button

Ma première exten­sion : HTML5 Button

L’ex­ten­sion HTML5 Button indique dans son bouton si la page affi­chée utilise le HTML5. Pour se faire, elle véri­fie le doctype utilisé. …

Pourquoi

Voila 3 choses qui m’ont pous­sée à créer ma première exten­sions :

  • J’aime les stan­dards et par exten­sion, j’aime HTML5 ;
  • Je ne vois pas l’in­té­rêt d’une exten­sion si c’est pour faire la même chose qu’un userJS ;
  • J’avais envie de comprendre comment faisait une exten­sion pour modi­fier l’icone de son bouton.

Je ne reviens pas sur le premier point.

Pour ce qui est de faire la même chose que les userJS, je pensais à l’ex­ten­sion HTML5Po­we­red, qui affiche une icone dans le coin en haut à droite de la page.
À quoi bon puisque les exten­sions peuvent le faire dans un bouton.

Pour ce qui est de chan­ger l’icone du bouton d’une exten­sion, ça avait l’air plutôt coton lorsque j’avais lu diffé­rent forum où des gens rencon­trait des diffi­cul­tés à le faire.

Fina­le­ment ça c’est révélé être assez facile. Il suffit de créer le bouton norma­le­ment :

var theButton;
var ToolbarUIItemProperties = {
	title: "There is HTML 5 ?",
	icon: "images/Question_HTML5_Badge_64.png"
};    
theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
opera.contexts.toolbar.addItem(theButton);

Et ensuite de chan­ger son icone :

theButton.icon="images/No_HTML5_Badge_64.png";

Comment

Pour réali­ser cela, je me suis basé sur l’ex­ten­sion HTML5Po­we­red qui présente le méca­nisme de détec­tion du doctype et sur Flag button qui, elle possède le méca­nisme de mise à jour du bouton.

Il m’a tout de même fallu un peu de gymnas­tique céré­brale, car l’ex­ten­sion se compose de 2 parties, un fichier javas­cript, chargé comme un userJS, lui détecte le doctype :

var doctype = document.doctype;

et, ensuite, là ça se corse, le commu­nique au fichier index.html qui créé et met à jour le bouton grace à la commande suivante :

opera.extension.postMessage({q:"html"});

Dans le fichier index.html, une fonc­tion est déclan­ger par l’en­voie de ce fameux message :

opera.extension.addEventListener( "message", function(event){
...

Ensuite, il suffit de mettre à jour l’icone du bouton comme indiqué précé­dem­ment.

Chal­lenge de dernière minute

J’al­lais publier mon exten­sion lorsque je me suis aperçu que l’icone ne chan­geait pas lorsque je passer d’un onglet à l’autre.

Pourquoi : parce que la mise à jour n’était déclen­chée que par le char­ge­ment d’une pas et non lors de son affi­chage.

La solu­tion est de déclen­cher la détec­tion du doctype sur un nouvel évène­ment, l’af­fi­chage d’une page déjà char­gée : onfo­cus.

window.addEventListener("focus", send_doctype, false);

Ce qu’il me reste à faire

… ou à trou­ver :

  • Comment faire fonc­tion­ner l’ex­ten­sion même sur la page https://addons.opera.com/addons/exten­sions/ : Flag Button y arrive ;
  • Comment passer une variable à la fonc­tion postMes­sage() : pour l’ins­tant je n’ar­rive qu’à faire passer des chaines de carac­tères.

Page de l’ex­ten­sion

https://addons.opera.com/addons/exten­sions/details/html5-button/

Copies d’écran


Articles simi­laires :

Tagués avec : ,

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.