During building some greasemonkey scripts, I faced some recurrent issues like:
- how to reuse existing JavaScript libraries (already loaded or not);
- how to deal with XML (like with third party APIs);
- how to use Yahoo! or Google maps.
Some of them could be solved with reading Dive into Greasemonkey, “Avoid Common Pitfalls in Greasemonkey” or browsing the Google Groups.
How to reuse JavaScript libraries
Imagine, you’re using Greasemonkey to do usability testing, prototyping, debugging, hacking on your own website. You’d really want to be able to reuse the already loaded libraries, framework, functions or variables. And as your user script is in a different scope that the rest of the page, for security issue, you won’t be able to do it the way you think.
Your are using jQuery or YUI, let’s make them available in the user script as well.
// jQuery
if(typeof unsafeWindow.jQuery !== "undefined") {
var jQuery = unsafeWindow.jQuery;
var $ = jQuery // you’re lazy
}
// Yahoo! User Interface
if(typeof unsafeWindow.YAHOO !== "undefined")
var YAHOO = unsafeWindow.jQuery;
I warn you that usafeWindow is a way to protects you from malicious web page, use it sparingly.
If you want to use a library that isn’t already loaded, add it to the head of your page beforehand.
if(typeof unsafeWindow.jQuery === "undefined"){
var head = document.getElementsByTagName("head")[0];
if(!head)
return;
var script = document.createElement("script");
script.type="text/javascript";
script.src = "http://code.jquery.com/jquery-latest.pack.js";
head.appendChild(script)
}
Of course loading an external file takes some time, you’ll have to check if it has successfully loaded before using it.
function isJQueryLoaded(callback) {
var interval = setInterval(function() {
if(typeof unsafeWindow.jQuery) !== "undefined") {
clearInterval(interval);
isJQueryLoaded = function(){
return true;
}
callback()
}
}, 200)
}
Another solution is to put an onload on the script HTML tag, and check that value which can be more useful if you’re loading scripts without any knowledge of what they contain.
How to deal with XML
As you may already know, Greasemonkey’s XHR doesn’t allow you to get a responseXML for security purpose. Here, another solution to use XML from text, this is called E4X (ECMAScript for XML).
var events = new XML("<events> \
<event>A</event> \
<event>B</event> \
</events>");
events..event.length() // 2
Which require valid XML, now as everyone is using JSON or really love to use JSON. Pipes (from Yahoo!) can be really useful to directly returns you clean a JSON of what you need (from XML or RSS). Using JSON from Yahoo! Pipes will avoid you wanting parsing XML inside GreaseMonkey. One I did as a sample: XML to Pipes (I have other pipes that plays with Upcoming or Flickr API).
How to use Yahoo! or Google maps
Both of these Ajaxy maps require you to include a meta JavaScript, a JavaSript file that will include more JavaScript files. Unfortunately both of them contains the evil (from a Greasemonkey point of view) call document.write. If you try to include this file http://api.maps.yahoo.com/ajaxymap?v=3.7&appid=YouAppID with the method above, your page will blow up. The only solution I’ve found so far is to copy and paste the source of it into your user script and rewrite the document.write part with a more DOM compliant code (like the one above). _ywjs is evil for Yahoo! as well as GScript for Google. Then all the maps objects are available thru unsafeWindow.
Happy hacking!
By the way if there are some hackers/designers in Paris who want to pick existing services and trying to improve them with Greasemonkey or Stylish. I would really love to share knowledges and ideas in a few hours pub powered session. Many fields can be explored: accessibility, improved navigation, third party integration, ergonomy, etc. It’s time to turn frustration into creativity in a collaborative way. La Cantine seems to be a promising place to do this, or every wifi-enabled place. Drop me a mail.
Jouant occasionnellement avec Greasemonkey, j’ai fait face a des problèmes récurrent liés à l’architecture de l’extention elle-même.
- Comment réutiliser une bibliothèque déjà présente dans la page,
- comment traiter un résultat XML
- ou qu’est-ce qui fait que je n’arrive pas à mettre une Yahoo!/Google maps dynamiquement.
Réutiliser une librairie(, fonction, variable) existante
Pour des raisons de sécurité non négligables, un script utilisateur est exécuter dans un environnement un peu différent de la page elle-même. Pour réutiliser des éléments existants, il faut les rappatrier de unsafeWindow avec précaution et partimonie évidemment.
Si la bibliothèque, le framework, le fichier Javascript que vous aimeriez utiliser ne serait pas présent, il est toujours possible de le charger dynamiquement en ajouter un noeud script à la page (head ou body, c’est du kiff), puis d’attendre qu’il soit disponible.
XML
Comme vous le saviez peut-être déjà, il n’y a pas de responseXML disponible depuis un script utilisateur. Il vous faut parser le texte en XML à la mano. À part le parseur du navigateur lui-même, il est possible de jouer avec E4X ou plus simplement JSON.
Yahoo! Pipes offre comme format de sortie JSON d’emblée, il est simple de passer par ce service pour avoir du JSON: XML to Pipes, un exemple en deux temps trois mouvements de ce type d’usage.
Yahoo! ou Google Maps
Les deux services se présentent sous la forme d’un script à insérer dans sa page. Ce script là ne va pas fonctionner avec la méthode DOM de chargement de scripts à la volée car ils se servent de l’appel document.write pour inclure d’autres scripts. La seule solution que j’ai trouvé est de copier le contenu de se script là et de réécrire le bout contenant des document.write pour se servir d’une méthode moins brutale. Joyeux Hacking!
Sinon j’aurais plaisir à partager dans un bar, autour d’un verre, des séances d’améliorations de services existant avec ces outils là que peuvent être Greasemonkey ou Stylish (dans une autre mesure). On a tous des petites frustrations quotidiennes, les partager et les transformer en créativité est une idée qui me réjouis grandement. Aucun besoin d’être un codeur fou, des envies d’une ergonomie meilleure, plus simple, d’un look plus attrayant, d’une accessibilité meilleure, tout est bon à prendre. N’hésitez pas à me laissez un mail.
