Thursday, February 26, 2009

Stupid console tricks: Getting the names of your Twitter non-followers

If you follow a lot of people on Twitter, but some of them don't follow you back, and you'd like to know who, exactly, those insensitive, churlish dolts are that don't find your tweets amusing, I have a couple of practical tips for you (with a quick JavaScript lesson thrown in for good measure). Ready?

First tip: Go to and enter your Twitter name in the box. When you click the magic button, you'll see a new page appear, with the little thumbnail headshots of all your non-followers lined up in a grid. A veritable wall of infamy.

How do you harvest the usernames of these folks? Unfortunately, doesn't seem to have an Export button (unless I'm missing something). There doesn't seem to be any easy way to capture those names.

Not to worry, though. You know JavaScript.

If you're running Firefox, flip open the Firebug console (install Firebug first, if you haven't done so already; how can you live without it?) Copy and paste the following code to the console:

// convert DOM to string

markup =
(new XMLSerializer).serializeToString( document.body );

root = new XML ( markup ); // convert string to XML

users = root..A.IMG.@alt; // magic E4X expression

for ( var i = 0; i < users.length( ); i++ )
console.log( users[i].toString( ) );

When you run these lines of code, all the usernames of the folks whose thumbnails are shown on the page will be written to the "output" side of the Firebug console.

Let's step through the code. The first line of code creates an XMLSerializer object (Mozilla API) and uses it to serialize the DOM starting with the 'body' node. We need to use an XMLSerializer here rather than just fetch the markup from innerHTML, because we don't want to have gnarly ill-formed HTML in the next step, lest we puke and die.

With our pristine, "tidy" (if you will) markup, we create a new E4X XML object out of it via the XML constructor and assign the result to the cleverly named variable "root."

In the highly magical third line of code, we use E4X notation to suck out all the descendent A elements (however many levels deep) under root that also have an immediate child of IMG with an attribute of "alt". The information we want (the username) is in the "alt" attribute of the IMG.

Note: 'A' and 'IMG' are capitalized because the "tidying" process that occurs in step No. 1 results in capitalization of all HTML element names. This is an important bit of canonicalization, since XML is case-sensitive.

The for-loop simply peels through our 'users' list and writes each name to the Firebug console using Firebug's console.log method. Note that the length of 'users' has to be obtained through a method call to length() rather than via direct property lookup, because 'users' is not an ordinary JavaScript array. It's an E4X node list. You have to use the length() method.

With not much extra work, you could wrap all the user data up in html tags and build a new page on the fly, and make Firefox render it in the current window, if you wanted to. Or you can just print out the thumbnail images on a piece of paper, stick it to the wall, and find some darts.

The choice is yours.


  1. Another solution is to use the jQuery javascript library. There exists a bookmarklet called jQueryify. You can get it from the authors post

    I've found the bookmarklet indispensable for adding jQuery to pages so I can better inspect them with FireBug.

    Assuming the FriendOrFollow page has been jQueryified you can run the following code in the FireBug console:

    jQuery("#userList img").each(function(i,userImage){

    It uses jQuery's powerful selector syntax to return an array of all image elements contained within the div called userList. The each() function is an iterator method that simply echos out the alt tag which contains the Twitter username.

    I love how today's tools are growing to the point that we can use so many different ways of getting data out of a page.

    Kas, I had no idea of E4X until I read your post. I've started looking into it as a result. I'm assuming its not widely adopted yet which makes it awkward to use in cross-browser web applications. I'm curious to know if it is part of webkit though. If it is then it could most certainly be used in apps specifically targeting the iPhone/iTouch or AIR or Titanium.

  2. There's an interesting thread at that you might want to look at. I don't know the current status of E4X in Webkit, although it certainly has been on their radar for a while. Opera is pursuing it, but again I don't know the very latest status.

    Adobe ActionScript does already support E4X. See the tutorial at

    Back in Java 1.3 days, I used Mozilla Rhino together with the (Apache) xbean.jar in the same classpath, giving an E4X-enabled Rhino interpreter.

    E4X (ECMA 357) is a terrific technology and I feel certain it will follow whatever fate awaits JavaScript 2 (ECMAScript 4). I.e., if JS 2 becomes ubiquitous, so will E4X along with it.


Add a comment. Registration required because trolls.