Reference

Lifecycle

There are two parts to this application, the client extension and the server. The extension is located in the extension/ subdirectory, and the server is located mainly in server.js, importing some other files from shared/.

Extension

The extension begins with ldn.js. This is the background page of the Chrome extension.

constructor() {
    this.user = new User();
    this.ws = null;
    this.tabListener = new TabListener();
    chrome.runtime.onMessage.addListener((msg, sender, sendResponse) =>
      this._onRuntimeMessage(msg, sender, sendResponse)
    );
}

Some things about ldn.js:

• keeps a local variable user which is just a model that I use to hold user data
• keeps a local ws reference to the websocket client
• instantiates a TabListener
• we listen to messages sent from content scripts via _onRuntimeMessage

TabListener

The tab listener listens to tab events and keeps the tab id of the active Netflix tab.

• executes loader.js if the user is navigating to a watch/ url

Loader

The loader.js script is executed via the tab listener, and also as a content script (via manifest.json). This is so we cover all cases (the script is loaded on a page reload, and also a Netflix SPA page transition)

• It injects our controller.js script into the DOM
• Because our injected script no longer has access to chrome.* APIs, we have to use window.postMessage() to pass messages through loader.js as a middleman

Controller

The controller script controls all the DOM actions and events that we have to control. It uses MutationObserver to wait until the Netflix player is ready.

• Has the basic functions pause, play, seek, currentTime, duration
• Passes messages back to ldn.js through loader.js to update the ldn.user variable

Popup

The popup is created via page_action in manifest.json.

• Uses a map of constant keys to jQuery elements to control view state
• We can get a reference to our background page using getClient(), which uses chrome.extension.getBackgroundPage() to get our background context

Server

The server begins with server.js. A simple WebSocket server, it keeps a map of lobbies and sockets.

Shared

There is a shared/ folder which contains code that is used by both the client and the server. The most important files here are the shared/model/ objects and constants.js.