First of all this is not a post about best practices, being smart and all that jazz. It's about me exploring new areas to use my programming knowledge.
Update
I put the code on github
The problem
I'm a fan of the WFMU radiostation. They have a wide variety of music and they archive all their shows.
The downside is that after a month they delete the mp3 archive of the shows and because I don't listen all the time I'm missing episodes of my favorite shows.
That is why I started to download the mp3's but it takes too many steps and I needed to switch programms.
- Download the m3u file.
- Open the m3u file
- Copy the content
- Open a browsertab
- Paste the m3u content in the locationbar
So i went in developer-mode and started to work out a faster way to download the mp3's.
The brainstorm session
As i'm getting the mp3 archives as an rss feed and i'm using google reader to view it, the step to making it a browser add-on was taken quickly.
The easiest way to download the mp3 for me is to right click the link, click on a context item and the download starts.
The development process
I've done only a little chrome extension development, but the browser makes it a painless process with it's extension developers-mode.
This mode lets you choose a directory on your pc where the extension files are located and once you 'installed' the extension you can reload it when you changed the source code.
Because i never used contextmenu code i donwloaded the sample code from the google code site, which i also use to learn more about the api's.
The contextmenu item
The code is simple enough to understand.
- Define when the menu item has to be added, the contexts.
- Iterate over all the defined contexts to add the menu item and click handler, the genericOnClick.
The m3u content
From the sample I learned the first parameter of the click handler, info, holds the m3u url, linkUrl. Not a lot of brainpower needed here.
From my previous experience i know to get the file content i have to do an ajax request.
To make a cross-origin request possible you need to add the sites to the permissions variable of the manifest.json. This file contains all the metadata of the extension.
The download
Now we come to the head scratching part. As much as I searched I couldn't find a way to use the ajax responseText to automate the download.
I was trying to inject the mp3 url in the originating tab and then programmatically clicking on it. To do this i had to use the tabs.executeScript method but as i found out the code is executed in a sandbox so it can not use values from the click handler.
So i had to settle with opening a new tab which has as url the mp3 url.
The future
Now the number of actions has reduced to 3 and i can stay in the browser.
- Right click the link.
- Click the contextmenu item.
- Save file from tab.
I'm not going to show the code now because I want to make it more robust and universal.
There are no messages when something went wrong. I assume the content of the file only contains one mp3 link but i know it can contain multiple files.
Later i could support more metadata files and use a converting service like zamzar to make it an allround downloading extension.
