HypeMachine Chrome Extension and Hacking the Isolated world

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!

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.

7 Replies to “HypeMachine Chrome Extension and Hacking the Isolated world”

  1. works pretty well… only thing i have run into is that i have to specifically type in each page if i want the download links to appear… e.g. my songs 1, i have to load that directly. once that page is done, close that tab, open new tab with my songs 2

  2. This is looking really good man. A couple suggestions I have would be to line up the download button, and maybe make it a flat glyph like the other icons with a hover effect (that’s just my designer OCD talking).

    After giving it a try I tried to see if you could force a save dialog to popup on click with javascript, but it appears at a brief glance that you can’t. Would be really great if it were possible though.

    As for the timeout set for 2 seconds, while it works, it’s not the best solution, as I’m sure you know. If HypeM creates its elements with javascript then you could check to see if the elements exist, then run your function. You would have to keep rechecking until it is there, something like:

    function elementExists() {
    if(element exists) {
    run your script;
    }
    else {
    elementExists();
    }
    }

    As mentioned, it kinda sucks that they load all their pages with Ajax. You said that you don’t have access to global variables. Maybe you can check for the existence of that ajax spinner when it loads pages, and that will trigger the script for the download links to be set off again.

    Again, if you want any help or have any questions about CSS/JS just let me know I’d be happy to help. One last note, this is Prototype, not jQuery. I prefer jQuery personally but am familiar with both.

  3. @Eric Roberts:

    Oh awesome Eric. Those are some sweet tips and explain a lot.
    Yea I couldn’t figure out how to do it through Javascript the popup. I could change the extension to .exe and i wonder if i can rename it using JS in the popup or something.

    I’m going to take your suggestion and check if the element exists as well instead of the timeout.
    I’m also going to override their ajax call so mine gets called first as well on page load.
    I might need some help on the CSS cause I have no clue what is a glyph. 🙂

    I’ll throw up the source in a bit.

Leave a Reply

Your email address will not be published. Required fields are marked *