Making a Simple Chrome Extension

Update: Since this was written Netflix has changed their UI. Naturally the extension doesn’t work anymore since the markup on the page has changed, but hopefully the tips inside are still useful.

Browsing movies on Netflix the other day I found myself wishing they still had a ‘Watch Trailer’ button. Now the easy solution would be to look for an existing Chrome extension that added it; unfortunately this didn’t occur to me so I decided to make my own. Follow along and learn how to make a simple extension that adds a ‘Watch Trailer’ button to Netflix movie and TV show details pages. Let me preface everything by reminding you I’m a UX guy, so the quality of the code can best be described as ‘it works’.

Here are a couple of resources that can come in handy: Getting Started: Building a Chrome Extension and the Sample Extensions. Beware though some of the samples are a bit outdated.


Setup

What does a Chrome extension consist of? Just HTML, CSS and Javascript. In the case of this extension, mostly Javascript. To get started let’s create a folder with the required files. Here’s what it looks like:

Screenshot 2014-10-13 13.55.39

You can organize your extension into subfolders as well, but for this case it’s pretty simple so we’ll just throw everything in. First we need a manifest.json which will tell Chrome a few things about our extension:

https://gist.github.com/jeffmerrick/8ab234e1453b8b1e15ce

First some simple things like name, version, description. Permissions tells Chrome which URLs you’ll be accessing (and alerts the user when they install the plugin). Since we’ll be using the YouTube API we need permission to access googleapis.com. We also need to specify the location and name of the icon files, which are optional. ‘Content scripts’ specifies what files to load and on what pages. So on any page that starts with http://www.netflix.com/WiMovie (all Netflix detail pages) we’ll load up jQuery and our Javascript: contentscript.js. In contentscript.js let’s just drop in some stuff to test.https://gist.github.com/jeffmerrick/29909bd7c049ae90b148

To make sure it’s working we’ll just show an alert. Also we’re wrapping the whole thing in a IIFE as recommended by Bryan, one of the real developers here.

So, now we need to actually test the thing. Go to chrome://extensions

Screenshot 2014-10-13 14.42.31

You’ll see a checkbox in the upper right labeled ‘Developer Mode’, check that and you’ll see a few buttons appear. Click ‘Load unpacked extension…’ and find the directory we created earlier. Tada! Your extension is now loaded. When you go to a Netflix detail page, you should see the alert pop up. Anywhere else, including the Netflix home and category pages you shouldn’t see it.

Now we can get started with everything else. We’ll want our plugin to do a few things:

  1. Add a button to the page that says ‘Watch trailer’
  2. Extract the movie or TV show info, including title and year, from the page.
  3. When the button is clicked, use the YouTube API to find a match and embed that video on the page.

Adding the button

Screenshot 2014-10-13 14.59.15

This is pretty easy. Using the Chrome DevTools we can find the class of the div that holds the other action buttons on the page. We just want to add our own button in that matches those.

https://gist.github.com/jeffmerrick/54572f5f55c7d931bb30

Here we’re appending some HTML to the ‘actions’ div. By duplicating all of Netflix classes we can make sure it matches the other buttons in style. We also add an id of ‘watch-trailer’ which we’ll target later for the click action. Now that we’ve made a change in contentscript.js, we need to reload the extension. On chrome://extensions refresh the page, now refresh the Netflix detail page and you should see the button!


Get the movie info

Now that we’ve got a button we need the information about the show or movie. By using inspect element again we can see that Netflix has some nicely named elements: an h1 with class ‘title’ and a span with class ‘year’. We have to be more tricky to determine if it’s a movie or TV show. Down in the right sidebar by the reviews there’s a header that says ‘Movie Details’ on movies and ‘Show Details’ on shows. We’ll use that to grab it’s type.

https://gist.github.com/jeffmerrick/c7e782ee8f66ddffc1bf

In this function we just create an object and grab the info from the page. In the case of type we strip out the ‘Details’ text from the string. Now we can just call this function whenever we need any of these pieces of data.


Getting the trailer from YouTube

Now we need to find the trailer on YouTube. You’ll need an API key, that’s a whole process you can find instructions for here. What we want to do is use the search to find a match using the information we extracted from the page. Let’s just test it out by logging to the console.

https://gist.github.com/jeffmerrick/ffa212f8989db9986059

Now when the button is clicked, we combine the title and the year to create a search query and pass that to our function. Using jQuery’s getJSON we grab the results from YouTube and log them. You’ll notice some parameters in the query URL, namely: maxResults=1 (because we only need one result), type=video (because we don’t want to get users and playlists) and videoEmbeddable=true (because we need to embed it). Now when we click the button and pop open the console we should see the data we got back from YouTube:

Screenshot 2014-10-13 15.42.31

The important bit here is the ‘videoID’ if we paste that into a YouTube URL we’ll see the video the search returned https://www.youtube.com/watch?v=eajuMYNYtuY Cool! Let’s embed that on the page now.

https://gist.github.com/jeffmerrick/0a8ae1699855f19d4253

Now we’re grabbing the videoID from the search results and appending the YouTube embed code to the page just like we did the button earlier. Also after the video we’ll include a link to search YouTube for the query in a new window in case we showed an incorrect match. Test it out and you should see a trailer appear on the page when you click the button.


Finishing up

Now we’re almost done and are ready for some finishing touches:

  1. If the video is already embedded when the button is clicked, we’ll remove it.
  2. We’ll make our search queries a little bit smarter.

For the first item, since we wrapped the video in a div with id ‘yt-trailer’ we can just check if that exists, and if it does, we remove it. Otherwise we proceed with appending the video on the page.
The second required a bit of trial and error to find what worked best. Since we know if it’s a show or movie we can do the following:

  • If it’s a movie the query can be: moviename + movieyear +’trailer’
  • If it’s a tv show the query can be showname + ‘season 1 trailer’

https://gist.github.com/jeffmerrick/31224e69bac8a3884e8d

These queries seemed to work pretty well after testing with several movie and shows. Omitting the year and adding ‘season 1’ to the TV show queries returned more accurate results and also avoids showing spoilers that might be in trailers for future seasons. And there you have it! A working Chrome extension. You’ll notice it was about 5% setting up the extension and 95% poking around with Javascript. More complex extensions that involve buttons, popups and background pages are a bit more involved to set up than this one.

Actually publishing to the Chrome Web Store is as easy as uploading a zip to the Chrome Developer Dashboard

Filed in: Web Development