Créer une WebExtension

Les WebExtensions sont les modules complémentaires (ou add-on) que nous ajoutons à nos différents navigateurs pour leurs ajouter des fonctionnalités. Elles ont l'avantage d'être, de manière générale et avec parfois quelques adaptations, compatibles avec l'API de plusieurs navigateurs comme Chrome, Firefox, Opéra, Edge (oui oui !). Dans cet article, nous allons le créer et le tester en suivant les directives fournies par Mozilla.

Customisez vos pages web grâce à Greasemonkey et JQuery sur FireFox

greasemonkey

GreaseMonkey est une extension de Firefox qui vous permet de personnaliser la façon dont une page Web s’affiche ou se comporte, en utilisant du JavaScript.

En d’autres termes, GreaseMonkey vous permet d’écrire vos propres scripts, afin de modifier n'importe quelle page internet selon vos désirs: modifier/ajouter/supprimer du code HTML ou JavaScript, changer les couleurs/styles/dispositions, ajouter de nouvelles fonctionnalités, etc.

Hello World ! Un plugin Firefox 4 avec le JetPack SDK

Le navigateur Web et certainement l’un des programmes les
plus utilisés dans notre domaine d’activité. Y intégrer des
fonctionnalités additionnelles peut s’avérer d’une grande utilité en termes d’ergonomie
et d’efficacité, pour nos clients comme en interne. De bonnes connaissances en Javascript seront nécessaires pour développer un plugin, grâce au JetPack SDK de Mozilla.

Attention, ça va aller très vite !!!

Firebug et ses extensions

L'un des outils privilégiés lors du développement de pages web est Firebug (utilisable sur Firefox uniquement). Pour ceux qui ne le connaissent pas ou peu, il s'agit d'un outil qui de base lui permet de debugger, éditer de l'HTML, CSS et du Javascript dans une page. Un des grands avantages de Firebug est sa capacité de lui ajouter différentes extensions pour de nouvelles fonctionnalités. Voici les extensions que j'ai pu trouver en surfant un peu partout et mon avis personnel mais j'encourage chacun à compléter la liste et à donner son avis.

Javascript

Firebug Code Coverage

Cette extension permet de déterminer les fonctions Javascript appelées ou non dans une page.

Firebug Code Coverage
Firebug Code Coverage

FireQuery

Cette extension permet de développer plus aisément des pages contenants du JQuery.

FireQuery
FireQuery

FireUnit

Cette extension permet d'effectuer des tests unitaires Javascript

FireUnit
FireUnit

Inline Code Finder for Firebug

Cette extension  permet de "surligner" les éléments suivants :

  • les évènements Javascript inline
  • les styles inline
  • les liens Javascript

