Allow your users to use their Spotify credentials to login to your Chrome Extension
This tutorial uses a boiler-plate Google Chrome Extension setup. If you want to know how to get that setup, check out my write-up here:
Let’s Begin
Before we even touch a line of code, we need to setup our development workspace so that we have the ability to use Spotify’s OAuth2 endpoint.
Navigate to ‘https://developer.spotify.com/dashboard/ ’ and login.
Click ‘Create an App’.
Fill out the ‘Name’ and ‘Description’, agree to the terms, and click ‘Create’.
Go to ‘Edit Settings’.
Add a ‘Redirect URIs’ entry. It will be in the form of “https://.chromiumapp.org/”.
Make sure to ‘Save’ your changes.
To find your Chrome Extension id, navigate to “chrome://extensions” in your browser, make sure you Chrome Extension is loaded. It will be there.
Keep the Spotify Developer console window open, we’ll need that
“Client ID” a little later.
Let’s do some web development work before we get to actual Chrome Extension work
We’ll create two pages. A ‘Sign In” page and a ‘Sign Out’ page. Nothing fancy.
// popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 300px;
height: auto;
}
#javascript #chrome-extension #programming
