Weekend Projects - Rotten Netflix: Rotten Tomatoes overlayed on top of Netflix (Extensions)

Last weekend, I took a day to hack together an extension that injects Rotten Tomatoes reviews into the Netflix UI, so that you can easily see the critics’ ratings as well as Netflix’s personalized ratings.

Here are the links to the extensions for Chrome and Safari:

Chrome: https://chrome.google.com/webstore/detail/bididflonamappcfophnbijljnfagepj

Safari: http://www.mediafire.com/?li7j7965f67ryrg

Someone on Hacker News asked for some information on how the extensions were built, and I wrote a high level overview I thought would be useful to share here as well. This is a good example of how to build a Cross-Domain/Cross-Origin Extension, that modifies users’ existing UIs. There’s lots of different things that you could overlay onto lots of different sites, and this is a good starting point for figuring out how to make those mashups:

You can find the source on github (not very well commented):

https://github.com/nicolaerusan/RottenNetflix


How the Extensions are Built:

Using Chrome extensions, you’re able to inject a javascript file into pages users browse to. You can limit which pages the javascript file is injected into using the Chrome Extensions’ manifest.json files (in my case I limit it to injecting only into netflix.com and it’s subdomains).

Here’s how the injected javascript works in steps:

1. A user browses to a netflix.com page

2. Retrieve all the elements on the page that correspond to movie names (This is done by looking for all DOM elements with a specific class name that Netflix is using to identify the movies, in this case I found that the movie name is stored in the alt attribute of .boxShotImg elements).

Note: If Netflix changes their html so the elements with the class names I’m searching for no longer have the movie name as their alt tag, the script will no longer work and would need to be updated to match whatever classes Netflix changes to.

Now we know the movies on the page, we need to get the ratings from Rotten Tomatoes. - I was going to try to use the Rotten Tomatoes API for this, but they have a rate limit of 10 calls per second, and no way to ask for ratings for multiple movies per call, so this doesn’t work well when you have +10 movies per page, per user. - So, given that I couldn’t use the Rotten Tomatoes API, and given that Rotten Tomatoes’ urls follow a predictable pattern, I did the following:

3. For each movie name, figure out the Rotten Tomatoes URL corresponding to that movie name, e.g. www.rottentomatoes.com/m/[THE_MOVIE_NAME_WITH_UNDERSCROES_FOR_SPACES]

4. Crawl the URL of the Netflix page with an AJAX GET Request. (means we’re doing as many AJAX requests as their are movies appearing on the Netflix page)

5. In the HTML that’s returned from the AJAX request, search for the element that holds the movie’s RT rating, in this case, and element with id #all-critics-meter ~ the HTML in there is the RT rating for that movie (Note again here, that I assume RT has this consistent naming convention on its pages, and in its URL pattern, if any of this changes, again the script won’t work).

6. Append the RT rating of each of the movie elements we’ve retrieved to the corresponding element on the Netflix page. (where I append the RT rating depends on what Netflix page the user is currently looking at, e.g. the Genres page, the home suggestions for you page, or the individual movie page .. but there are not that many pages to take care of with Netflix).

Hope that is somewhat clear and systematic.

One last side note is that when I was porting to the Safari extension, I hit a snag because I was unable to directly make AJAX requests to rotten tomatoes from Netflix, because of Cross-Origin ajax restrictions. This is overcome in the Safari extension by communicating from the injected script, to another page that the extension itself has (background.html), which IS allowed to make Ajax requests cross-origin. The background page makes the ajax requests, gets the data we want, and sends it back to the injected script (all communication between the background.html and the injected script happening via Safari extensions’ provided messaging protocols.

30 Notes/ Hide

  1. nicolaerusan posted this