Integrating Couch Potato Into Hulu with a Chrome Extension

So far in this blog series, we’ve talked a lot about how we got our chat room working for Couch Potato, the Chrome extension that lets you watch Hulu shows with friends from the comfort of your own couch. But we haven’t focused too much on the part that really pins everything together: the Chrome extension itself.

We mentioned in an earlier post that we had dabbled some with building our own Chrome extensions and had followed a few tutorials, but up until this point, all we had was an extension that could be launched on the Hulu website and showed the Couch Potato chat room in a window. But that window disappeared whenever a user clicked outside of it, so it wasn’t a very practical option long-term.

At this stage in the process, all we wanted to do was get our chat website to load on the same page as Hulu, and that required going back to some basic DOM manipulation, something we hadn’t done much of since the very first week of our bootcamp.

To start with, we updated our popup.js file in our Couch Potato Extension repo to launch the code in a huluWindow.js file. Then, after a bit of a refresher (and lots of googling), we figured out how to identify the container on the Hulu player and its parent and saved those as variables in the huluWindow.js file.

Once we’d grabbed those elements, we updated the display style of the parent element to flex, made the justification space-between so the two elements would align on the outsides of the box, changed the width of the player container to 67%, and updated a few style elements to make the player and our chat website appear neatly side by side on the same page.

Then we created a div to hold an iFrame with the Couch Potato website as the source attribute. We didn’t have any experience using iFrames, but it seemed like the best way to display a third-party website on the same page as another website based on some cursory research. And it worked! After adjusting the new element to add an ID and make some small style changes, we appended it to the video player’s parent element.

Now when someone launched the extension, they could successfully have the chat window appear on the side of their browser and start a chat room with a friend!

Of course, we still had a lot of functionality to add, but this was the first time it felt like we had a real, working Chrome extension that didn’t look that far off from the final product we had in mind. It was pretty exciting! And it was in good enough shape that we felt comfortable using it to conduct beta testing with our classmates, something we’ll discuss more in-depth in a future post.

In the meantime, stay tuned for our next post where we discuss Hulu Watch Party, the recently announced native Hulu chat feature that could have made our extension obsolete—but didn’t.

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!