Google OAuth2/OpenID Chrome Extension Login System

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)

Don’t build your own authentication system; leverage Google OAuth2 for your Google 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:

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. Giving our specific Chrome Extension the ability to use Google’s APIs and Services.
  2. Gain the ability to interact with Google’s OAuth2 Endpoint.

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. Since we don’t want to upload a development extension to the public store, we’ll opt for the latter method.

Navigate to the address “chrome://extensions” in your Chrome Browser.

Click on “Pack Extension” and choose the location of your Chrome Extension.

This will generate two files in the directory above your Chrome Extension location, a ‘crx’ and ‘pem’; we’re concerned with the ‘crx’ file.

Drag-and-drop the ‘crx’ file into the “chrome://extensions” page. You should get a prompt asking you to add the extension, click ‘Yes’.

Image for post

Now, navigate to where your Chrome Extensions are located.

For MacOS and Linux users, this will be different, but for Windows users you’re looking for something along the lines of,

C:\Users<Your UserName>\AppData\Local\Google\Chrome\User Data\Default\Extensions

We’re looking for the folder with same name as your Chrome Extension ID. This id can be found back at your “chrome://extensions” page. Look for the “ID” attribute.

Enter into the folder with the same name as your Chrome Extension, enter into the version number folder and open the “manifest.json” file. Copy the “key” attribute.

programming web-development google-chrome-extensions learn-to-code chrome-extension

Bootstrap 5 Complete Course with Examples

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

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

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:

10 Insanely Useful Google Chrome Extensions

As a Professional, I am already living a messy and unorganized life but when I spent my time with my better half, my chrome, my love. 😜

Learning to Code: How to Boost Up the Process?

Learning to Code: How to Boost Up the Process? I also often recommend different online and offline resources to my students to make their learning process easier, more effective, and faster. And in this post, I will share a few tips with you.

Step-by-Step Guide to Building and Launching your Chrome Extension

While building my first chrome extension, Foragear- Quick Search Tool, I struggled to find an article that covered the entire ideating, building, and launching process of chrome extensions. To make the lives of future chrome extension builders easier, here is an all-in-one guide to help you through the process.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...