Ce tutorial est pour les utilisateurs intensifs de Gmail. Comme vous l'avez sans doute remarqué, il vous est possible, depuis Gmail, de spécifier une signature à inclure à tout vos emails (Options > Général > Signature) malheureusement Gmail refuse l'ajout de code html depuis cette méthode (même en créant soit même la requête de type POST que Gmail effectue lors de la sauvegarde de vos préférences). Voici donc comment créer un bookmarklet qui ajoutera directement dans votre message votre signature.
Avant de commencer sachez que des extensions Firefox (Better Gmail 2) et script Grease Monkey permettent déjà cela. Mais si vous êtes un utilisateur nomade utilisant plusieurs navigateurs sur différentes machines la solution du bookmarklet est beaucoup plus rapide à mettre en place et simple d'utilisation.
Nous utiliserons JQuery afin de pouvoir travailler très simplement avec Gmail. Le lanceur de notre bookmarklet est basé sur l'article de WebInventif. Une fois Jquery chargé, il ne reste plus qu'à placer notre code dans la fonction "code()" (voir le code final de l'article WebInventif).
Google utilise des iframes avec des id et des class changeantes à chaque rechargement de page pour éviter toute tentative de piratage automatisé (envoi d'email automatique par exemple). Nous ne pouvons pas directement accéder à un élément par son id ou sa class mais nous pouvons y accéder en fonction de ses éléments parents qui eux ne changeront pas ! De plus, après avoir parcouru le code html de la page d'édition d'email, on observe que le conteneur du texte de l'email est un élément body avec la class editable. Notre page Gmail contient 4 iframes la dernière appelée par un id canvas_frame (qui lui ne change pas) et qui contient l'iframe qui nous intéresse.
Pour accéder au contenu d'une iframe avec Jquery, nous devons utiliser le code suivant :
$('iframe').contents() Ensuite pour recherche un élement à l'intérieur de cette iframe (par exemple une autre iframe) on ajoute la propriété "find" :
$('iframe').contents().find('iframe')
Ainsi pour accéder directement au contenu de notre email, il suffit de faire :
$('iframe#canvas_frame').contents().find('iframe').contents().find('body.editable')
Ou d'une manière plus générale
$('iframe').contents().find('iframe').contents().find('body')
Il ne nous reste plus qu'à ajouter notre signature après le dernier élément de body.
$('iframe').contents().find('iframe').contents().find('body').append('<a href="http://feeds.feedburner.com/%7Er/geekfg/%7E6/2"><img src="http://feeds.feedburner.com/geekfg.2.gif" alt="GeekFG Blog Rss Feed" style="border: 0pt none ;"></a>);
Le code final de notre bookmarklet est alors :
void ((function(){
if (!document.getElementById("Ijquery")) {
var noeud_js = document.createElement("script");
noeud_js.setAttribute("type", "text/javascript");
noeud_js.setAttribute("id", "Ijquery");
noeud_js.setAttribute("src", "http://code.jquery.com/jquery-latest.pack.js");
document.getElementsByTagName("head")[0].appendChild(noeud_js);
}
function jquery_loaded(){
var tmp = "false";
try {tmp = $("body").text();}catch (erreur) {tmp = "false";}
return tmp;}
function verif_loaded(){
var temp = jquery_loaded();
if (temp != "false") {
clearInterval(interval);
code();
}
}
var interval = window.setInterval(verif_loaded, 100);
function code()
{
$("iframe").contents().find("iframe").contents().find("body.editable").append('<a href="http://feeds.feedburner.com/%7Er/geekfg/%7E6/2"><img src="http://feeds.feedburner.com/geekfg.2.gif" alt="GeekFG Blog Rss Feed" style="border: 0pt none ;"></a>');
}
}
)())Une fois que vous avez modifier votre signature dans le code ci-dessus, effectuez les étapes suivantes :
- Allez ici, copier/coller y votre code, cliquez sur Encode
- Copier le code généré
- Créez un marque-page dans votre navigateur, allez dessus, supprimez l'ancienne adresse
- Ajoutez javascript:, puis coller le code javascript qui vient d'être encodé
- Enregistrez votre marque-page
- Rendez-vous sur Gmail, créez un nouvelle email
- Cliquez sur votre marque-page
- Après quelques secondes votre signature doit s'ajouter
Voici le bookmarklet de l'exemple glissez-déposez-le (drag & drop) dans votre barre de lien puis allez sur Gmail pour tester.
