One night, I got bored and thought to myself,
Let me make a Chrome Extension! I mean, what better way to practice ask the front end development skills I’ve learned in the past couple of months.
I have tried to make a Chrome Extension before, but that didn’t go to well. I put it off for so long that by the time I figured it out, the website the extension would run on changed its HTML structure.
This time around, things would be different. I had more determination and time than before and I was destined on getting this extension done.
Step 0: The Idea
The most annoying part however, is how I need to pull out my phone (or open the slow Spotify Desktop App) to search for a song that comes to mind. This is probably the most privileged of First World Problems™, but it’s still a problem. In some way.
With this slight annoyance, I decided that my Chrome Extension would allow me to search for a song without leaving the webpage through a handy little popup next to the URL bar.
Step 1: Figuring out how to make a fuck**g Chrome Extension
When I tried to make a Chrome Extension, I didn’t think of the big picture. I was so focused on the code that would do the ‘thing’, I forgot about the context that the code would run in.
This time, things were different. I decided to install the unsupported Chrome Dev Extension because it would set up all the files I need for this project. Well, while it did set up the file I needed, it didn’t help that I didn’t understand what was going on.
Because of that, I decided to look up their documentation where they give more information on how to actually make a Chrome Extension. At the same time, I got a used a walkthrough by Gabe Berke-Williams so I could get up to speed quickly. After much trial and error, I was able to follow their steps and I found out the elements of a Chrome Extension which are as follows.
manifest.json– This is where you define the extension’s name, accompanying scripts, permissions, assets among others
background.js(Optional) – This
.jsfile allows the extension to use some Google Chrome Browser functions, like opening a new tab. It also allows the extension to communicate between various
content.js(Optional)- This code is needed to access a webpage and do stuff with it, like change CSS or add functionality. Note that you can have multiple content scripts (just remember to change the name :))
popup.html, popup.js and popup.sytle(Optional)– If the extension uses a popup, you’ll need to set up the markup for it as well as the behaviour. This is what I spent the most time on since it was the focus of this app.
Step 2: Learning to work with the Spotify Web API
Initially, I was planning on searching both SoundCloud and Spotify, but I decided to leave out SoundCloud since their API wasn’t as easy to use as Spotify’s. I hope to add SoundCloud functionality later on.
The Spotify Web API is the core of this extension. It allows the extension to search the Spotify catalog and perform functions such as adding songs to a library, following artists and other fun stuff. One of the best parts about the API is the documentation, which features the API Console that allows one to practice making API calls.
This extension (as of now), mainly relies on the /v1/search endpoint to allow us to query the API. For it’s inputs, it requires a URI encoded query (duh!) and an item type (track, artist, album or playlist). Optionally, you can add an offset (where to start returning results in a list), a limit on results (up to 50), a market and an OAuth token if the market parameter is specified. It returns a JSON object with the results once the GET request has been sent.
Putting all of this together, let’s say that you want to search for a really catchy song, you will need to send this GET URI
The response you get back will be some header information with an HTTP code of 200, meaning it’s all good. The response also contains a JSON string, like this
If you remember seeing
Step 3: Making the extension
Understanding the essentials of the Spotify API and Chrome Extensions, I started putting it all together. For my HTML setup, I decided to keep it incredibly simple, will most of the focus going into setting up how the songs will render onto the page, sort of like this
That song div is surrounded by a bare song div, where each song will be added to.
With the popup.html done, I spent time focusing on the
style.css page, which was really annoying. It’s really hard to explain, but this guy captures my frustrations
After much hacking, I came up with something sorta decent, making use of vw units to get it to look nice. I also used a lot of flex boxes which are a bit like grids in Bootstrap. Fortunately, I didn’t have to worry about support since this extension will only run in Chrome versions 18 and up, which support all the CSS that is used in the extension.
It isn’t the best CSS job ever, but it looks okay, like 6.5/10?
After fussing with the style.css, it was time to focus on the most time consuming part of this whole project,
popup.js, where all the functionality is stored. This is a basic overview of what the script does
- It gets elements in the DOM like the search bar
- It adds event listeners for the submit button and the search bar so it searches as you type (initially a bug, now it’s a feature)
- It has the
submitSearch()function that takes the value of the search bar, looks for it and passes the response to…
renderSpotifySongs()that loops through the JSON response and adds them to the DOM with
addToDOM()that uses pattern matching to put the information onto an HTML body based on a string of HTML. It also adds an
audioHandlerfor the sound previews
If you need me to explain more about the function, you can ask me, but this blog is over 1000 words long and I need to move on. You can find the source code on Github which I tried my best to simplify and document.
While I was making the extension, I was constantly testing it by seeing if it did what I wanted it to do. If it did then yay!, otherwise I looked at the code to see what I did wrong.
Step 4: Publishing
Once I got version 0.501 online, I committed the code and pushed it onto GitHub, put it into a zip file, paid Google $5 to publish Chrome Store applications, uploaded the zip file, put a crappy description and image and off it went to the store. In the one week it has been up, it has had 0 installs (oh yeah!!!!jk. Plz Install it). I don’t have anything to say about those awesome figures, but if I did it might be a case of sour grapes as I try to diminish the attractiveness of success.
Step 5: Looking onto version 1
Although I have a barley functioning extension, there is still lots of work to do. For one, I want to add the ability to add songs straight to a users library without having to click on the Spotify icon. Also, I need to work with the SoundCloud API to not only download and add songs, but also to download songs if the song allows for it. It sounds like a lot of work, but I might be able to do all of this in about 2 weeks.
Wow, you guys are awesome! Reading right up until the end. If you want to try out the extension, here’s a link to the Chrome App Store. Otherwise, if you wanna look into the source code, it’s on GitHub. Maybe you wanna see what the CSS looks like, so here’s the codepen.io page which is a functioning demo without the need for installing anything.
Next time, I’ll talk about how to create a personal website to host your projects using Github with its GitHub Developer Pack, complete with domain.
Also next time, I will try to host a live stream where we try and make another extension. The extension will allow us to collapse answers on the popular Q&A site, Quora. I’m not sure what platform I will use, but if you guys can’t find it, I’ll post a video of the stream after the fact.
Meanwhile at the Semester of Java Tumblr Blog, Class 1 and 2 are up where I talk about working with console input and Java’s data types. I have also set up a Github repository, SoJava, which contains all the code I made for SoJava.