Exploring the Netflix player with the Caffeine Chrome extension

debugging Better Call Saul with Caffeine

With the latest version of the Caffeine Chrome extension, you can run Caffeine in a Chrome DevTools panel, with access to all the Chrome debugging APIs. I’ve been using it to explore the Netflix video player, for an app I’m writing that enables the viewer to edit narratives by rearranging scenes.

From a quick look at the DOM element tree for the player, it’s apparent that it’s a React app. By following a reference chain from a user interface element (like the skip-forward button), through the bound “this” object of its click-event listener, I found the internal React properties for all the player’s UI elements, and all the player functions they use (for example, for seeking forward in a video).

With those functions in hand, I made a Netflix player class in Smalltalk, which can manipulate the Netflix player React app interactively from Smalltalk code. Other objects I made representing show elements (like scenes, episodes, seasons, and series) can use my player to compile analytic information about shows, and present them in different ways. For example, you could watch an episode of Better Call Saul consisting only of scenes that include a certain character, or that take place at a certain location, or with flashbacks placed in chronological order. This is for a webapp I’m writing called Arc.

I’m eager to see what else you explore using the Caffeine extension in the DevTools!

8 Responses to “Exploring the Netflix player with the Caffeine Chrome extension”

  1. andyburnett Says:

    I would love to see you do a video of working with caffeine. A screen recording would be invaluable.


  2. andyburnett Says:

    Would it be possible for you to do a short video capture of how you are using caffeine? I think this would be hugely useful.


  3. A video really is an excellent idea IMHO. The toolchain you have created clearly has a ton of power, but at least for me, it is hard to wrap my brain around how to use it. Looking over you shoulder as utilize it would be most helpful.


  4. Craig,
    Awesome work !!!
    I have installed Caffeine in my Chrome (Windows 8 OS).

    HTML devtools hang with:
    HTMLSmalltalkClassesBrowser open.
    HTMLSmalltalkWorkspace open.

    If i debug it stop on VueComponent>>loadScript

    I have to install VUE in my machine to run Caffeine ?


    Liked by 1 person

  5. Thanks! I haven’t yet tested Vue support when running as a Chrome extension. I’ll look at that for the next extension release. I see that the Vue scripts aren’t loaded by the extension’s panel.html file, as they are in the normal version’s index.html file, and that the extension’s manifest doesn’t give permission to access the CDN site that hosts the Vue script files.


  6. andyburnett Says:

    Thanks, that gave me a much better overview. And, just because users are never satisfied :-), would it be possible for you to do another quick video showing something like the following:
    1. Navigate to Google news,
    2. Grab the first headline,
    3. Get the contents into Smalltalk.

    Or any other equally simple example that catches you fancy.

    Ultimately, what I would like to be able to do is to, for example, see an interesting table of data on wikipedia, fire up Caffeine and be able to – relatively easily – pull the data into an OrderedCollection for subsequent processing in Smalltalk.

    I can see roughly how to do this, but a quick video (when you have time) on something this basic would be very helpful.

    Liked by 3 people

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 )

Connecting to %s

%d bloggers like this: