Maintaining Couch Potato: Fixing Things When They Break

We knew when we put Couch Potato — the Chrome extension that lets you watch Hulu shows together with friends—in the Chrome store that things would break. But we had no idea what that would look like! We’ve had a couple of issues that have needed to be resolved since then, so we figured we’d take a bit of time to talk more about them.

The first issue we ran into was that the images for our avatars all disappeared some time after we uploaded our extension to the Chrome store. We had specifically downloaded all of the images from the internet so that we didn’t have to worry about them disappearing from their sources and then saved them in our Github repo, so we were pretty stumped as to what was going on when we realized this one.

As it turns out, GitHub periodically changes the direct path to URLs for security reasons, which is why our images weren’t loading anymore. Once we figured this out, it was a simple matter of editing the location to be relative and redeploying our website, and we were all set!

The biggest challenge we’ve had to tackle so far is when the video player shrank to a third of the page when our extension was launched. Instead of the video player taking up two-thirds of the page and the Couch Potato chat taking up one-third, the video player took up the left third, you could see the Hulu homepage in the second third, and Couch Potato loaded in the right third.

This unfortunate update was the result of Hulu launching Hulu Watch Party, which we talked about in an earlier blog post. I assumed it would be an easy fix, but then spent an excessive amount of time trying to grab the right element and getting the video player to take up two-thirds of the page again.

Funnily enough, it was a result of brushing up on my DOM manipulation for a coding interview that led to finding a really simple resolution to the problem. Since the issue was that we weren’t grabbing the correct parent element to the player and getting the children to set to two-thirds and one-third, I changed our code that identified a specific element as the parent and instead got the parentElement directly from the video player, and we were good to go! It’s unfortunate how much time I spent trying to figure this out, only to end up with such a simple solution, but I got there eventually, and the new code is shorter and easier to read. It also has the added benefit of being less likely to break as Hulu continues to play with and update its codebase.

It’s exciting that we’ve been able to tackle the challenges that have come up with having Couch Potato live in the Chrome store, though sometimes it takes us longer to realize there’s a problem than in probably should! It’s exciting to have a new problem to work on, though, and dive back into our code, and we look forward to seeing what the future of our extension brings.

Our blog series detailing how we’ve built Couch Potato is nearing an end, but it’s not done yet! Stay tuned for our last post reflecting on how we’d do things differently and what we have planned for the future of our extension.

Interested in learning more about Couch Potato? Start this blog series from the beginning! And don’t forget to download Couch Potato from the Chrome store so you can start watching shows with friends now!