Gatellier.be » Addons http://www.gatellier.be/blog Interwebs with passion. Thu, 01 Jul 2010 12:17:25 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Addon Firefox: Content Encoding Detector 0.4b http://www.gatellier.be/blog/addon-firefox-content-encoding-detector-04b/ http://www.gatellier.be/blog/addon-firefox-content-encoding-detector-04b/#comments Mon, 14 Dec 2009 11:09:14 +0000 Marin http://www.gatellier.be/blog/?p=321 Dans le but de promouvoir un web plus rapide et donc plus respectueux de ses utilisateurs, je viens de créer un petit Addon Firefox qui promeut l'encodage des pages en GZIP.

Cet encodage permet de réduire drastiquement le poid des fichiers transférés entre le serveur web et votre navigateur.

Capture d'écran - Content Encoding Detector

Point de vue technique :

L'addon Content Encoding Detector soumet l'url de la page que vous visitez au service JSON-HEAD de Simon Willison.

Si le serveur retourne l'http_header "Content-Encoding", l'icône de status Firefox est mise à jour pour refléter l'encodage.

L'addon est en cours de validation mais vous pouvez déjà le télécharger à sa page Mozilla Addons.

tag: ContentEncoding

© Marin for Gatellier.be, 2009. | Permalink | One comment | Add to del.icio.us
Post tags: , , , , , ,

]]> http://www.gatellier.be/blog/addon-firefox-content-encoding-detector-04b/feed/ 1 Geotagging Bookmarklet http://www.gatellier.be/blog/geotagging-bookmarklet/ http://www.gatellier.be/blog/geotagging-bookmarklet/#comments Sun, 04 Jan 2009 13:53:11 +0000 Marin http://www.gatellier.be/blog/?p=249 ou I CAN HAZ GEOTAGZ?

Status actuel de la géolocalisation :

Geotag bookmarklet

Via les spécifications disponibles et méthodes les plus faciles, je viens donc d'écrire un bookmarklet qui rajoute votre position géographique dans n'importe quel page web.

GeoTag Bookmarket

Pour l'installer, il suffit de glisser déposer le lien ci-dessus dans votre barre de favoris.

En cliquant dessus, le bookmarket rajoutera votre position (s'il la trouve) au premier champ textarea de la page que vous visitez. Parfait pour Twitter.com

Le script de mon Geotag bookmarklet

var GT=(function(){
	var P=4,u="undefined",d=document;
	var format=function(n,c){
		var m=Math.pow(10,c);
		return Math.round(n*m)/m;
	};
	var addMarker=function (p){
		var t=d.getElementsByTagName("textarea")[0];
		if(t.value.indexOf("#geo")<0){t.value+="#geo:"+format(p.latitude,P)+","+format(p.longitude,P);}
	};
	this.getLocation=function(){
		var p=google.loader.ClientLocation;
		if (p!==null){addMarker(p);}
	};
	this.tag=function(){
		if(typeof(navigator.geolocation)!=u){
			//https://developer.mozilla.org/En/Using_geolocation || geode
			navigator.geolocation.getCurrentPosition(function(p){addMarker(p);});
		} else {
			//http://code.google.com/apis/ajax/documentation/#ClientLocation
			if (typeof(google)==u){
				var jsapi=document.createElement("script");
				jsapi.src="http://www.google.com/jsapi?callback=GT.getLocation";
				d.getElementsByTagName("body")[0].appendChild(jsapi);
			}
		}
	};
	return {tag:tag,getLocation:getLocation};
})();
GT.tag();

Mon script vérifie si l'objet navigator.geolocation existe (donc, si c'est FF3.1b2 ou si Firefox a l'addon Geode installé), sinon, il utilisera les méthodes fournies par le JSAPI de Google.

Bugs connus :

  • Si vous passez par un server proxi pour vous connecter à internet ou si simplement les services de géolocalisation ne reconnaissent pas, aucun tag ne sera affiché.
  • Internet Explorer 6 ne supporte pas les longs bookmarklets, je vous recommande donc d'installer un autre navigateur.
  • La géolocalisation avec Firefox 3.1 beta 2 ne marche pas encore super bien.
  • Je limite la précision à quatre décimales.
  • J'emploie le système de géotagging employé BrightKite (par soucis de brièveté pour le status Twitter #geo:<lat>,<long>) et pas celui recommandé par Flickr (geo:lat=<lat>,geo:lon=<long>)

Liens relatifs :

© Marin for Gatellier.be, 2009. | Permalink | 3 comments | Add to del.icio.us
Post tags: , , , , , , ,

]]> http://www.gatellier.be/blog/geotagging-bookmarklet/feed/ 3 Signature automatique sur un blog http://www.gatellier.be/blog/signature-automatique-sur-un-blog/ http://www.gatellier.be/blog/signature-automatique-sur-un-blog/#comments Mon, 29 Dec 2008 16:20:58 +0000 Marin http://www.gatellier.be/blog/?p=233 Quand je vois le nombre de signatures sur les commentaires de blogs, je me dis qu'un petit script pour automatiser les signatures serait le bienvenu.

