Phase 2 of a Cyberpunk 2077-inspired React-Chrome Extension

Image for post
Image for post

This is Phase Two of a multi-phase project where we build a React-Chrome Extension that allows us to control the user’s Spotify session.

Phase One can be found here:

This series of tutorials supposes that you:

Understand how Google Chrome Extensions work:

Need an in-depth course? Try our Teachable:

We have a course for completely-new-to-web-dev’ers
as well as for experienced web dev’s who want a more curated experience.

Expert Web Developer?

Understand how ReactJS-Chrome Extensions work:

We’re gonna start by setting up our developer environment.

I have a boiler-plate react chrome extension up and running;
if you don’t know what that is, see above.

We’re going to take this basic setup and modify it.

We need to do 3 things:

  1. organize our file structure
  2. update the manifest.jon
  3. install some more packages and update the webpack.config
Image for post
Image for post

1.

We’ll just create ‘images’ and ‘fonts’ folders

Add the assets from Phase One and the font(.woff) file for the project.
I’m using the ‘Old School Adventures’ font. …


Phase 1 of a Cyberpunk 2077-inspired React-Chrome Extension

Image for post
Image for post

This is Phase One of a multi-phase project where we build a React-Chrome Extension that allows us to control the user’s Spotify session.

This series of tutorials supposes that you:

Understand how Google Chrome Extensions work:

Need an in-depth course? Try our Teachable:

We have a course for completely-new-to-web-dev’ers
as well as for experienced web dev’s who want a more curated experience.

Expert Web Developer?

Understand how ReactJS-Chrome Extensions work:

This whole app is structured to mimic a cassette player.

All of the assets we’re developing have a ratio of 1.6.

the width of an asset is 1.6 times larger than the height

However you choose to develop your own assets, keep that proportion.

I’m using a site called pixelartcss.com

It allows you to create pixel art and export into different formats:

  • CSS code
  • gif
  • png

I won’t be using the CSS code export function. It doesn’t scale properly.

I won’t be using the gif export function. It’s much easier to create and edit gifs in a different program; I’ll be using GIMP. …


Allow your users to use their Twitch 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:

Or the video tutorial here:

Image for post
Image for post

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 Twitch’s OpenID Endpoint.

Navigate to ‘https://dev.twitch.tv/console' and login.

Click ‘Applications’, then ‘Register Your Application’.
Fill out the ‘Name’ and choose a ‘Category’.
Add an ‘OAuth Redirect URLs’. It will be in the form of
https://<chrome ext id>.chromiumapp.org/”.
To find your Chrome Extension id, navigate to “chrome://extensions” in your browser, make sure you Chrome Extension is loaded. It will be there. …


Simplify your customer’s entry point.

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:

Or the video tutorial here:

This tutorial also uses a ‘Passwordless Authentication Server’ built with NodeJS and Express.
Check out my write-up here:

Or the video tutorial here:

Image for post
Image for post

Let’s Begin.

We’ll start with creating a page that allows the user to ‘sign in’ with their email address.

Note:
We’ve attached a script that we’ll get to later.

We’ll also have a ‘sign out’ page.

Note:
We’ve attached a script that simply messages our ‘background.js’ script and signs the user out.

Let’s write our ‘manifest.json’.

{
"name": "",
"description": "",
"version": "0.1.0",
"manifest_version": 2,
"icons": {
"16": "./obj-16x16.png",
"32": "./obj-32x32.png",
"48": "./obj-48x48.png",
"128": "./obj-128x128.png"
},
"background": {
"scripts": [
"./background.js"
]
},
"options_page": "./options.html",
"browser_action": {},
"permissions": [
"cookies",
"http://0ff7e6d8d4af.ngrok.io/*",
"https://0ff7e6d8d4af.ngrok.io/*" …


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:

Or the video tutorial here:

Image for post
Image for post

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://<chrome ext id>.chromiumapp.org/”. …


This is a response to a concern raised regarding access tokens while engaging with Spotify’s Oauth2 endpoint.

See that video here:

Yes, anyone who downloads your Chrome Extension can see ALL of the code you’ve written.

This brings us to the main concern which is,

Image for post
Image for post

Can’t people then use the access tokens or even the client id present in your code?

Short answer is “Yes” to both of those.

Let’s tackle the access token.

The access token will not give you or anyone access to truly sensitive information about the user.
No passwords.
No credit card details.

The access token will only give information and allow modification of information you request in the SCOPES parameter of the OAuth2 request.

The access token can be saved in the RAM(as a variable) or in local storage for a more permanent solution. …


Convert your ReactJS app into a Google Chrome Extension

Image for post
Image for post

This tutorial assumes you know how a Chrome Extension works.

If you want to know how to get that setup,
Check out my write-up here:

Or the video tutorial here:

If you need a more in-depth course, try my Teachable:

I have a course for completely-new-to-web-dev’ers
and for experienced web dev’s who want a more curated experience.

Let’s Begin.

We’ll start by initializing npm.

>>npm init -y

Then we’ll install all of the packages we’ll need.

First the dev dependencies.

>>npm install --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader copy-webpack-plugin clean-webpack-plugin html-loader html-webpack-plugin webpack webpack-cli webpack-dev-server

Then the non-dev dependencies.

>>npm install react react-dom react-router-dom

In the ‘package.json’ we’ll write scripts for our development and production. …


Use NodeJS and ExpressJS to create a simple login system for your apps.

Image for post
Image for post

We’re going to create an Express REST API server using NodeJS and ExpressJS.
We won’t be creating and managing a database to authenticate user credentials against, but we will be simulating that behavior in our JavaScript code.

Let’s begin.

We’ll start by installing all of the packages needed.

>> npm init -y
>> npm install express body-parser cors jsonwebtoken nodemailer

Note:
1. express — for our server routing
2. body-parser — for picking out information transported in the body of the request object
3. cors — allows for CROSS ORIGIN RESOURCE SHARING (between domain calls)
4. jsonwebtoken — constructs a JWT(jsonwebtoken) which we’ll use for authentication
5. nodemailer — allows our server to send emails

We’ll also need a program called ‘ngrok’. It allows us to expose our
localhost’ address, 127.0.0.1, …


The basis for Progressive Web Apps

Image for post
Image for post

Service workers provide a way to increase the persistence functionality of your web pages.
They create a layer between your fetch calls for resources — from local or remote servers — and the eventual receiving of those resources.
In this layer, you can write code to cache or use cached files before actually responding to fetch calls.

Service workers go through a life cycle:
1. Registration
2. Installation
3. Activation

We’ll take a look at these and what we can do in them.

Registration.

To register a service worker we use the ‘register’ method in the ‘serviceWorker’ object. …


Use Google’s OAuth2 to gain access to a user’s data. We’ll manipulate the user’s contacts data.

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:

Or the video tutorial here:

Before we even touch a line of code, we need to setup our development workspace so that we have the ability to do two major things:

1. Give our specific Chrome Extension the ability to use Google’s APIs and Services.
2. Gain the ability to interact with Google’s OAuth2 Endpoint.
3. Gain the ability to interact with Google’s APIs.

Let’s Begin.

First, we’ll need to “register” our Chrome Extension with the Google store. There are two ways to do this, we either officially upload our Chrome Extension to the Google Chrome Store and receive a unique key value for our extension or we “faux register” our extension with the Google Chrome Browser and receive a unique key that way. …

About

An Object Is A

Learning to code…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store