Create React Chrome Extension - TS

A lightweight boilerplate for building a Chrome extension and a standard web app with React, TypeScript and Webpack at the same time.

How to use the boilerplate

If you already know React, you can start coding your Chrome extension straight away with no build configuration.

Watch a short demo on YouTube: How to Build a Chrome Extension with React and TypeScript in 3 Minutes

Setup options

You can change the options used in the setupProject function in src/index.tsx to specify your React root component, and where the React root component will be rendered.

rootElement - your React root component that will be either rendered as a standard web app or injected to a web page by your Chrome extension

injectExtensionTo - a CSS selector for an element on a web page to which the extension will be injected to

injectWebAppTo - a CSS selector for an element to which the web app will be rendered if the app runs in development mode with yarn start or is built as a standard web app with yarn build:web-app

Default options:

setupProject({
  rootElement: (
    <React.StrictMode>
      <App />
    </React.StrictMode>
  ),
  injectExtensionTo: "body",
  injectWebAppTo: "#root",
});

Manifest files

The boilerplate contains 2 manifest files: an extension manifest for Google Chrome and a web app manifest if you want to make a PWA build.

extension manifest - extension-manifest.json

web app manifest - web-app-manifest.json

The build folder will contain either of them depending on which build script you run - yarn build:extension or yarn build:web-app

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build:extension

Builds the extension for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and your extension is ready to be used in Developer mode or published to the Google Web Store!.

Open the extension in Developer mode

1. Open the Extension Management page by navigating to chrome://extensions.
2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
3. Click the LOAD UNPACKED button and select the extension directory.

yarn build:web-app

Builds the web app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Learn More

You can read more in the Medium article: How to Build a Chrome Extension with React, TypeScript and Webpack: From creating a boilerplate to publishing a complete extension to Chrome Web Store.