My first play with Greasemonkey the famous Firefox extension that enables to script it with JavaScript.
A gentle person invited me on Dopplr, the sooo nerdy web site for frequent travelers, I think the majority of the users are people who love attending to conferences all around the world. It’s a very simple and clean interface. But, microformats are missing and this annoys me a little bit.
First of all, you need an extension to extract microformats like Operator (unfortunately Tails doesn’t work) and of course Greasemonkey.
Dopplr displays a list of travels with dates.
<ul class="locations"> <li class="month" id="trip_6919"> <span class="bullet" style="background:#59ead8"> </span> <a href="http://www.dopplr.com/city/london">London</a> from <span>June 11th</span> to <span>19th</span>. […] </li> […] </ul>
And what could described the same way but as a hCalendar event is:
<ul class="locations"> <li class="month vevent" id="trip_6919"> <span class="bullet" style="background:#59ead8"> </span> <a href="http://www.dopplr.com/city/london" class="location summary">London</a> from <span> <abbr class="dtstart" title="20070611T000000+0100">June 11th</abbr> </span> to <span> <abbr class="dtend" title="20070619T235959+0100">19th</abbr> </span>. […] </li> […] </ul>
Let’s do it with JavaScript, because Greasemonkey is on top of Firefox we can use more advanced features like XPath queries:
var trips = document.evaluate(
"//ul[@class='locations']/li",
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
for(var i=0; i<trips.snapshotLength; i++) {
var event = trips.snapshotItem(i);
// the code goes here.
}
Starting from this, we can iterate over each element and by editing the className attribute of the nodes putting the microformat sugar. For example:
event.className += " vevent";
event.getElementsByTagName("A")[0].className += " location summary";
And so on. For the abbr tricky part, I steal a very nice piece of code from Simon Willison: A better way of entering dates It’s tricky because Dopplr doesn’t give you the Year information, you have to guess it. I’ll let you dive into the source code to inspect how I did this.
I also added some hCard for your fellows travelers but I care less about this information actually.
You can find it on userscripts and learns more about Greasemonkey reading the book written by Mark Pilgrim: Dive into Greasemonkey. Test it, report my some bugs, improve it. It remains me some invitations to Dopplr, you won’t be able to test it being logged.
Greasemonkey scripts are a very useful functionality. With them you can improve your daily life a very little-cost, because developing them isn’t really complicated. Does your Intranet suck?
Ma première expérience avec Greasemonkey, la fabuleuse extension Firefox permettant d’appliquer du JavaScript aux pages affichées, de scripter le navigateur.
On m’a fait découvrir (merci Steph) Dopplr récemment, un outil super simple pour partager ses destinations futures avec son réseau de connaissances. Il peut nous dire qui sera au même lieu au même moment que nous. L’interface est propre est intuitive, mais elle manque de microformats. Ainsi je peux travailler via Dopplr et exporter ça dans Google Calendar ou Sunbird d’un simple clic.
Tout d’abord munissez-vous d’une bonne extension Firefox pour extraire les microformats, Operator est parfait, et de Greasemonkey bien entendu.
Si la version anglaise de cette article se préoccupe d’ajouter des informations hCalendar, on va traiter ici les hCard, c’est plus simple. La structure HTML fournie est simple :
<li>
<a
title="Stephanie Booth is at home in Lausanne"
class="traveller_icon"
href="http://www.dopplr.com/traveller/steph">
<img
src="[…]"
width="32" height="32"
alt="Stephanie Booth"
style="border: 3px solid #2f4d15" />
</a>
</li>
et ce que nous voulons est :
<li class="vcard">
<a
title="Stephanie Booth is at home in Lausanne"
class="traveller_icon url"
href="http://www.dopplr.com/traveller/steph">
<img
class="photo fn"
src="[…]"
width="32" height="32"
alt="Stephanie Booth"
style="border: 3px solid #2f4d15" />
</a>
</li>
Le petit script ci-dessous, va s’occuper d’appliquer ces modifications à tous les éléments trouvés :
var fellows = document.evaluate(
"//a[@class='traveller_icon']",
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
for(var i=0; i<fellows.snapshotLength; i++) {
var fellow = fellows.snapshotItem(i);
fellow.parentNode.className += " vcard";
fellow.className += " url";
fellow.getElementsByTagName("img")[0].className += " photo fn";
}
Greasemonkey autorise des fonctionnalités plus avancées de JavaScript comme les requêtes XPath car on reste à priori confiné à Firefox.
Le script est disponible sur userscripts, n’hésitez pas à me faire vos commentaires. Sinon pour en découvrir un peu plus sur Greasemonkey, le livre de Mark Pilgrim : Dive into Greasemonkey est la documentation par laquelle il faut commencer, et bien évidemment le blog Greasepot. Un jour Dopplr sera plein de microformats d’origine j’en suis certain.