Prérequis

Quelques ingrédients sont nécessaires pour avoir une signature automatique :

Amicalement, Greasemonkey

Greasemonkey est une extension qui vous permet d'écrire des scripts pour modifier les pages que vous visitez.

Voici le script :

//&lt;![CDATA[
// ==UserScript==
// @name		Amicalement Greasemonkey
// @author		Marin Gatellier
// @namespace	http://www.gatellier.be/blog/
// @description	Ads your signature into textareas
// @include		*
// ==/UserScript==
(function(){
	var t=document.getElementsByTagName("TEXTAREA");
	var signature="\n\nAmicalement,\nGreasemonkey";
	for (var i=0,j=t.length;i&lt;j;i++){
		if (t[i].value.indexOf(signature)&lt;0){
			t[i].value=t[i].value+signature;
		}
	}
})()
//]]&gt;

Vous devez évidemment modifier la variable signature (ligne 10) avec votre propre signature.

Petites astuces :

\n
représente une nouvelle ligne
\t
représente un tab
\\
représente un backslash

Une fois installé, ce petit script ajoutera automatiquement votre signature à chaque textearea de chaque site web (peut être customisé par site)

Installer le script Amicalement Greasemonkey

© Marin for Gatellier.be, 2008. | Permalink | 4 comments | Add to del.icio.us
Post tags:

]]> http://www.gatellier.be/blog/signature-automatique-sur-un-blog/feed/ 4 Rétablir l’ancienne icône de status de Firebug http://www.gatellier.be/blog/retablir-icone-status-bar-firebug/ http://www.gatellier.be/blog/retablir-icone-status-bar-firebug/#comments Mon, 07 Jul 2008 18:39:22 +0000 Marin http://www.gatellier.be/blog/retablir-icone-status-bar-firebug/ Firebug, l'excellente extension Firefox de Joe Hewitt, n'est compatible avec Firefox 3 que dans sa version 1.2 beta.

Cette nouvelle version apporte plein de changements sous le capot mais aussi une nouvelle icône de status qui me chipote un peu.

La nouvelle icône de status de Firebug, qui reprend le logo Firebug, passe vraiment inaperçue. Elle manque vraiment de contraste par rapport aux autres icônes qu'on pourrait avoir dans la barre de status.

Manque de contraste de la nouvelle icône Firebug
La nouvelle icône de status Firebug passe inaperçue.

La bonne nouvelle c'est que, vu l'architecture des Addons Firefox, l'ancienne icône peut être facilement rétablie.

Localisation du fichier CSS de Firebug.

Pour ce faire, il faut trouver et éditer la CSS qui gère la présentation de Firebug.
Sur Windows, par défaut, elle se trouve dans le répertoire :

C:\Documents and Settings\User\Application Data\Mozilla\Firefox​\Profiles\la1xxvhe.default\extensions\firebug@software.joehewitt.com​\skin\classic\firebug.css

Les parties en italiques sont des parties qui différeront sur votre PC.

Sur MacOS, il faut chercher un petit peu, l'explication se trouve sur le site de support Mozilla.

Edition du fichier CSS.

Pour rétablir l'ancienne icône de Firebug, j'ai simplement quitté Firefox puis remplacé les lignes suivantes dans le fichier CSS :

