Catégorie « Firefox »

Enfin !

Ça y est, Tab Mix Plus est enfin compatible Firefox 3 ! C'était la dernière extension que j'attendais pour pouvoir mettre à jour, c'est donc chose faite :)

C'est l'occasion de relever un point noir sur le moteur de recherche d'extensions sur le site de Mozilla :

  1. en recherchant "tabmixplus" ou "tabmix", j'obtiens 5 résultats mais pas Tab mix plus (les 5 résultants faisant référence à l'extension dans leur description en tant que "TabMixPlus").
  2. en recherchant "tabmix plus", je n'obtiens aucun résultat.
  3. en recherchant "tab mix plus", je n'obtiens aucun résultat non plus est là c'est nettement moins compréhensible !
  4. ce n'est qu'en recherchant "tab mix" que j'obtiens enfin le résultat recherché.

En soi, ça peut se comprendre avec un algorithme simple de recherche (à part pour le point 3). J'ai d'ailleurs testé sur quelques sites pour voir et je n'en ai trouvé que parmi les moteurs de recherches (Google et Live Search) qui me trouvent les résultats en collant les mots.

C'est un point sur lequel les différentes implémentations de moteurs de recherches internes des CMS, forums, etc. devraient se pencher, parce que quand on cherche une marque ou un nom, on n'a pas forcément le découpage précis en tête...


JavaScript Debugger

Cet article est marqué comme contenant des informations dépassées depuis le 21/10/2018.
Cette extension n'existent plus, remplacée par les outils de développement natifs de Firefox.

Quand on a travaillé un peu sur des sites ou applications utilisant des JavaScript volumineux, on se rend compte assez vite que c'est laborieux. Les erreurs sont mal remontées, on n'a pas de stack trace, etc. Firefox est déjà largement au dessus d'Internet Explorer à ce niveau en fournissant une console d'erreur nettement plus lisible et fonctionnelle mais ça reste insuffisant sur des scripts complexes et fortement découpés en de nombreuses fonctions élémentaires.

Une solution au problème : JavaScript Debugger, une extension pour Firefox qui, comme son nom l'indique, implémente un débuggeur JavaScript.

JavaScript Debugger - fenêtre principale

Comme sur les débuggeurs disponibles pour les autres langages, on peut donc placer des point d'arrêt (breakpoint) permettant une exécution pas à pas du script, avec à chaque étape la possibilité d'inspecter toutes les variables définies et leurs valeurs. Ça ne résout pas tout mais ça aide grandement à comprendre ce qui arrive !

Malheureusement, cette extension est encore loin d'être parfaite : elle est assez lourde et ne se ferme pas toujours vraiment lorsqu'on ferme la fenêtre et même en fermant toutes les fenêtre Firefox, il arrive qu'il reste toujours une instance de Firefox qui traine dans les processus en cours et qu'il faut tuer à la main (sous Windows du moins, je ne l'ai pas testé sur un autre système).

Donc ce n'est pas parfait mais ça a le mérite de combler un gros manque, donc ça mérite le coup d'œil :)

Sinon, l'extension Firebug est censée fournir une partie de ces fonctionnalités également mais, jusqu'à présent, à chaque fois que j'ai tenté de l'installer elle m'a causé plus de problèmes qu'autre chose (instabilité du navigateur) donc je n'ai pas approfondi...


Encore quelques extensions pour Firefox...

Cet article est marqué comme contenant des informations dépassées depuis le 21/10/2018.
Seule Resurrect Pages a survécu à l'abandon du système d'extensions historique avec Firefox 57.

Quelques extensions qui peuvent s'avérer bien pratiques...

Prévisualisation - Split browser

Split browser

Comme son nom l'indique, cette extension permet de "splitter" l'affichage du navigateur entre plusieurs pages. Ceci peut être utile par exemple pour afficher d'une part un formulaire de saisie et d'autre part une page source d'où l'ont récupère les infos.
Prévisualisation - Resurrect pages

Reurrect pages

Qui n'a jamais cherché une info sachant très bien où la trouver et se retrouvant devant un site indisponible ? Eh bien cette extension se propose de résoudre ce problème en mettant à contribution les divers sites stockant des pages en cache comme Google ou Yahoo.
Prévisualisation - Tab scope

Tab scope

Dans la même veine que Showcase et Ctrl Tab Preview évoquées il y a quelques mois, cette extension affiche des miniatures des onglets, mais cette fois c'est au survol dans la barre d'onglets. Simple et efficace.

Open search

