Thursday, March 22, 2012

Google Chrome Extension: "IMDb Ratings Viewer 1.2" on actor's page

Description: Show ratings when you open actor's page.

If you are a movie freak, a day won't pass when you won't open an actor's page and find more movies to watch. The actor's page has the list of all the movies in which he acted but for some reason IMDb doesn't show the movie ratings. I feet to lazy to open each links and watch the rating. 

 So, I wrote this extension to ease up the process. The ratings of movies are shown beside the names of the movies and after installing there will not be any need to open movie's link in new tab just to watch the rating.

EDIT: Now supports HTML5's localStorage to save bandwidth if an actor's page is opened second time.

Video about what the extension does is included in the link above. (and below too).




Content Script:- 

/*
Author: shadyabhi (Abhijeet Rastogi)
Email: abhijeet.1989@gmail.com
*/

function addRating(url, element)
{
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {   
        if ( request.readyState == 4 ) 
        {   
            callback_addrating( request.responseText, element, request.status );    
        }   
    };  
    request.open( "GET", url, true );
    request.send()
}

function getMovieElements(){
    //All Movie elements are in 2 different classes (they do it for different color tones
    var ele_even = document.getElementsByClassName("filmo-row even");
    var ele_odd = document.getElementsByClassName("filmo-row odd");

    //Reoder the elements as right now, Nodelist for odd and even are separated. 
    var all_elements = new Array(ele_even.length + ele_odd.length);
    var index = 0;
    
    var max = ele_odd.length > ele_even.length?ele_odd:ele_even;
    
    for (i=0; i<max.length; i++){
        if (i < ele_odd.length) all_elements[index++] = ele_odd[i];
        if (i < ele_even.length) all_elements[index++] = ele_even[i];
    }
    return all_elements;
}

function callback_addrating(serverResponse, element, status){
    var pattern=/itemprop=\"ratingValue\"\>(.*?)\</;
    var rating = null;
    var match_rating = serverResponse.match(pattern);
    if (match_rating != null) rating = match_rating[1];
    
    if (rating != null){
        var container = document.createElement("span");
        var rating_container = document.createElement("span");  //Did this crap to make brackets black
        rating_container.appendChild(document.createTextNode(rating));
        rating_container.className = "in_production";   //Give it a red color to mantain consistency 
        container.appendChild(document.createTextNode(" ("));
        container.appendChild(rating_container);
        container.appendChild(document.createTextNode(")"));
        element.appendChild(container);
    }
}

function main(){
    try{
        //For suggestions
        var ele_knownfor = document.getElementById("knownfor");
        for (i=1; i<=7; i=i+2){ //Assumed number as 4
            var ele_moviename = ele_knownfor.childNodes[i];
            var movie_link = ele_moviename.childNodes[5].href;
            addRating(movie_link, ele_moviename.childNodes[5]);
        }
    }
    catch (err) {}; 
    all_elements = getMovieElements();
    for (i=0; i<all_elements.length; i++){
        var movie_link = all_elements[i].childNodes[3].childNodes[1].href;
        addRating(movie_link, all_elements[i].childNodes[3]);
    }
}

main()

5 comments:

  1. name describes it all codefire.... :) awesome extension.....i wasn't looking for it but will definitely use it

    ReplyDelete
  2. Awesome extension......!!!
    and awesome video !!!

    ReplyDelete
  3. Hi

    This is a really handy extension and indeed saves a lot of time.
    I have recently started developing chrome extensions and was going through your code on GitHub (same as above).

    You are injecting a content-script to imdb pages. Say, if I use browser-action instead to inject the content-script on a button-click event, I suppose everything will work as usual. But, is it possible for the content-script to communicate with a popup.js file and send the 'rating' to it and likewise for the popup.js file to receive the incoming rating and display it onto a popup.html page?

    Basically, is it possible for us to fetch the ratings and show them on a page that pops up on clicking the extension icon?

    I do sort of understand that there are limitations to communication between content-scripts and the extension and that content-script run in so-called isolated environments.

    ReplyDelete
  4. Glad, you liked the extension. Sorry, I won't be of much help here. I changed my browser of choice to Firefox shortly after I learned basics of Chrome extensions so didn't really do a lot in this.

    ReplyDelete
  5. Will you update this extension? It no longer works. Thank you.

    ReplyDelete