Happy Halloween, weirdos! Enjoy this free icon set we made just for you and all your ghoulish needs. Download now!
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’.
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:
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
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:
- Add a button to the page that says ‘Watch trailer’
- Extract the movie or TV show info, including title and year, from the page.
- When the button is clicked, use the YouTube API to find a match and embed that video on the page.
Adding the button
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.
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.
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.
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:
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.
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.
Now we’re almost done and are ready for some finishing touches:
- If the video is already embedded when the button is clicked, we’ll remove it.
- 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’
Actually publishing to the Chrome Web Store is as easy as uploading a zip to the Chrome Developer Dashboard
You can install the finished extension from the Chrome Web Store.
A popular user interface design app catching on with designers at Doejo is Sketch. We’re using it to design native apps and websites, and it’s faster, cheaper, and easier to use than the Adobe Creative Suite. We’re still using Adobe apps, but for a lot of us, it’s not our go-to app anymore. Photoshop can finally go back to editing photos.
The usual layer types and tools are there like shapes, text, images, transforms, fills, and borders, but designers don’t have to fight the interface to get things done. Pages, artboards, and layers are on the left, and the inspector is on the right, which is contextual, changing based on what is selected. No more panels.
And now that iPhone 6 and iPhone 6 Plus were released, it’s a great time for designers to use Sketch to get familiar with the new design opportunities: iPhone 6 has a new Reachability mode that allows vertical sliding of the interface to match thumbs, and iPhone 6 Plus’s display resolution is now 3×, known as Retina HD.
Ergonomic sheets compiled by Scott Hurff and Steven Hoober show how far your fingers are stretching now, and all the gritty details on iPhone resolutions—including iPhone 6 Plus’s 87% downsampling—were compiled by PaintCode.
Some of our favorite Sketch resources:
- Sketch Toolbox finds and installs almost any Sketch plugin you want
- SketchTool is a command-line tool for quickly exporting assets out of Sketch files
- teehan+lax iPhone iOS7 UI collects common iOS components for quick designs
- iOS 8 UI Kit is an updated Sketch file for iOS 8
And one more thing…once your designs are finished, and your assets are exported, it’s time to prototype how they’re going to interact. We’ve started using Pixate and we think these and other prototyping tools are going to help us communicate not just how our designs look, but how they work.
The greatest benefit of a space like SPACE is not in the amenities, or even the location. It’s in the “assisted serendipity.” The people, and the luck that happens when those people share in a collective idea of growing and helping one another succeed.
If you’re looking for a shared-office space, place to connect with other motivated entrepreneurs, small business owners, hackers, social-impact organizations, get help with your MVP, or other business support, we’ve got your back. If you need help fund-raising, are looking for mentors, or simply a collaborative space to ideate, come by and hang out.
So, last week Chicago played host to the annual Online News Association conference. A yearly gathering of business executives, journalists, techies and executive techno-journalists, the ONA is the place to be for media types in the new digital millennium.
We always knew that technology is fast (that’s the point), and that newsgathering is tough work (the difference between blogging and actually being a professional, ya know?). I mean, these journalists have always been the type to burn the candle at both ends, but who knew how hard they work every day to break stories and publish content on a non-stop basis?!
Turns out, they love coffee. I mean LOVE love it.
How do I know? Doejo had the unique pleasure of working a booth with our favorite technology partner, WordPress.com VIP who was sponsoring the event. WordPress.com powers many of our favorite websites, and works to make sure many of our favorite clients are stable, secure and scalable. Businesses like WGN TV, Cox Media, Pandora and Tribune Broadcasting rely on VIP’s turnkey service and we rely on their solid infrastructure.
Doejo’s sister company BowTruss Coffee Roasters was on hand at the ONA to provide a pour over coffee booth all 3 days of the conference last week. The response was overwhelming: people queued up—the line was super long—and enjoyed the finest hot brewed java in the Midwest courtesy of the BowTruss Baristas and WordPress engineers. This was some high-test café that fueled the country’s finest digital newsmakers and kept them going through 72 hours of meetings, symposia, forums and exhibits in the Windy City.
— Melissa Berman (@MZBerman) September 26, 2014
— Kelsey Thomas (@kelseyethomas) September 25, 2014
— Matt Frehner (@mattfrehner) September 25, 2014
#ONA14: line for free facebook t shirts small; line for free coffee endless
— Katie Herzog (@krherzog) September 25, 2014