One of the things YouTube has done well has made certain shortcuts for videos ubiquitous. The flipside is that when an HTML5 video doesn't have those shortcuts, it's annoying.
That's the case with F1 TV. So, with my new found browser extension building skills, I decided to tackle that one issue (of the very many) that plague the F1 TV website.
There really isn't much to blog about in this one, but here's some things that were interesting to learn on my browser extension journey.
Before going any further, you can pick up the code for my extension on GitHub.
You can run several types of scripts ranging from popups in the toolbar, background scripts, content scripts, and developer tools scripts. Each one of these has its own unique restrictions and ways to interact with the website. I'm not going to go into each in detail here, but it was interesting to learn about.
In my case, I used a content script to inject code into the website. However, this code runs in its own isolated Javascript sandbox.
If you're waiting for interactions to happen in the client Javascript, you'll be waiting forever. One of these examples is that I tried injecting, loading and waiting for the Google Cast API to initialize.
To get around this, you can inject Javascript (or CSS) elements directly into the DOM. If you're providing an external file like I did, you have to declare this in your extension's manifest.json
ahead of time and specify which browser addresses on which to perform the injection.
Though I had pretty simple needs for playback, pause / play and minimal seeking, it turned out that YouTube power users have enjoyed a number of playback controls that I had no idea existed. Here's what they look like:
The code is thankfully simple enough:
MutationObserver
is used to wait for the HTML5 <video>
tag to be added to the page by embedplayer.js
video
container.I am trying to add Google Cast abilities to it too. This seems like a bit of a harder challenge since the HLS (HTTP Live Streaming) stream needs to be authenticated.
It turns out you have to build a Cast Receiver and Cast Sender for Google's Cast API...which is a bit more trouble than I originally anticipated.
Sounds like a good idea for a future hack!