Il est recommandé pour bien séparer le contenu du style et des interactions (surtout dans le cas de l'unobtrusive Javascript)

Inline Code Finder for Firebug
Inline Code Finder for Firebug

CSS

CSS Usage

Cette extension permet de voir les règles CSS utilisées dans la page et celles qui ne le sont pas.

CSS Usage
CSS Usage

FireFile

Cette extension permet de sauvegarder les modifications de CSS réalisées dans Firebug.

FireFile
FireFile

FireFontFamily

Cette extension permet de surligner les "font-family" qui sont utilisés dans le rendu de la page dans le panneau

FireFontFamily
FireFontFamily

FirePalette

Cette extension fournit un color picker dans le panneau CSS.

FirePalette
FirePalette

Firepicker

Cette extension fournit un color picker dans l'éditeur inline de CSS.

Firepicker
Firepicker

Firequark

Cette extension permet principalement d'extraire les sélecteurs CSS sur un élément de la page courante.

Firequark
Firequark

Performances

Hammerhead

Cette extension permet d'ajouter un panneau pour effectuer des mesures de chargement de temps de pages.

Hammerhead
Hammerhead

Jiffy

Cette extension ajoute un onglet à Firebug pour visualiser les mesures de temps fournies par Jiffy-Web.

Jiffy
Jiffy

Page Speed

Cette extension est proposée par Google pour contrer l'extension de Yahoo ( YSlow ) et qui permet d'évaluer les performances d'affichage de la page. Elle fournit également des conseils pour améliorer celles-ci.

Page Speed
Page Speed

SenSEO

Cette extension permet d'analyser une page et d'indiquer la manière de bien remplir celle-ci pour un bon référencement dans les moteurs de recherches.

SenSEO
SenSEO

YSlow

Cette extension analyse les performances de la page et préconise des règles de développement pour améliorer celles-ci.

YSlow
YSlow

Aide graphique

Firediff

Cette extension permet de surligner les modifications qui ont eu lieu au sein du DOM et des CSS.

Firediff
Firediff

FireFocus

Cette extension permet de suivre l'élement qui a actuellement le focus.

FireFocus
FireFocus

FireLinkReport

Cette extension permet de visualiser tous les liens présents dans une page (inclus les mailto, ftp, javascript)

FireLinkReport
FireLinkReport

FireRainbow

Cette extension permet d'ajouter la coloration syntaxique au javascript. Très pratique pour s'y retrouver dans le code.

FireRainbow
FireRainbow

Pixel Perfect

Cette extension permet d'ajouter un calque image par dessus le HTML développé.

Pixel Perfect
Pixel Perfect

Autres langages

AMF Explorer

Cette extension permet de visualiser les messages AMF désérialisés dans l'onglet réseau.

AMF Explorer
AMF Explorer

Chromebug

Cette extension est utilisée pour le débuggage des applications XUL pour Chrome. Personnellement je ne m'en suis jamais servi et à moins de faire un plugin pour Firefox ou Firebug, je ne pense pas m'en servir

Chromebug
Chromebug

ColdFire

Cette extension permet d'ajouter les informations de débuggage sur les applications ColdFusion

ColdFire
ColdFire

Drupal For Firebug

Cette extension permet d'ajouter des fonctionnalités propres à Drupal.

Drupal For Firebug
Drupal For Firebug

FireAtlas

Cette extension permet de débugger des pages en ASP .NET AJAX

FireAtlas
FireAtlas

FirePHP

Cette extension permet d'utiliser la console de Firebug pour une application PHP.

FirePHP
FirePHP

FirePython

Cette extension est une console de log pour Python

FirePython
FirePython

Firesymfony

Cette extension permet d'intégrer le débuggage d'application développé avec le framework PHP Symfony.

Firesymfony
Firesymfony

Flashbug

Cette extension permet d'afficher les sortie des fichiers flash (nécessite Flash Player Debugger)

Flashbug
Flashbug

LiveCoder

Cette extension permet d'avoir un regard plus avancé sur les fonctionnalités de Firebug, permettant d'éditer des fonctions. Il est utile au développement de plug-in pour Firefox.

LiveCoder
LiveCoder

Divers

CodeBurner

Cette extension permet d'ajouter une fonction d'historique dans l'onglet réseau.

CodeBurner
CodeBurner

Firebug Paints Events

Cette extension permet d'ajouter des références sur les tags HTML et sur les CSS

Firebug Paints Events
Firebug Paints Events

Firebug Net Panel History Overlay

Cette extension permet de connaître et d'afficher les zones de l'écran qui ont subi un "paint" ou un "reflow".

Firebug Net Panel History Overlay
Firebug Net Panel History Overlay

Firecookie

Cette extension permet des gérer les cookies présents dans le navigateur.

Firecookie
Firecookie

Fireclipse

Cette extension permet de faire communiquer Firebug et Eclipse.

Firefinder

Cette extension permet de trouver simplement des éléments HTML présents dans la  page grâce à des sélecteurs CSS ou des expressions XPath.

Firefinder
Firefinder

FireSpider

Cette extension permet de trouver les liens brisés et d'optimiser la page courante pour les moteurs de recherches.

FireSpider
FireSpider

FireXPath

Cette extension permet d'éditer inspecter et générer des expressions XPath dans la page. Très utile dans le cas de l'écriture de tests Selenium par exemple, ou pour de l'analyse de site.

FireXPath
FireXPath

FormBug

Cette extension permet de développer de manière simplifier les formulaires.

FormBug
FormBug

Log to Net panel

Cette extension permet d'ajouter dans l'onglet réseau des logs depuis l'exécution du Javascript

Log to Net panel
Log to Net panel

NetExport

Cette extension permet d'exporter les données de l'onglet réseau.

NetExport
NetExport

Omnibug

Cette extension permet d'obtenir des détails sur les requêtes effectuées.

Omnibug
Omnibug

XRefresh

Cette extension permet de rafraîchir  automatiquement la page lorsque les fichiers de ressources sont modifiées.

XRefresh
XRefresh

Widerbug

Cette extension est une optimisation de Firebug pour les écrans widescreen.

Widerbug
Widerbug

Cette liste est loin d'être exhaustive, de nouvelles extensions sortent jour après jour. Celles-ci peuvent se trouver sur le site des addons de firefox :

Pour les autres navigateurs, il existe une version allégée de Firebug mais sans la possibilité (à ma connaissance) de pouvoir rajouter tous ces plug-ins.

Gestion des attributs – IE vs FF

Un nouvel exercice m'a permis de trouver de nouvelles différences entre Internet Explorer et Firefox (et je pense les autres navigateurs aussi)

Il s'agissait de modifier le style d'un élément, jusque là rien de difficile me direz vous. Faux

Premièrement, il a fallu récupérer l'élément où je voulais modifier le style (en fait je modifie l'élément suivant). Cet élément est le tag <label> et ce qui permet de le différencier c'est l'attribut for ce qui nous donne quelque chose de la forme :

