Aching Brain

I’ve just posted JSThing on the stuff page. It’s a bit of JavaScript in the form of a favelet that allows you to edit the window object of a given web page and interact with your changes. It works well with Firefox but is a bit too long for IE.

JavaScript is a wonderful little language. When you load a page with some JavaScript in it, the objects and functions that are created exist for the duration of the page in your browser. Some of the data may have been used, some may not. JSThing allows you to examine and change that data.

Here’s a little example. If you add JSThing to your links bar (get it from the link above), then head over to http://www.google.co.uk and activate JSThing, you’ll see that the fourth item in the window object is a function called qs(). It looks like this:

function qs(el) {
if (window.RegExp && window.encodeURIComponent) {
var ue = el.href;
var qe = encodeURIComponent(document.f.q.value);
if (ue.indexOf("q=") != -1) {
el.href = ue.replace(new RegExp("q=[^&$]*"), "q=" + qe);
} else {
el.href = ue + "&q=" + qe;
}
}
return 1;
}

Examining the source of Google’s home page reveals that this function gets called when you click the Images, Groups, etc links above the search box. In JSThing, hit the little red hat next to the the name and type of the item (qs function) and it will appear in the boxes at the top. Change the function to read:

function qs(el) {
window.opener.alert(el);
return false;
}

and hit ‘Go’. Some text should appear saying ‘Value changed, hit refresh’. Click the ‘Refresh tree’ link above where the text appears and the list of properties should update to reflect your changes.

Now go back to the Google window and click one of the Item, Groups, etc links. An alert box should appear with a URL in it.

This sort of behaviour should be possible on pretty much any page. AJAX applications in particular should be quite fun to play with.

Also, inspecting code to debug your own programs should be much easier with this - for example, ensuring proper namespacing (as proper as you can get with a language where everything is global by default) is a doddle.

Try it out and let me know how you get on.

Update - It now treats arrays slightly differently from other objects in order to parse them properly.
Update - Slightly better error handling when trying to access properties it shouldn’t.
Update - Human readable source now available.

Popularity: 9% [?]