How to Build a Chrome Extension With React, TypeScript, and Webpack

From creating a boilerplate to publishing a complete extension to Chrome Web Store

Recently I decided to extend the functionality of GitHub with my own Chrome extension. Instead of jumping straight into coding, I hit a wall a few times when setting up the project. And then I thought, “Why isn’t there something like Create React App for Chrome extensions - run one command and get everything up and running?”

So, I created a boilerplate that supports React, TypeScript and Webpack. You can make a build with just one command, and load it straight to Google Chrome or publish to Chrome Web Store.

Before diving into details about the configuration and Chrome extensions in general, I’d recommend you have a quick look at the latest documentation: https://github.com/pixochi/create-react-chrome-extension-ts

The rest of this article describes what the boilerplate includes and how it was used for creating the extension for adding a new feature to GitHub:

Published extension: https://chrome.google.com/webstore/detail/github-pr-reviewers/lfhipcniiclmedbnbmkgdpoamecaheii

Its source code: https://github.com/pixochi/create-react-chrome-extension-ts/tree/main/example