<label for="IEvsFF">

Pour cela, en javascript, je faisais quelque chose comme :

var labels = document.getElementsByTagName("label");
for(var i = 0; i < labels.length; i++){ if( labels[i].getAttribute("for") == "IEvsFF"){ .... // Mon traitement } }

Ce qui passe bien sur Firefox. Cependant le résultat n'est pas le même sur Internet Explorer, en fait je n'ai rien même pas un message d'erreur. Aïe, aïe.

Après un debug, je m'aperçois que l'attribut s'appelle htmlFor. Du coup, ça marche mieux ! Et donc mon code devient quelque chose du genre :

var labels = document.getElementsByTagName("label");
for(var i = 0; i < labels.length; i++){ if (typeof ActiveXObject != "undefined") { if(labels[i].getAttribute("htmlFor") == "IEvsFF"){ .... // Mon traitement } } else{ if(labels[i].getAttribute("for") == "IEvsFF"){ .... // Mon traitement } } }

Merci l'alourdissement et l'imbrication des if.

Bon j'ai récupéré mon élément, maintenant je vais modifier son style tout simplement de la manière suivante :

myElement.setAttribute('class', 'topinambour');

Sous Firefox, pas de soucis tout marche bien. Par contre IE rien du tout, il modifie bien l'attribut dans le DOM (vérifié sur Firebug lite) mais il n'a pas l'air de modifier les couleurs.

Après quelques recherches, je tombe sur le fait qu'Internet Explorer ne gère pas l'attribut class de la même manière que les autres navigateurs. Voici ce qu'il faut à la place :

myElement.setAttribute('className', 'topinambour');

Et il faut donc modifier le code en conséquence de la même manière que précédemment.

Super !

Donc encore une fois, il faut rajouter plein de code pour gérer le fait qu'Internet Explorer ne gère pas le DOM de la même manière que les autres navigateurs ce qui alourdit la travail des développeurs que nous sommes.

Pour d'autres subtilités je vous conseille la lecture de l'article suivant : http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/