#fbStatusIcon {
    list-style-image: url(chrome://firebug/skin/firebug-gray-16.png);
}
#fbStatusIcon[jsd="on"] {
    list-style-image: url(chrome://firebug/skin/firebug16.png);
}
#fbStatusIcon[net="on"] {
    list-style-image: url(chrome://firebug/skin/firebug16.png);
}
#fbStatusIcon[errors="on"] {
    list-style-image: url(chrome://firebug/skin/firebug16.png);
}

par :

#fbStatusIcon {
    list-style-image: url(chrome://firebug/skin/disabledIcon.png);
}
#fbStatusIcon[jsd="on"] {
    list-style-image: url(chrome://firebug/skin/okIcon-sm.png);
}
#fbStatusIcon[net="on"] {
    list-style-image: url(chrome://firebug/skin/okIcon-sm.png);
}
#fbStatusIcon[errors="on"] {
    list-style-image: url(chrome://firebug/skin/okIcon-sm.png);
}

L'ancienne icône Firebug est rétablie

Et hop, une fois Firefox redémarré, l'ancienne icône, beaucoup plus visible, est restaurée.

Liens relatifs :

© Marin for Gatellier.be, 2008. | Permalink | 4 comments | Add to del.icio.us
Post tags: , , ,

]]> http://www.gatellier.be/blog/retablir-icone-status-bar-firebug/feed/ 4 Extensions Firefox d’un Intégrateur http://www.gatellier.be/blog/extensions-firefox-integrateur/ http://www.gatellier.be/blog/extensions-firefox-integrateur/#comments Fri, 30 May 2008 15:45:49 +0000 Marin http://www.gatellier.be/blog/extensions-firefox-integrateur/ Tout comme j'ai exposé ma liste de plugins WordPress, je profite de la sortie imminente de Firefox 3 pour faire un status des extensions que j'emploie sur mon butineur préféré au travail.

Ma version: Firefox 2.0.0.14 (2008040413)

Operating System: WINNT (x86-msvc)

Je teste aussi évidemment mon code sur IE 6, 7, 8 (et des fois sur 5.5), Opera 9.27, 9.5b, FF 3RC1, Safari etc...

© Marin for Gatellier.be, 2008. | Permalink | 7 comments | Add to del.icio.us
Post tags: , , , ,

]]> http://www.gatellier.be/blog/extensions-firefox-integrateur/feed/ 7 Plugin de recherche OpenSearch pour Firefox 2 http://www.gatellier.be/blog/plugin-recherche-opensearch-firefox2/ http://www.gatellier.be/blog/plugin-recherche-opensearch-firefox2/#comments Sun, 03 Dec 2006 17:05:30 +0000 Marin http://www.gatellier.be/blog/?p=152 Firefox version 2 supporte le standard de formatage de données de recherche OpenSearch. Grâce à cela, on peut créer des petits plugins de recherche très utiles pour son navigateur préféré.

Format XML OpenSearch

Les définitions des différents éléments composant un XML OpenSearch nous aident à composer notre propre plugin de recherche.
Pour une installation standard de Firefox, vous trouverez les plugins déjà installés dans le répertoire C:\Program Files\Mozilla Firefox\searchplugins. Normalement ce répertoire ne contient que des fichiers .xml qui sont les définitions des plugins. Prenons-en un, le fichier amazon.xml

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>Amazon.com</ShortName>
<Description>Amazon.com Search</Description>
<InputEncoding>ISO-8859-1</InputEncoding>
<Image width="16" height="16">data:image/x-icon;base64,iVBORw0KGgoA...=</Image>
<Url type="text/html" method="GET" template="http://www.amazon.com/exec/obidos/external-search/">
	<Param name="field-keywords" value="{searchTerms}"/>
	<Param name="mode" value="blended"/>
	<Param name="tag" value="mozilla-20"/>
	<Param name="sourceid" value="Mozilla-search"/>
</Url>
<SearchForm>http://www.amazon.com/</SearchForm>
</SearchPlugin>
SearchPlugin
Définition du namespace des différents nodes du fichier xml (dans ce cas-ci, on parle de la définition de Firefox)
ShortName
Nom du plugin de recherche
Description
Description du plugin de recherche
InputEncoding
Encodage des caractères du formulaire
Image
Définition de l’icône qui sera ajoutée dans l’interface de recherche encodée en Base64
Url
Contient les différents attributs du formulaire de recherche
type
Format dans lequel les données sont envoyées au serveur
method
GET ou POST méthode d’envoi des données au serveur
template
C’est l’ACTION du formulaire de recherche
Param
Les différents champs qui sont passées au formulaire. Le champ sur lequel se fait la requête doit avoir la value="{searchTerms}". C’est les termes qui seront entrés dans le formulaire de recherche de Firefox
SearchForm
C’est le lien vers les soumissions de formulaires vides iront.

