I’ll focus on three main things: getting acquainted with the layout of Chrome Extensions, the Chrome Platform API’s that govern when and how your code is run, and integrating a third-party API, in this case Spotify. Nevertheless, I figured out how to break the project up into bite-sized pieces, coded out my extension, and this is the guide for anyone looking to make something similar.įrom a technical standpoint, I’ll assume an intermediate knowledge of Javascript, some experience building web applications in Node, and an interest in learning how to leverage these skills to build something on a new platform. While this idea was exactly what I wanted in theory, it was a bit more intimidating in practice. With a Chrome Extension I would be able to have the key signature and BPM of songs automatically displayed while casually browsing Spotify’s website. So during an office hour before the break, my instructor gave me a great suggestion: do this project as a Google Chrome Extension. Sure, as a programmer I could make individual queries to Spotify’s API for the data but repeating the same task over and over again is something I outsourced to my computer about 10,000 for loops ago. One of my hobbies is making mixes of electronic music and I had been frustrated in the past at trying to figure out the key signatures and BPM of songs so I could mix them smoothly into my sets. I knew I wanted to make something using Spotify’s API to display the key signature and beats per minute (or BPM) of songs. With winter break stretching out in front of me, I was eager to flex my newly developed JavaScript skills and code a side project. In mid-December I finished the first half of Grace Hopper’s immersive coding bootcamp. UPDATE 4/4/18: Download my chrome extension here! If the extension stops retrieving data, press the launch button again and refresh to generate a new token.

Unfortunately Spotify is rate limiting more strictly than it used to. I also fixed functionality for playlists which had broken when Spotify changed their playlist api endpoint.

UPDATE 9/2/19: I refactored the code for arranging the song data to use an object rather than 3 separate arrays leading to a noticeable performance boost. How I wrote my first Google Chrome Extension using Spotify’s API

Spotify download chrome