How I learned to write a Chrome Extension in 5 hours, by using the Bruce Lee technique
I felt like a god as I realized the feature I had just added to Netflix was finally working.
Being able to modify a multi-billion dollar company’s flagship product is immensely gratifying. Sharing your modifications with others is even more so.
Inception
I was on Netflix watching The Aviator, an epic biopic on Howard Hughes that stars Leonardo DiCaprio. Leo had just been flying an experimental high speed plane when the engine died and he was forced to dramatically crash land in a beet field. I missed some of it as I glanced away to give my dog a treat, and wanted to quickly rewind to the beginning of the scene.
Unfortunately, short rewinds can be a complicated matter on the Netflix web player, as you have to slowly scroll through the timeline to find the right spot, unlike Hulu which incorporates a 10-second rewind button. I felt like Netflix could use a button like that. Feeling inspired, I knew I would be capable of adding it myself with a bit of research. I paused the movie and started to work.
Hour 1 — Workflow Research
Since I’d never written a Chrome Extension before, I needed to find what an adequate workflow looks like. Not much came up, but I did find two options for generating the boilerplate code, the basic code that extensions all share. Yeoman is a downloadable suite of tools, and Extensionizr is a web app. I like the simplicity of web apps and not having to download or run anything, so I went with Extensionizr. Being pronounceable is also a plus.
Now with the initial code out of the way, I needed two things: the right code editor, and a way to reload my extension quickly every time I edited something. Through my research I found that Atom by Github is a popular code editor for extensions, and Extensions Reloader adds a toolbar button for quick extension updates.
Hour 2 — Adding a Button
The grind had begun, and the refresh count started climbing quickly. At this moment I thought of a famous quote by Bruce Lee.
“I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.” — Bruce Lee
When learning something new it takes a lot of practice. For me, the Bruce Lee technique means writing a little bit of code, and then testing it. Never going more than a few lines of code before finding out if they compile and work. I had started on my journey for this one button, and I wouldn’t finish until hours, and hundreds of refreshes later.
First thing I figured out was that the extension manifest is very important. It describes your extension, and what files and permissions it needs to accomplish its goal. I wasted a lot of time troubleshooting before I realized that the reload toolbar button I had downloaded doesn’t actually reload your manifest, you have to do that manually from Chrome’s extensions window whenever you modify it.
Injecting
Inspecting the Netflix web player I found what the element that displays the pause button is named, and with that information I added a function that detects when that element is added to the page. On detection, I had my script add a basic button right after the pause button. When I refreshed Netflix and saw my basic button for a first time it gave me a huge energy boost and I felt that it was my mission to have this ugly button looking pretty and actually working by the end of the day.
Hour 3 — Making The Button Actually Do Something
The button was visible, but it didn’t actually do anything at this point. I used the web developer tools that come with Chrome to inspect Netflix’s javascript. It’s all minified, so reading through it is a pain and a guessing game. Having been minified, most of the variable and function names have been replaced with gibberish to save space, but luckily as I searched for the keywords “seek” and “time” I found that miraculously, the exact functions I needed still had their original names.
I quickly wrote a function that takes the video player’s current time variable, subtracts 10 seconds, and then tells the player to seek to that time. I hooked up my button to it, and freaked out when it actually worked! I was almost ready to release! Except the button still looked ugly.
Hour 4 — Extreme Makeover
It was time to make my button beautiful. I figured I’d start by downloading the graphic for the play button, inspecting the format, and then working on a design from there. So I loaded up the developer tools again, and selected the play button. Then I inspected the styles applied to it, looking for an image. I couldn’t find one.
I searched continuously for twenty minutes for the image of the play button, but then I stumbled across something interesting. The play button had a custom font. That’s when I realized that the button wasn’t actually linking to an image, but was showing a letter from a font! I don’t make websites, so I didn’t realize that was a possibility. I looked up an online service for displaying all the font glyphs inside of a web font, and when I loaded up the Netflix font I quickly realized that it actually contains an image for a 10 second quick rewind! This would make things a lot easier.
I added a stylesheet for my ugly button, setting the font to display the correct glyph, and suddenly my creation looked a lot better.
Hour 5— Finishing Up
Just a small bit of polish was needed before publishing. To add configurability, I used a framework called Fancy Settings for the extension’s settings page so users can toggle between 10 second rewinds and 30 second rewinds.
I named my extension Netflix Pro, made a not-so-pretty icon in Sketch 3, and then uploaded the source code to GitHub at github.com/JohnCoates/NetflixPro.
I took a couple screenshots, and then uploaded the extension to the Chrome Web store for others to enjoy.
Looking to the future, I think that re-designing the entire Netflix player to make it a little more pleasing to the eye would be a great goal for the project.
I discovered that it’s pretty easy to make a Chrome extension. Not only that, but this experience has made me realize how fun it can be to change my favorite websites, and I look forward to doing it again.
