Chrome HypeMachine Extension

UPDATE: I posted a cleaned up version of the extension on the chrome gallery. Check it out here.

After finishing the hypemachine batch downloader script, I decided to see if I can leverage my investigation into their website into making an extension for a popular browser. I decided to make a Google Chrome Extenson simply because it is the browser of my choice. From what I was told, aparantly a lot of the headaches I encountered writing the script could've been avoided writing a Firefox script instead and using greasemonkey instead.

So writing this script, introduced me to the crazy notion of Javascript Injection. I was so blown away by the whole vulnerability that I am a bit worried about how vulnerable the internet and browsing is. Anyways, what I aimed to do was inject a download button next to each song so that someone can easily download the track of their choice.

I know there was a version of this for greasemonkey before and possibly chrome. I couldn't find it however (saw it mentioned on some sites) and they noted that they were no longer working.

Anyways, here is a picture of the final result (notice the tiny green download icon):

So please download the extension and alpha test it for me. I already know of some improvements to make and will update it and throw it up on the extension gallery once its solid.

Hacking the Isolated World

So how does the Chrome extensions work? Well they create what they like to call a "isolated world" and allow you to define javascript files that will execute on different times during the loading of the page. The problem is that their isolated world does not allow you access to the variables or functions defined by the page.

You can however perform crossite Http Requests which coupled with my workaround is pretty crazy.

The workaround to the isolated wold is really hacky but works. You can easily append to the HTML contents of the page, so simply append a string that contains the script tag as well as the script!

 
var script = $("<script type='text/javascript' charset='utf-8'>
    $$('ul.tools').each(function(index) {
  //set songUrl to the songUrl and chromeUrl to the picture of the donwload image
      index.insertAdjacentHTML("AfterBegin", "<li class=\"cext\"><a href="+songUrl+"> <img class=\"cext\" src="+chromeUrl+"></a></li>");
      });
  </script>");
function waitForLoad()
{
  $("body").append($(style));
  $("div#footer").append($(script));
}
setTimeout(function() {waitForLoad();}, 2000);

I largely did this knowing very little jQuery as well as web programming. Most Some of it is still lost on me. For instance, I am confused about the return values from the .each() function performed on the $$('ul.tools').

1. index returns a HTMLElement
2. $(this) returns the DOM object

I am confused about why I get back the DOM object...

The hypemachine website uses javascript to automatically generate a lot of their HTML including the list of songs themselves. In order to make sure to run the script after their scripts have finished executing I had to insert the 'hack' of setTimeout to call my script hopefully after theirs have completed.

It was super annoying writing the whole script embedded within a string because it was confusing remembering whether I needed to single, double or triple escape quotes that are nested since I had strings in strings...
Inception.

You can download the HypeExtension here.

---