DEV Community

loading...
Cover image for Spotify Chrome Extension: Music Controller | Phase 5

Spotify Chrome Extension: Music Controller | Phase 5

anobjectisa profile image an-object-is-a ・3 min read

Spotify Chrome Extension - Business Logic


This is Phase Five of a multi-phase project where we build a Spotify Chrome Extension powered by ReactJS that allows us to control the user's Spotify session

Phase One can be found here.


This tutorial assumes you know how Google Chrome Extensions work. Learn more here.

How to make a Chrome Extension in-depth course? Try our Teachable:

We have a course for completely-new-to-web-dev'rs and for experienced web dev's who want a more curated experience.

React-Chrome Spotify Controller

Let's start by registering with the Spotify developer console.

The authorization flow we'll be using is called AUTH FLOW WITH PKCE.

We want to be able to refresh our token, so we'll be using the Authorization Code Flow with Proof Key.

There are three steps to this flow:

  1. get an authorization code
  2. get an access token using the authorization code
  3. when our access token expires, refresh the token

We'll follow the instructions for getting an authorization code and construct the proper URI to request.

We'll handle all of this logic in the background.js of our extension.

Here, we're creating variables to hold all of the parameters for the request URL.

We bring all of this together in one long URL string (oauth2_url).

...
const CLIENT_ID = encodeURIComponent('<client_id from spotify console'),
RESPONSE_TYPE = encodeURIComponent('code'),
REDIRECT_URI = encodeURIComponent(chrome.identity.getRedirectURL()),
CODE_CHALLENDGE_METHOD = encodeURIComponent('S256'),
SCOPE = encodeURIComponent('user-modify-playback-state user-read-playback-state'),
SHOW_DIALOG = encodeURIComponent('true');
...

CODE_VERIFIER = rand_string().repeat('5');
const code_challenge = base64urlencode(await sha256(CODE_VERIFIER));
STATE = encodeURIComponent('meet' + rand_string());

const oauth2_url =
    `https://accounts.spotify.com/authorize
?client_id=${CLIENT_ID}
&response_type=${RESPONSE_TYPE}
&redirect_uri=${REDIRECT_URI}
&code_challenge_method=${CODE_CHALLENDGE_METHOD}
&code_challenge=${code_challenge}
&state=${STATE}
&scope=${SCOPE}
&show_dialog=${SHOW_DIALOG}`;
...
Enter fullscreen mode Exit fullscreen mode

Let's trade in that authorization code for an access token.

We'll simply pass the authorization code using a Fetch call to the approprate URL.

return fetch('https://accounts.spotify.com/api/token', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `client_id=${CLIENT_ID}&grant_type=authorization_code&code=${code}&redirect_uri=${chrome.identity.getRedirectURL()}&code_verifier=${CODE_VERIFIER}`
})
...
Enter fullscreen mode Exit fullscreen mode

When our token expires, we request another token using a refresh token.

When we get our access token, we also get a refresh token.

With that refresh token we can request a new access token.

return fetch('https://accounts.spotify.com/api/token', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `client_id=${CLIENT_ID}&grant_type=refresh_token&refresh_token=${REFRESH_TOKEN}`
})
Enter fullscreen mode Exit fullscreen mode

Now that we have access to Spotify's API, we can start using it.

It's as simple as following the instructions in the API Docs.

Pause the music.

Play the music.

Next track.

Previous track.

Current track details.

Here's an example of how to use the API.

A function that starts a music track using the PLAY API.

Notice how we send the access token in the header of our fetch request.

function play () {
    return fetch(`https://api.spotify.com/v1/me/player/play`, {
        method: 'PUT',
        headers: {
            'Authorization': `Bearer ${ACCESS_TOKEN}`
        }
    })
        .then(res => {
            if (res.status === 204) {
                return 'success';
            } else {
                throw new Error('fail');
            }
        });
}
Enter fullscreen mode Exit fullscreen mode

The rest of this tutorial just involves coding separate functions that handle the different API calls.

If you want to see how that's done see the video tutorial below.

In the next phase we're going to bring this whole project together.

We're going to merge the front-end and back-end.

You can find the source files for this Phase here.


If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Build a Cyberpunk 2077-inspired Spotify Controller - Phase 5

Discussion (0)

pic
Editor guide