Today we will create Google Chrome extensions for manipulating Netflix subtitle styles in real time. You will find information about creating extensions from scratch, some practical advice and general views on extension architecture. If you are not happy with the available Netflix subtitles options or just want to quickly create some extension to make life easier, this article is for you.
– create extension logic
– store settings in the browser Local Storage
– autoload and activate extensions only on the Netflix page
– create popup menu
– create forms with subtitles options
Netflix by its API sends every subtitle sentence separately. It uses CSS styles for styling subtitles. With access to the page DOM we can manipulate those received styles with Chrome extension.
Firstly, we have to create the manifest file called . This tells the browser about the extension setup, such as the UI files, background scripts and the capabilities the extension might have.
Here is a complete manifest.
As you see, we have some standard information, such as , , , and .
One of the important parts of the manifest is the section. This is an array with elements that our extension can access.
In our case, we need to have access to to find the active tab, execute scripts and send messages between the UI and the extension. We need for store extension settings in the browser and for taking action depending on the tab content. The last element allows extension access only to the domain.
Chrome extensions have a separate logic from the UI so we need to have , which tells the extension where it can find its logic. means that this script will be used only if needed. is the section with the UI part. We have here a simple HTML file for a popup menu and an extension’s PNG logo.
First we have to setup behaviours, remove any current rules (for example from older versions) and declare function to add new rules. We use Local Storage for the storage settings so we can allocate default settings after the extension is installed.
We will be using three subtitle style parameters:
- – vertical position from bottom [px]
- – font size [px]
- – font color [HEX]
Our rule goal is to disable the extension button on all domains other than . We create new rule with conditions and declare where new rule will be assigned.
The next step is to add listener, which will execute our script while loading or refreshing the active tab.
Firstly we check that has the status . This means that the website on this tab is loaded. Then we get settings from Local Storage and declare which script should be run on the current tab with . Finally, in callback we send the message with settings from the UI to the script.
To create an extension popup menu with form, we create three files: and with visual layers and with logic for communicating between the menu and isolated script.
Our UI goal:
Here we have a simple HTML form with built-in validation: :
Styling the popup menu is not the goal of this article, so I suggest you visit https://github.com/twistezo/netflix-subtitles-styler and copy the whole file into your project.
UI logic – :
In above script, we load settings from Local Storage and attach them to form inputs. Then we create listener to event with functions for the save settings to Local Storage and send them by message to our script. As you see, we use Local Storage in every component. The Chrome extension doesn’t have its own data space so the simplest solution is to use browser local space like Local Storage. We also often use the function. It’s caused by Chromme extensions’ architecture – they have separate logic from the UI.
Now it is time to create with logic for manipulating Netflix subtitles styles.
First, we create listener for receiving messages with settings from the extension.
Then in the same file we create the function for changing proper Netflix styles to our styles in real time.
For Netflix, every time it receives whole subtitle sentences it swaps only the subtitles part of the page DOM. So we have to use an observer function like , which will be triggering our function every time when the page DOM has changed. In the function we see simple manipulation of styles. The commented lines have information about where you can find proper styles.
Time to run
I assume that you do not have a developer account in Chrome Webstore. So to run this extension go to in your Chrome, click the , select folder with the extension and that’s it! Then, obviously go to the Netflix page for testing it.
As you see, it is easy to start creating some extensions that make life easier. The most important part is to understand Google Chrome Extension divided architecture and communication between components. This subtitles styler is only a simple demo of what you can do with the Chrome Extension API.
– Repository with this project https://github.com/twistezo/netflix-subtitles-styler
– Official Google guide https://developer.chrome.com/extensions/overview
– Chrome Extension API https://developer.chrome.com/extensions/api_index