How I built my first chrome extension: a simple tool that makes YouTube better
Comment Mode was built to scratch my own itch, sometimes the comments on YouTube videos are better than the actual video itself, so why not be able to view both at the same time?
The YouTube mobile apps already supports viewing video and comments at the same time so it seems like a natural progression for the web.
Although I built this in about 2 weeks, it’s been on my mind for a few months, a while back while I was getting to grips with Framer I built a rough prototype of a draggable YouTube player, similar to Safari’s PiP mode.
I never really had the skill set to build something like this until recently, over the summer while I was working at Intercom, one of the designers on the team, Julien decided to schedule a workshop for getting the designers set up with a dev environment so we could start pushing to the codebase.
Of course I had pretty bad HTML and CSS skills along with absolutely fucking no idea how to do anything in JavaScript yet alone how frameworks like Ember worked. But as I always do I made some promises to keep myself motivated and I figured it out.
Thus began an infatuation with code and building things, the first thing I ever shipped to the Intercom main app was a copy change, from there a redesign of a settings page I designed a year or so ago and from there I worked alongside one of our other engineers who taught me more than I can sum up into a medium post on UI tweaks for Smart Campaigns a real, highly visible feature of the app.
By the end of my summer stint before I went back to school, I was getting my hands dirty with the code for almost everything I designed and cleaning up tiny little things in my downtime.
The amazing engineers in our Dublin office taught me a shit load about code and we’re all super generous with their time despite having a million other things to do.
Armed with my newfound love for code and after a few failed attempts at more elaborate projects, a few weeks ago I began building Comment Mode . I was inspired after playing around with fixing the video player to a position on the YouTube app when you enabled the extension, I found this pretty useful myself so I decided to improve on it and build Comment Mode for others.
After seeing how useful this cupcake version was, I built it out and developed a much nicer layout that takes advantages of YouTube’s current two column grid.
This post was super useful for me to start building out the extension and figuring out the intricacies of Chrome extensions, which really aren’t that difficult after you play around with it for a couple hours.
After about a week of solid building, I was ready to release my first rough-and-ready version to a small number of people. I sent the link around to about 7 of my Twitter followers and they tested it out to see how it worked across different screens, sure enough there were changes to be made. After iterations back and forth, rigorous testing (wink, wink) and minor adjustments and improvements, I’m releasing Comment Mode to the world.
Right now, version 1.0 only works in default mode, so if you have theatre mode enabled you have to switch back to default mode before being able to use Comment Mode, I’m working on this though. You can check out the growing list of known issues and what I’m working on next or submit a pull request over on Github.
Give the extension a go and let me know if it comes in handy on Twitter.
Want to hire me to design great software? Check out my portfolio or shoot me an email hi@daviddiamond.co.
