Ma première extension : HTML5 Button

Ma première extension : HTML5 Button

L'extension HTML5 Button indique dans son bouton si la page affichée utilise le HTML5. Pour se faire, elle vérifie le doctype utilisé. …

Pourquoi

Voila 3 choses qui m'ont poussée à créer ma première extensions :

  • J'aime les standards et par extension, j'aime HTML5 ;
  • Je ne vois pas l'intérêt d'une extension si c'est pour faire la même chose qu'un userJS ;
  • J'avais envie de comprendre comment faisait une extension pour modifier 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'extension HTML5Powered, qui affiche une icone dans le coin en haut à droite de la page.
À quoi bon puisque les extensions peuvent le faire dans un bouton.

Pour ce qui est de changer l'icone du bouton d'une extension, ça avait l'air plutôt coton lorsque j'avais lu différent forum où des gens rencontrait des difficultés à le faire.

Finalement ça c'est révélé être assez facile. Il suffit de créer le bouton normalement :

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 changer son icone :

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

Comment

Pour réaliser cela, je me suis basé sur l'extension HTML5Powered qui présente le mécanisme de détection du doctype et sur Flag button qui, elle possède le mécanisme de mise à jour du bouton.

Il m'a tout de même fallu un peu de gymnastique cérébrale, car l'extension se compose de 2 parties, un fichier javascript, chargé comme un userJS, lui détecte le doctype :

var doctype = document.doctype;

et, ensuite, là ça se corse, le communique 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 fonction est déclanger par l'envoie de ce fameux message :

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

Ensuite, il suffit de mettre à jour l'icone du bouton comme indiqué précédemment.

Challenge de dernière minute

J'allais publier mon extension lorsque je me suis aperçu que l'icone ne changeait pas lorsque je passer d'un onglet à l'autre.

Pourquoi : parce que la mise à jour n'était déclenchée que par le chargement d'une pas et non lors de son affichage.

La solution est de déclencher la détection du doctype sur un nouvel évènement, l'affichage d'une page déjà chargée : onfocus.

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

Ce qu'il me reste à faire

… ou à trouver :

  • Comment faire fonctionner l'extension même sur la page https://addons.opera.com/addons/extensions/ : Flag Button y arrive ;
  • Comment passer une variable à la fonction postMessage() : pour l'instant je n'arrive qu'à faire passer des chaines de caractères.

Page de l'extension

https://addons.opera.com/addons/extensions/details/html5-button/

Copies d'écran


Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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