Getting video request data on Firefox addons

Brief explaination about I learned at catching video requests

Here I am for giving you a help at coding a Firefox addon. It will be assumed that you have knowledges enough in addons environment at writing anything. In other case, it would be better to learn them, it is not difficult.

Firstly, you have to add dependencies in the project's manifest.json. It will be needed webRequest and that is all. Now, you are able to export the core library for starting your app.

Go to your background script and call the global browser object. Being you are in Firefox it is possible to use chrome object instead but it is sufficient with the first name. Among all the available libraries inside our mentioned object, we will choose the called webRequest. This one has onHeadersReceived functionality which intercepts all the headers request traffic in our browser, very intuitive isn't it?

However, our beauty function is useless unless it is added an event listener. Being more specifics, writing

browser.webRequest.onHeadersReceived.addListener(listener,filter)

Look at those arguments, filter just will has request types we are interested to catch. An example could be 'media' or 'xhr'. In the other hand, listener is what it seems, a simple callback that starts each time a new request is detected.

There is not nothing else to say about request traffic management. Mozilia offers detailed docs concerning webRequest library and its different functions.

Mistakes

As time goes, I realize that this space is turning on a lifelong blog instead of programming blog, as I wanted to do at the beginning. Well, at first I wanted to say few things to avoid in this section, that I think it help.

At starting, I wanted to use webDevtools from Firefox utilizing the library with the same name, and then to search for a way to interact with it since a background sending messages. I was useless due to that mandatory needs us to open the devtools as clients, I mean this library use events that responds to us managing our devtool.

I lost long time turning around this, as a good programmer I do not look at the documentation until I was burnout. Finally, I decided to investigate and voila! Reading is really good! Therefore I was aware which resources to utilize, I learned the lesson, later I will forget it and commit the same error.

My experience there

Some time ago I did proves involving HTTP request, exploring the add-on environment and also its debugger for the first time. Then my target was to catch all .mp4 files that are called for the browser, and a method is getting the exact request to the URL that points the mentioned file, the URI indeed, the plain resource.

To our listener, argument of onHeadersReceivedfunction, we pass an specific argument which contains details as attributes about our transactions. One of them are type, url and statusCode. Was easy to get the correct mp4 URL knowing that it is used an special code for these files, the 206.

Doing that, we will surely affect our security in some way but honestly I ignore it, I mean I should investigate it before writing an entire post about it. At least it works for understanding how to classify our data and management accurately.

As I said, in my project I tried to detect videos in general. However, not every media content can be identified with just its status code. There is other that formats belongs to DASH (dynamic adaptative streaming) technology, and also HLS.

DASH is a video streaming technology that is based on a dynamic file linking small segments of a source videos and then sending each one. As a result, we get live video streaming. In our case, they cannot be catched with our 206 cheat. The reason is that dash.js clients utilize algorithms for adapting the transmition in front of network changes, putting the high quality as a priority. I mean we need an extra js script in our frontend for this to work well or I am wrong, please tell me if it is not correct.

All we get is numerous videos segments, like .mp4 shorts and .MDN containing the linking but being eliminated and creating a new one along all the streaming as each new segment appears. It does not match with my simple objective which is just to play videos in my VLC copying its url. Maybe, in a future I should integrate a cdnjs for ending this project.

My vague solution was just getting mp4 source files, and M3U8 linkers. The last one is similar to the MDN but more easier to use, basically just a single file linking segments making possible its playing by just copying this .m3u8 main linker file in our favorite player, an mp4 for streaming. It belongs to HLS (http live streaming) and was developed by Apple, thanks for that!

This is a brief explaination about this topic but you can extend it at reading its official documentation. I always conclude that is a real nigthmare to make original content these days having an inmense resource like internet behind but at least I try to be polite.