JS/HTML

{Firefox Addon Messing } Get real youtube link from playlist

Firefox and youtube
Image courtesy of the Internet

I’m a youtube addict. No doubt. I would watch Youtube hours on end whenever I have times ( Do you have that much time?….sigh ). With the new youtube design ( 2013 I think ), a new “Music” tab appeared that will give a playlist attack. Youtube generates playlist, “Mix” based on your video’s frequencies – I sometimes resort to this tab for current trendy music🙂.

I have some playlists of mine too, videos that I like and saved to comeback to later. Here is the problem, depending on the mood I only want to watch a couple videos out of those piles, or most of the time ONE, ONE is enough. Be nice if Youtube let me select couple videos and create a temporary playlist just for the purpose. Actually, you can manually create the playlist and add videos of your choosing but I’m lazy, too many mouse clicks haha, and mood varies by days, so I have to do this chores ad infinitum. Youtube you should give the user the ability to mix videos within playlist given a parameter n of some sorts, say, maybe the number of videos

…… Anyway, since I ve been a Chrome naysayer, and been using Firefox these days, why not creating Firefox add-on that select one video out of that playlist by rightclick? OK, times for javascript.

1. The crux of the problem.

…..Is just link/string manipulating, cut string off and normalize it. Youtube link has a following format:

When it is added to a playlist, it is appended(ampersand separated)with an index ( position in the playlist ) and list hash string of the name ( maybe? ). for example :

https://www.youtube.com/watch?v=zxG3aUm0T3M&list=LL96sfSE-_R8Sbm_BjaMKx8Q&index=2

(link params follow the standard : &a=&b=…..)

So we can write a crude function to normalize this link , that is passed in as parameter

So then we need to inject this function into Firefox somehow

2. Firefox Addon

Turn out the documentation is not that complicated.

Installation : https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation

Getting started : https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_started
Project setup is easy and automated:
To create a project :

mkdir my-addon
cd my-addon
cfx init

 

So I want the user to right click the link and invoke my function ( somehow ). Firefox call this context-menu, the little panel that appear if user right click. Note for blank area it would have Back/Forward/Refresh page:

We want to mimic something like that

Easy, to create an entry into that menu, we do it like so

In which,

label : The menu item titles/text
context : The context🙂. The action/condition/events that would fire off our function. In this case SelectorContext is when user select/click a html node. For our add-on, we only care about link.
contentScript : The script that will be invoked for our context. It can be loaded from external js files if the function is too long. For our purpose we just want to hook up our function. So we will fire the message. ===> Note: This is the same concept in Chrome extension.
onMessage: handle the the event fired by contentScript. We just delegate to our function.

To run, do

cfx xpi

Then go to firefox File > Open the exported xpi

That’s it. Easy.

Selecting youtube link
Context Menu in action

3. A note on context. Some improvement needed

Currently, it is responding to all the link, which is kinda stupid. We need it to act on youtube playlist link domain only. Actually, I have that in mind before I coded this. See that context taking array ? ( [] ), we could have list of context/condition for firefox to fulfill before it displays our menu item ( provided it can deduce that our condition passed ). In this case, we want it to only handle link when it is in youtube playlist

cm.URLContext(["*.youtube.com/playlist*"])

URLContext is matched by pattern : https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/util_match-pattern

For some reason, it does not work. If it works then our function stripOffYoutubeLink does not have to check indexOf(‘youtube.com’). Will look more into this later.

Note: The whole add-on does not seem like heavy javascript at all. Firefox does all the heavy lifting

…………….

End note :  Here’s the youtube video I was trying to grab. “Fallin’ For you” by Collbie Caillat

Enjoy!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s