jasonxianjasonxian
144

React Chrome Extension Boilerplate

screenshot of React Chrome Extension Boilerplate
react

Boilerplate for building Chrome Extensions in React and TypeScript using a simple Webpack build process.

Github

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

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.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.