Open Search est une série de formats destinés à partager des recherches. En particulier, et c'est le point dont je vais parler ici, c'est via ce format que sont définis les moteurs de recherche gérés par la barre de recherche de Firefox 2 (et également celle d'IE 7 apparemment).

On peut donc assez facilement ajouter un moteur de recherche à la liste via un simple fichier XML, du moment qu'on a l'URL et les paramètres à passer à la page de recherche.

Format du fichier xml

<?xml version="1.0" encoding="{ENCODAGE}" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
	<ShortName>{NOM}</ShortName>
	<Description>{DESCRIPTION}</Description>
	<InputEncoding>{ENCODAGE}</InputEncoding>
	<Image width="16" height="16">{ICÔNE}</Image>
	<Url type="text/html" method="{MÉTHODE}" template="{URL_RÉSULTAT}"></Url>
</OpenSearchDescription>
  • {NOM} : nom du moteur de recherche. C'est ce nom qui sera affiché dans la liste de sélection du navigateur, veillez donc à ce qu'ils reste aussi concis que possible.
  • {DESCRIPTION} : description du moteur.
  • {ENCODAGE} : encodage du moteur et de votre fichier XML.
  • {ICÔNE} : icône de 16x16 piels associée à votre moteur. Cette icône doit être encodée en base 64, par exemple via ce formulaire.
  • {MÉTHODE} : méthode de passage de paramètre : POST ou GET.
  • {URL_RÉSULTAT} : URL où soumettre la recherche.

D'autres paramètres optionnels existent, je n'ai détaillé là que les parties nécessaires.

Et ensuite ?

Une fois le fichier réalisé, il peut être être ajouté dans votre répertoire de Firefox, dans le dossier searchplugins (nécessite de redémarrer Firefox).

Il est également possible s'il s'agit du moteur de recherche de votre site, de faire en sorte que Firefox le détecte automatiquement (de la même manière que pour un flux RSS) en ajoutant la balise link appropriée dans la section head de la page :

<link rel="search" type="application/opensearchdescription+xml" title="{NOM}" href="{URL_DU_FICHIER_XML}">

{NOM} correspond au nom indiqué dans le fichier XML et où, vous l'aurez compris, {URL_DU_FICHIER_XML} est à remplacer par l'URL où vous aurez placé le dit fichier...

Ressources complémentaires


Gérez vos feuilles de styles perso avec Stylish

Cet article est marqué comme contenant des informations dépassées depuis le 21/10/2018.
Stylish a été banni de Firefox et Chrome parce qu'il collectait des données d'historique. Utilisez plutôt Stylus qui propose les mêmes fonctionnalités (et même plus).

Une feuille de style, qu'est-ce que c'est ?

Pour ceux qui ne s'y connaitraient pas trop en développement web, la feuille de style est un fichier qui permet de définir l'apparence d'une page web. Idéalement, lorsqu'on développe un site, la sémantique du contenu est indiquée par le code HTML qui le met en page (par exemple telle ligne est un titre, telle autre est une définition, etc) et on le décore ensuite via une feuille de style. Le langage utilisé pour écrire ces feuilles de style est CSS.

Des feuilles de style personnalisées ?

C'est là que Firefox intervient ! En effet, ce génial navigateur a une fonctionnalité qui bien que peu connue du grand public ouvre d'énormes possibilités : il permet à l'utilisateur averti de définir des feuilles de styles personnelles appliquées soit à tous les sites qu'il affiche, soit à un site, groupe de sites ou même une page en particulier (plus d'explications ici).

De base c'est masqué et pas facile d'accès mais l'extension Stylish permet de les définir très facilement. On peut ainsi modifier soi-même l'affichage des sites que l'on visite (bien entendu, cette modification ne vaut que pour votre navigateur à vous et n'est visible par personne d'autre).

On peut par exemple réorganiser les éléments en occupant l'espace inutilisé par un design prévu pour une résolution plus base, remplacer certaines couleurs insupportables, supprimer certains blocs d'affichage, etc.

Comment ajouter une feuille de style ?

  1. Installez Stylish et relancez Firefox.
  2. Lancez l'outil de gestion des feuilles de style :
    Stylish - lancement
  3. Cliquez sur le bouton "Écrire" :
    Stylish - écrire*
  4. Indiquez d'abord un titre (1) qui vous servira uniquement à reconnaitre cette feuille quand vous en aurez ajouté plein d'autres. Puis copiez/collez le code CSS que vous voulez appliquer dans le cadre texte (2) et enfin cliquez sur "Enregistrer" (3).
    Stylish - définition du style
  5. C'est prêt. Il peut cependant s'avérer necessaire de rafraichir la page pour que les modifications apparaissent.

Tout ça c'est bien mais moi j'utilise IE...

Alors ça c'est ballot ! Parce que ça m'étonnerait fortement qu'IE gère un truc pareil, mais bon, on ne peut pas en même temps utiliser un navigateur totalement dépassé, ou plus généralement un produit Microsoft, et espérer qu'il soit à la pointe de l'innovation...

Et je n'en ai pas entendu parler pour les autres navigateurs tels qu'opera ou safari... Cela dit, rien ne vous empêche de chercher et de faire part de vos découvertes.