Home

Welcome to the LongDistance wiki!

Just some notes to help you get started.

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 injected 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.