About the Project
IMDb Age is a Google Chrome Extension that shows the age of an actor against each of their films. With the click of a button you can scroll through a filmography and see the age they were at each of their important turning points.
With a prototype out of the way, it was time to crack on and build the extension!
Updating the DOM
One of the main features is reading an actors birthdate, calculating their age for each film, and updating the DOM to reflect this. Unfortunately, IMDb’s site doesn’t have the best naming conventions, so there was a lot of trial and error to find the best anchor point to use before traversing up and down the DOM tree.
It was important to give users some customisation in terms of which page to show ages on. An actor’s page is a given, but would you like to see everyone’s age on a film’s page? What about the full credits page?
In order to achieve this, we needed to save a variable that would be stored in the Chrome storage, and not be deleted after each browser restart. On top of that, we needed to message that variable across, from the DOM script t the Content Script. I experimented with using new technology like window.postMessage, but good old eventListeners worked better in the end!
On of the reasons we don’t turn on ages on a film’s page by default is because it’ll ruin your Recently Viewed history on IMDb. The reason for this is because we need to get the actors ages on the fly, so we open up everyone’s page in a hidden request. We could use a third party database for this, but seeing as IMDb have been taken to court over actors ages before, we didn’t want to skirt the law in any way!
Instead, all the data we show on the page is sourced and calculated from IMDb’s website. We show a warning before turning this feature on, to make sure users are away of the consequences.
Try the extension: IMDb Age