Overview

The React Chrome Extension Boilerplate is a useful tool for building Chrome extensions using React and TypeScript. It provides a simple Webpack build process for bundling the files. With this boilerplate, developers can easily create Chrome extensions using the popular React library.

Features

• React integration for building Chrome extensions
• TypeScript support for type safety and improved development experience
• Webpack build process for efficient bundling of files
• Fast development mode for quick iteration

Installation

1. Run npm i to install the necessary dependencies.
2. Run npm start to start the fast development mode Webpack build process that bundles files into the dist folder.
3. Run npm i --save-dev <package_name> to install new packages (if needed).

Loading The Chrome Extension

1. Open Chrome and navigate to chrome://extensions/.
2. Toggle on Developer mode in the top right corner.
3. Click “Load unpacked”.
4. Select the entire dist folder.

Production Build

1. Run npm run build to generate a minimized production build in the dist folder.
2. ZIP the entire dist folder (e.g. dist.zip).
3. Publish the ZIP file on the Chrome Web Store Developer Dashboard.

Initial Steps

1. Run git init to start a new git repo for tracking your changes. Do an initial base commit with all the default files.
2. Update package.json, important fields include author, version, name, and description.
3. Update manifest.json, important fields include version, name, and description.
4. Update webpack.common.js, the title in the getHtmlPlugins function should be your extension name.

Default Boilerplate Notes

• Folders get flattened, static references to images from HTML do not need to be relative (i.e. icon.png instead of ../static/icon.png).
• Importing local ts/tsx/css files should be relative, since Webpack will build a dependency graph using these paths.
• Update the manifest file as per usual for chrome-related permissions. References to files in here should also be flattened and not be relative.

Summary

The React Chrome Extension Boilerplate is a valuable resource for developers looking to build Chrome extensions using React and TypeScript. It offers a convenient Webpack build process and provides guidelines for installation and usage. With its support for React and TypeScript, developers can benefit from the advantages of these technologies while building Chrome extensions.