Create a Chrome Extension Using React and TypeScript

In this article, we are going to create a Chrome extension with TypeScript. We will be using React for the popup.

It will be easier to understand this article if you have at least a basic knowledge of building apps with webpack and TypeScript, and if you have previously created a Chrome extension.

🚧 Create the Foundations

Open your terminal on the folder you want to use and init your project with the following command:

$ npm init -y

Create the first folders and files:

$ mkdir src && cd src && mkdir assets background contentscript
$ cd background && touch background.ts
$ cd ../contentscript && touch contentscript.ts contentscript.scss

ℹ️If you don’t know what the background and contentscript are for, read manage events with background scripts and content scripts.

Install the first batch of dependencies:

$ npm i -D @types/chrome @types/node awesome-typescript-loader css-loader mini-css-extract-plugin node-sass sass-loader ts-node tslint typescript webpack webpack-cli

📦 Set Up webpack

In the root directory, create tsconfig.json and webpack.config.js.