In mijn vorige artikel over microformats schreef ik dat in Nederland het aantal drukbezochte websites dat met microformats werkt nog wat achter blijft. Daarom leg ik in dit artikel uit hoe je in je browser automatisch aan microformatloze websites van anderen tóch microformats toe kunt voegen. Zo kun je ook op deze sites van alle gemakken van microformats gebruik maken.

Greasemonkey voor Firefox

Greasemonkey is een Firefox-extensie waarmee je via JavaScripts automatisch pagina’s van websites client-side aan kunt passen nadat de pagina in de browser is geladen. Het wordt wel aangeprezen als .het gereedschap om het web mee te repareren. Met Greasemonkey kun je bijvoorbeeld linkjes invoegen in een pagina naar andere sites. Of mash-ups maken. Op Userscripts.org vind je een uitgebreide collectie scripts die bepaalde problemen of ongemakken op websites van derden verhelpen of snel functionaliteit toe kunnen voegen aan de browser.

Om te laten zien wat je daar nu in de praktijk mee kunt doen gaan we Greasemonkey inzetten voor iets waar het nog nauwelijks voor gebruikt is; het client-side toevoegen van microformat-codering aan websites van derden, oftewel Monkeyformats.

Hiervoor heb ik een aantal Greasemonkey-scripts gemaakt die drie Nederlandstalige sites voorzien van de hCard- en hCalendar-microformats. In combinatie met de Operator-extensie kun je vervolgens handige dingen doen met de door Greasemonkey toegevoegde microformats.

NB: Om de volgende scripts te kunnen testen moet je deze pagina via Mozilla Firefox bekijken. Daarnaast moet je in Firefox de GreaseMonkey en Operator add-ons hebben geïnstalleerd.

Als je op een van onderstaande Installeer-linkjes klikt zou je een pop-up te zien moeten krijgen zoals hieronder met de vraag of je dit gebruikersscript daadwerkelijk wilt installeren. Omdat er ook kwaadwillende gebruikersscripts in omloop zijn is het aan te bevelen om alleen Greasemonkey gebruikersscripts te installeren van websites die je vertrouwt.

Telefoongids.nl

Telefoongids.nl biedt bezoekers de mogelijkheid om contactgegevens naar een e-mailadres te sturen of te sms.en naar een mobiele telefoon. Maar voor het overzetten van de gegevens naar je adresboek op je computer of van je webmail-account ben je nog steeds aangewezen op het één voor-één kopiëren en plakken van de verschillende velden. Door onderstaand script te installeren in Greasemonkey worden de resultaatpagina’s van de telefoongids voorzien van het hCard microformat en kun je de resultaten via Operator ineens met één druk op de knop toevoegen aan je adresboek.

• Bekijk het telefoongids-gebruikersscript
• Installeer mf-telefoongids.user.js

TicketMaster

Op Ticketmaster.nl kun je online kaartjes voor optredens bestellen. Met dit script kun je met één druk op de knop de gegevens van een optreden toevoegen aan jouw eigen agendaprogramma of kalenderwebdienst.

• Bekijk het ticketmaster-gebruikersscript
• Installeer mf-ticketmaster.user.js

Funda

Op Funda tonen de NVM-makelaars hun huizenaanbod aan potentiële kopers. Via dit script kun je een adres opzoeken op de website van een kaartleverancier naar keuze (Google, Yahoo, etc.) of de contactgegevens van een makelaar exporteren.

• Bekijk het funda-gebruikersscript
• Installeer mf-funda.user.js

Test je Monkeyformats

Nadat je de scripts hebt geïnstalleerd en je een zoekopdracht uitvoert op een van de genoemde sites zouden in de Operator-taakbalk de bijbehorende microformats op moeten lichten. Probeer bijvoorbeeld een van de volgende zoekopdrachten restaurants in Utrecht in de Telefoongids of huizen die te koop staan in Wassenaar die meer dan 1 miljoen euro kosten via Funda.

Toelichting bij scripts

Voor een inleiding en uitgebreide informatie over Greasemonkey-scripts verwijs ik je graag naar bijvoorbeeld Dive into Greasemonkey van Mark Pilgrim. Bij het toevoegen van microformats via GreaseMonkey gebruik ik bovenstaande scripts twee eenvoudige functies: replaceClass en replacePattern. Deze zal ik hieronder toelichten.

replaceClass

Met een beetje geluk zijn de teksten die je wilt uitbreiden met microformats al voorzien van omhullende HTML-tags op de juiste plaatsen. Je kunt dan volstaan met het toevoegen van de juiste classnames.

De functie replaceClass voegt een microformat-class toe aan een bestaand element. Via een XPath-selector kan een element of een reeks elementen worden voorzien van een class. Een dergelijk pad naar een element of een reeks elementen in een document is eenvoudig te achterhalen via de inspect-optie van Firebug(wederom een handige Firefox-extensie).

function replaceClass(thepath, theclass) {
 var allDivs, thisDiv;
 allDivs = document.evaluate(thepath,document,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null);
 for (var i = 0; i < allDivs’snapshotLength; i++) {
 thisDiv = allDivs’snapshotItem(i);
 thisDiv.className += theclass;
 }
}

replaceText

In veel gevallen zal de HTML nog niet alle structuur hebben die je nodig hebt. In die gevallen kun je gebruikmaken van de replaceText-functie.

ReplaceText voegt een zoek- en vervangopdracht uit met reguliere expressies. Via een Xpath selector kun je de zoek- en vervangopdracht beperken tot bepaalde onderdelen van de pagina.

function replaceText(thepath, searchText, replaceText) {
 var allDivs, thisDiv;
 re = new RegExp(searchText,'g');
 allDivs = document.evaluate(thepath,document,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null);
 for (var i = 0; i < allDivs’snapshotLength; i++) {
 thisDiv = allDivs’snapshotItem(i);
 thisDiv.innerHTML = thisDiv.innerHTML.replace(re, replaceText);
 }
}

In de Greasemonkey-scripts voor de verschillende sites vind je specifieke voorbeelden van de toepassing van deze twee functies.

Mogelijke problemen

Omdat je voor het toevoegen van microformats aan sites van derden afhankelijk bent van hoe de HTML is opgebouwd kan het voorkomen dat je HTML moet toevoegen om bepaalde delen van classes te kunnen voorzien.

Uiteindelijk is het natuurlijk beter als de sites zelf microformats toevoegen aan hun HTML. De kans is groot dat de hier voorgestelde userscripts niet meer zullen werken als de HTML van de sites wordt vernieuwd.

Tenslotte

Op basis van de GreaseMonkey userscripts die ik hier heb laten zien kun je microformats toevoegen aan bijvoorbeeld vacaturebanken (hListing), veilingsites (hListing), bioscoopoverzichten (hCard, hCalendar, hReview), elektronische programmagidsen (hCalendar, hReview) of routeplanners (hCard, hCalendar). Veel succes met het bouwen en vergeet niet je userscripts met anderen te delen via Userscripts.org en deze te voorzien van de tag monkeyformats. Op deze manier zijn de Monkeyformat-scripts dan via die unieke tag makkelijk terug te vinden voor andere GreaseMonkey gebruikers.

Verder lezen?

• Operator userscripts
• Creating Operator Action scripts

• GreaseMonkey
• GreaseMonkey userscripts
• GreaseMonkey userscripts - Monkeyformats

• Home
• Artikelen
• Colofon