Follow me on Twitter for my latest adventures!
I remembered that reddit had decided not to display posts with a submission time less than two hours ago.
This left me thinking, if the scores are not displayed for new posts, what's the point of having vote boxes on a just posted article page? I thought, it wouldn't make sense if it wasn't available. Quickly did I find a link on reddit's new page which seemed to have received a few votes and added a reddit's button to an empty HTML document.
where the URL is the URL to the article and TITLE is the title of the article.
Voila! I now know something nobody else did - how many votes had the post received!
NOW, let's create something cool for general public to use so that anyone could reveal the scores for all recently posted links :)
Let's use the FireFox browser and its excellent GreaseMonkey add-on/extension.
What is GreaseMonkey you might wonder?
Greasemonkey is a Firefox extension that allows you to write scripts that alter the web pages you visit. You can use it to make a web site more readable or more usable. You can fix rendering bugs that the site owner can't be bothered to fix themselves. You can alter pages so they work better with assistive technologies that speak a web page out loud or convert it to Braille. You can even automatically retrieve data from other sites to make two sites more interconnected.
Writing the User Script
The basic idea of the script is to parse the DOM of reddit's page, extracting all the posted links and find the links which do not have score displayed (which are newer than 2 hours), then replace the HTML of original up/down vote box with the widget's HTML.
First we need to understand how reddit's entries are layed out on the page. To do this we could view the HTML source of the page, but this method requires too much effort for us because we'd have to prase HTML in our heads. Let's use something more visual. There is an extension to FireFox called FireBug which allows to explore the HTML of a page in a much nicer manner.
We see that each entry on the page is wrapped in two <tr> elements, where each of them have a class name "oddRow" or "evenRow". Our GreaseMonkey user script will have to find these rows and extract the title information from the first row, and date information from the second row.
To do this we use the DOM's getElementsByTagName function to retrieve all <tr> elements on the page, next we loop over these elements matching those having a class name "oddRow" or "evenRow" and maintain a state whether we are matching the first or the second row and call extraction functions for each row accordingly.
Look at find_entries function in the final script to see how it extracts all the entries from the page.
Once we have extracted the entries, all we have to do is replace the HTML of the original up/down vote box with HTML of a up/down vote widget. (See the display_votes function in the final script)
And we are done!
Here is how the reddit page looks like when the GreaseMonkey script has run:
Reddit Score Revealer GreaseMonkey Script
Download link: reddit score revealer (greasemonkey script)
Downloaded: 2646 times
Once you click the link, FireFox will automatically ask you if you want to install this script. Select "Install" and visit reddit.com/new to have infinite power over the regular users!
Here is a screenshot of how the GreaseMonkey user script Installation dialog looks like:
ps. Has anyone successfully debugged GreaseMonkey scripts? I could not find a way to set breakpoints or even load the user script in any of the debuggers which come with FireFox. Any suggestions?
pss. The current implementation of the script replaces the original up/down vote box with an iframe. This is kind of ugly. I'll leave it as an exercise to a curious user to change the script to retrieve the score via XMLHttpRequest interface and change the "published NN minutes/hours ago" status line to one with the score in it. :)