jTARDIS - Time Travel for Browser History
jTARDIS is a jQuery plugin which allows you to see what sites a user has visited by going back through their browser history. Traditionally, it has not been possible to go through a users browser history as this can obviously be seen as a security risk. However, with this plugin you can essentially ask the users browser "have you been to facebook.com" (or any other site) and it will come back with a yes or a no. This is made possible by generating a list of links which you'd like to know if the user has been to or not and then checking with the browser whether they flag up as :visited. There are a few javascript snippets floating around which allow you to do this by checking the colour of :visited links but these are generally quite large scripts as IE requires that you place such links inside a visible iframe and get the computed style. This plugin uses 2 lines of CSS and a small amount of jQuery magic to get the same results in a cleverer way - it's also completely cross-browser compatible without any hacks or browser sniffing.
Disclaimer for hippies: For those of you who are immediately thinking about flaming around the internet about how intrusive a script this is and that I shouldn't be able to tell what sites you've visited, then just sit back and think a little more. This script exists, others similar to it have existed for a long time. It is very easy to get round as it relies on your browser history so if you don't want other sites to know where you have been, either disable javascript or enable private browsing (this is a Safari feature which disables tracking cookies and browser history for the duration that it is turned on - there are Firefox extensions available to do the same thing and IE8 is going to be including it as standard). If anything, this script brings to light a hideous security flaw (albeit one that is unlikely to ever be patched) and should educate people more about browser habits, namely that your browser is about as likely to keep a secret as an office secretary.
Disclaimer for gypsies, tramps, and thieves: If you are the sort of person that is rubbing their hands with glee thinking of all the horrible acts you can commit by checking what sites someone has been to, then stop and think! If you're a microsoft/apple hater who is going to check whether a user has been to microsoft.com/apple.com and then redirect them to apple.com/microsoft.com, then don't. It's not big and it's not clever. This goes for people who would plan to check for porno sites and then display a big alert box saying "THIS PERSON HAS BROWSED BIGJUGS.COM AND LEMONPARTY.ORG" and also to people checking which presidential candidate's website you've been to and then sending them to your favoured candidates website instead (am I the only one bored of the US elections?). You've been told!
Download, Installation, and Usage
So how does it work? Simply download the following three files and you'll be on your way - please note you will require the jQuery library
- jtardis.css - 2 line stylesheet
- jtardis.sites.js - a JSON object of sites you want to check for
- jtardis.js - The javascript to do everything (fully commented)
- jtardis.zip - All of the above files zipped for your delight
You can now include the CSS file and the javascript files in the usual way (please make sure you include the javascript in the following order - jquery.js, jtardis.sites.js, jtardis.js) to get everything ready. jTARDIS will now automatically create a new global variable within jQuery which you can query in the following manner (please note that the site names will differ depending on how you've configured the jtardis.sites.js file):
$(document).ready(function() {
if ($.jtardis.facebook) {
// run some code if the user has visited facebook
} else {
// run some code if the user hasn't visited facebook
}
});
There are also 2 other auto generated global variables that are available to you:
- $.jtardis.list - an array with the pretty names of all the sites that have been visited.
- $.jtardis.total - an integer with the total number of sites from your list that returned true.
Configuring the jtardis.sites.js file
The only piece of configuration you'll need to do is to the jtardis.sites.js file which contains a JSON object with all of the sites you are checking for. This JSON file is in the following format (if you've never used JSON before you might want to check out json.org):
var sites = {
"facebook": {
"name": "Facebook",
"links": ["http://facebook.com/home.php", "http://facebook.com", "https://login.facebook.com/login.php"]
},
"delicious": {
"name": "Del.icio.us",
"links": ["http://delicious.com/"]
},
"bendodson": {
"name": "Ben Dodson's Site",
"links": ["http://labs.bendodson.com","http://bendodson.com"]
}
}
A JSON object is created against the variable "sites" which the jtardis.js file will use later. The JSON object is then setup with a short name for each site which then has assigned to it a "name" attribute and a "links" array. The file has been setup this way (with 2 names) so that you can have a code friendly name for when you are checking if the site has been visited (the short name will be used for the $.jtardis.sitename variable and thus must conform to the conditions for javascript variables - no spaces, special characters, etc) but a pretty name if you want to display all of the sites you've managed to sniff - this would usually be accessed from the $.jtardis.list array which contains the pretty names of all the sites that have come back as true.
The links array for each site can have as many urls in it as you like - please bear in mind that the script will only look for that exact URL so if you have http://last.fm/ that will not match http://last.fm/user/bendodson/. Please also note that IE will only record the final URL from any redirections so whereas Firefox will pick up http://del.icio.us/ before it is redirected to http://delicious.com/, IE won't.
Suggested Uses
There are numerous ways you can use this script but I've listed a few suggestions below. If you are using jTARDIS, then let me know so I can add your site to the list!
- Show only relevant social networking badges to your users by sniffing to see which ones they belong to.
- Offer special deals to customers to your e-commerce site if you know they have been to a competitors site.
- Present users with a survey if they have been to a certain section of your site for which you'd like their feedback.
- Customize related blog articles depending on where a user has been (e.g. if you wrote an article about the BBC iPlayer and they have been to that site, then promote that blog article above your other related ones).
- Check to see if users have seen your posted videos on youtube. If they have, ask them what they thought of them - if they haven't, then give them a link!
jQuery 1.3.2 :visible Bug
Between versions 1.3.1 and 1.3.2 of jQuery, the selectors :visible and :hidden (which are used by jTARDIS) were optimised to make them run faster. Unfortunately, the new implementation is fairly buggy and it causes jTARDIS to stop working. To fix this, you need to alter your CSS file so that it looks like this:
#jtardis a { display: none !important; }
#jtardis a:visited { display: inline !important; }
The new implementation for some reason doesn't recognise an element that is set to visibility:hidden; as being :hidden but if you use display: none; instead then it counts this as being non visible. This bug fix is already in the files above but is necessary for anybody that downloaded jTARDIS before August 17th 2009. Please get in touch if you have any questions.
Comments / Feedback
If you have any feedback, then please contact me - I will shortly be writing up a blog article about this project so please add any comments there. I'll post a link here as soon as it is published.
- Easy to use
- Small filesize
- Works with jQuery 1.2+
