React Chrome Extension with Microsoft OAuth2 Authentication (Vite & TypeScript)

Today’s topic is creating an extension using React.js, Vite, and TypeScript, and integrating it with Microsoft OAuth2 login.

Step 1: Setting Up the Chrome Extension with React and Vite

To begin, we’ll create a new React project specifically for your Chrome extension using Vite. Open your terminal and run the following command:

npm create vite@latest chrome-extension -- --template react-swc-ts

This command creates a project named chrome-extension with a React template using SWC for compilation and TypeScript for type safety. After running the command, you should see a success message.

Step 2: Installing Dependencies and Project Setup

Navigate to your newly created project directory using cd chrome-extension. Here, we'll install the necessary dependencies for our extension:

npm install

This command will install all the dependencies listed in your project’s package.json file. Once the installation is complete, you're ready to configure the Chrome extension.

Step 3: Configuring the Manifest File

Every Chrome extension requires a manifest file named manifest.json. This file defines…