Recently, I was trying to write a greasemonkey script to override the HTMLHeadElement.appendChild function in the browser DOM. Well, the reason I was trying to do that was to redirect a json-p call to my servers instead of the once mentioned in the webpage. Json-p works by dynamically adding a script tag to get around the cross-domain restriction policy of browsers. So, in most cases the script tag is added to the "" element. What I was trying to do was :


HTMLHeadElement.prototype._appendChild = HTMLHeadElement.prototype.appendChild;

HTMLHeadElement.prototype.appendChild = function(node) {
if(node.nodeName == "SCRIPT") {
var new_src = "http://foo.com/?...";
node.setAttribute("src", new_src);
}
HTMLHeadElement.prototype._appendChild.apply(this,arguments);
}


Well, this script worked on the Firefox console. But, it turns out it does not work as a Greasemonkey script. The reason being the greasemonkey scripts are run as part of a sandbox, and so do not have access to all the window elements. ( I wonder why ? ) . I even tried using "unsafewindow" , but even that does not work. You get access to HTMLHeadElement, but HTMLHeadElement.prototype is undefined. So, what now ?

Well, there is a simple workaround. Just modify your greasemonkey script to run the above code as part of the script in page. Basically, create a script tag, and add the abpve script as part of the script. Now since, this code will run in the context of the page and not in the context of the greasemonkey script, you will not have to worry about any restrictions imposed by the greaemonkey script. I basically put all my code in a separate js file and then loaded that into the script tag using greasemonkey:

document.body.appendChild(scriptElement);


And, there is another advantage to writing greasemonkey scripts this way, you separate out the main javascript from the greasemonkey script. And now you can keep updating your javascript and the users can keep getting the updated functionality without them re-installing the greasemonkey script again. Sweet!

I was recently reading the book Learning Jquery by Jonathan Chaffer and Karl Swedberg . After reading the chapter on Rotators and Shufflers, which shows how you can create a headline rotator, I decided to implement one for my own website, adevelopedworld.com. adevelopedworld.com is a website which features social entrepreneurs from all around the world. We constantly get updates from the social entrepreneurs that we have featured, and we had to manually update the homepage to show these updates. After implementing the headline rotator, we just keep adding the updates to a text file, and the homepage gets automatically updated. And to top it, the homepage looks all the more dynamic.

The tutorial on how to create the rotator in the book is very complete. I just had to make one change. The tutorial is based on an old version of jQuery which supported XPath expressions. XPath expressions are no longer a part of JQuery. But there are two solutions :
a). Either add the XPath plugin for jQuery, OR
b). Change the XPath expression to a normal jQuery selector expression.

I used the latter.

A live demo of the headline rotator can be found at adevelopedworld.com.