Analyse d’un formulaire à convertir en plugin.

Pour un premier exemple, je me suis basé sur la page d’accueil de Tutmaks.com (excellente ressource de tutoriels). Le moteur de recherche du site ne fonctionnant pour l’instant que sur des pages /index.php et pas sur les pages de détail /story.php.

Ecran de recherche Tutmarks.com

A l’aide de l’Inspector de Firebug, j’ai facilement repéré que le nom du champ du formulaire était “search” l’action est vide (d’où l’erreur ci-dessus).

<InputEncoding>ISO-8859-1</InputEncoding>
<Url type="text/html" method="GET" template="http://tutmarks.com/index.php">
	<Param name="search" value="{searchTerms}"/>
</Url>

Pour un second exemple, j’ai pris la recherche inversée de numéros de téléphone sur 1307.be.

Ecran de recherche inversée de numéros de téléphone 1307.be

Il y a plusieurs champs cachés dans ce formulaire-ci. J’ai repris les nom et valeurs de ces champs en tant que Param de mon XML

<InputEncoding>ISO-8859-1</InputEncoding>
<Url type="text/html" method="POST" template="http://1307.be/fr/servlets/ReverseServlet">
	<Param name="number" value="{searchTerms}"/>
	<Param name="iso_language" value="fr"/>
	<Param name="template" value="1x07be"/>
</Url>

Ajout de l’icône du plugin de recherche.

J’ai repris les favicônes des sites repectifs. Je les ai enregistrées sur mon ordinateur et je les ai converties en base64 avec cet outil. De ce fait, les images sont transformées en code et sont plus facilement transportable d’un environnement à un autre (les images sont incluses dans le fichier XML sous forme de code).

La documentation OpenSearch précise qu’on peut aussi mettre une url vers une icône de favori ou autre image.

<Image height="16" width="16" type="image/x-icon"><br />
http://example.com/favicon.ico<br />
</Image><br />

Code à rajouter dans les pages html.

Pour que le plugin soit à la disposition de tout le monde, il faut l’insérer dans les pages de votre site.

Cela se fait aisément en ajoutant une balise link real="search" dans le header de la page html.

<link rel="search" type="application/opensearchdescription+xml" title="Tutmarks.com" href="/chemin-vers/définition.xml">

Ajouter les plugins créés à Firefox 2.

Quand un plugin de recherche a été trouvé par Firefox, l’icône de la liste des moteurs de recherche prend un fond bleuté.

Un plugin de recherche a été trouvé par Firefox

En cliquant sur cette icône, on peut voir la liste des plugins de recherche. Dans le bas du menu, on peut rajouter les différents plugins de recherches.

Ajout de plusieurs plugins de recherche dans Firefox

L’ordre des moteurs de recherche peut être modifié et on peut aussi en supprimer via l’interface de gestion des plugins de recherche

écran pour ranger les plugin de recherche sur Firefox

Le plugin de recherche Tutmarks pour Firefox 2 prêt à l’usage.

Le plugin de recherche sur Tutmaks est prêt à l'usage

Liens relatifs

© Marin for Gatellier.be, 2006. | Permalink | 17 comments | Add to del.icio.us
Post tags:

]]> http://www.gatellier.be/blog/plugin-recherche-opensearch-firefox2/feed/ 17 Ré-activer les anciennes extensions de Firefox grâce à about:config http://www.gatellier.be/blog/reactiver-les-anciennes-extensions-firefox-about_config/ http://www.gatellier.be/blog/reactiver-les-anciennes-extensions-firefox-about_config/#comments Fri, 27 Oct 2006 09:13:57 +0000 Marin http://www.gatellier.be/blog/?p=148 Avec la sortie de la version 2.0 de Firefox, beaucoup d'extensions ne sont plus compatibles. Leur développeurs n'ayant pas encore mis à jour les fichiers d'installations.
On a vu ici et là des versions non-officielles de mises à jour de certaines extensions.

