Use Spotify to Login to Your Chrome Extension

Use Spotify to Login to Your Chrome Extension

Spotify credentials to login to your Google Chrome Extension. This tutorial uses access a boiler-plate Google Chrome Extension setup. Use Spotify to Login to your Chrome Extension. Register with Spotify Developer Console. Allow your users to use their Spotify credentials to login to your Chrome Extension

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

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How to Build Your First Chrome Extension in 5 Minutes

The Chrome web browser is very extensible. It seems like there is a plugin for just about everything you could ever possibly want. Have you ever wanted to create your own Chrome extension? Have you ever wondered how difficult the process would be? Well, it turns out it is a lot easier than you ever imagined. In this tutorial, you'll see How to Build Your First Chrome Extension in 5 Minutes

Make Your First Chrome Extension with Javascript

In this tutorial, we’ll walk through a simple extension that will help automate a simple task on Reddit. After selecting any subreddit, our extension will give the option to launch a new tab directly to that subreddit’s Top Posts of All Time.

Google OAuth2/OpenID Chrome Extension Login System

Don’t build your own authentication system; leverage Google OAuth2 for your Google Chrome Extension. This is our unique Chrome Extension key. Copy and paste that into the “manifest.json” of the Chrome Extension you’re actually developing. (the folder you chose for the “Pack Extension” step)

Create a Email/Password Login System for Your Chrome Extension

Create a basic login system using NodeJS, Express, and Javascript 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:

How to Create Chrome Extensions with JavaScript

In this article, you will learn how to create and Install Chrome Extension in very easy steps. (Create Chrome Extensions with JavaScript)