My First Chrome Extension. The Story of QuickPush

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

I like Trap Music. I like it so much that I watch rather obnoxious YouTube videos just because they feature Trap songs, like this one,

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.

Index

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 .js file 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 scripts.
  • 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

https://api.spotify.com/v1/search?q=Never+Gonna+Give+You+Up&type=track&limit=2 

using an HTTP request (preferably an asynchronous one) in JavaScript. The code below is how I queried the API in JavaScript

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 JSON.parse(xttp.responseText), the JSON.parse() function turns the response JSON string into a JavaScript object which would then be used to render the information into the popup.

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.

extention look.PNG
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 audioHandler for 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.

Conclusion

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.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s