about:config, la base de registre de FireFox

En entrant about:config dans la barre d'adresse de FireFox, vous arrivez dans l'espace de configuration de FireFox. J'avoue, l'interface est un peu austère.

Interface Firefox about:config

Cette interface présente toutefois champs permettant de faciliter les recherches.
Quatre colonnes sont présentes: Preference Name, Status, Type et Value.

La colonne Preference Name reprend les différentes propriétés des différents éléments de Firefox de manière assez compréhensible. Préférences d'accessibilité, du browser, des extensions,...

La colonne Status nous dit si la valeur a été modifiée (soit par une extension, soit par une préférence, soit a la main dans la console de configuration). Dans ce cas, la ligne sera en corps gras et la valeur sera user set. Dans le cas contraire, le corps sera normal et la valeur default

La colonne Type reprend le type de donnée que la propriété peut avoir. Boolean pour une valeur vraie ou fausse, Integer pour un nombre entier et String pour toute valeur texte.

Enfin la colonne Value qui contient les valeurs des différentes propriétés. C'est cette colonne qui nous intéresse. Vous pouvez changer ces valeurs la double-cliquant. Pour les types Integer et String un boîte de dialogue apparaitra et vous pourrez entrer une nouvelle valeur. Pour le type Boolean, le double-clic changera la valeur de vrai à faux et vice-versa.

Alors comment on réactive les anciennes extensions ?

about:config key=extensions.disabledObsolete:true

Il faut simplement trouver la clef extensions.disabledObsolete et changer sa value à false pour ne pas désactiver les extensions obsolètes (qui sont prévues pour des versions précédentes de Firefox).

D'autres entrées sont très intéressantes entre autre la collection browser.tabs qui contient différentes options de configuration par rapport aux tabs/onglets.

Pour que tout ces changements soient effectifs, redémarrez Firefox.

A vous de jouer mais, attention, vous modifiez ces valeurs à vos risques et périls!

Liens relatifs:

© Marin for Gatellier.be, 2006. | Permalink | 3 comments | Add to del.icio.us
Post tags:

]]> http://www.gatellier.be/blog/reactiver-les-anciennes-extensions-firefox-about_config/feed/ 3 Je (re)découvre Firebug ou le débogage facile http://www.gatellier.be/blog/je-redecouvre-firebug-debogage-facile/ http://www.gatellier.be/blog/je-redecouvre-firebug-debogage-facile/#comments Wed, 11 Oct 2006 16:11:26 +0000 Marin http://www.gatellier.be/blog/?p=144 En préparant un petit article, je suis tombé sur cette vidéo qui montre comment déboguer avec Firebug.

Je suis presque tombé de ma chaise. Je ne connaissais pas la moitié des capacités de cette merveilleuse extension de débogage pour FireFox, que j'emploie quand même depuis un bout de temps (v0.2 si les souvenirs sont bons).

Avant, je ne l'employais que pour tracer mes appels Ajax et les réponses du serveur et tester des variables et fonctions, le tout dans la console.

Je n'avais pas vraiment vu la puissance du débogueur.

Une petit explication s'impose.

Pour que Firebug s'arrête à chaque erreur, il faut que l'option soit activée. (onglet "Debugger", menu "Options").

L'option pour activer le débogueur de Firebug

Je pensais que toutes les options étaient regroupées à un seul endroit. Soit, je m'encroûte, soit l'interface n'est pas super parlante.

Bon maintenant regardons tout ce que l'on peut faire avec ce débogueur.

Le principe est le suivant : on appelle des méthodes de l'objet console en lui passant des paramètres.

console.log("message" [,objects])
console.debug("message" [,objects])
console.info("message" [,objects])
console.warn("message" [,objects])
console.error("message" [,objects])
etc...

La liste complète des méthodes de Firebug est bien évidemment disponible en ligne.

Vraiment bien fait ces petites méthodes (surtout celles qui permettent d'évaluer le temps qu'un javascript met).

Adopté par toute l'équipe des intégrateurs, et certains développeurs. Merci Joe Hewitt !

Liens relatifs :

© Marin for Gatellier.be, 2006. | Permalink | No comment | Add to del.icio.us
Post tags:

]]> http://www.gatellier.be/blog/je-redecouvre-firebug-debogage-facile/feed/ 0