React Templates & Themes Logo React Templates & Themes
React Chrome Extension Boilerplate screenshot

React Chrome Extension Boilerplate

Author Avatar Theme by Jhen0409
Updated: 3 Feb 2018
2144 Stars

Boilerplate for Chrome Extension React.js project

Github

Overview:

The React Chrome Extension Boilerplate is a template for building Chrome extensions using React.js. It provides a simple and structured starting point for developers to create extensions with features such as hot reloading, ES2015+ syntax support, and E2E testing. The boilerplate includes examples of a popup, window, and inject pages, along with a Redux TodoMVC example.

Features:

  • Simple React/Redux examples: Includes examples of Chrome Extension window, popup, and inject pages using React.js and Redux.
  • Hot reloading: Utilizes Webpack and React Transform to enable hot reloading of React/Redux components during development.
  • ES2015+ syntax support: Allows developers to write code using ES2015+ syntax with the help of Babel.
  • E2E testing: Provides E2E tests for window, popup, and inject pages using Chrome Driver and Selenium Webdriver.

Installation:

To install the React Chrome Extension Boilerplate, follow these steps:

  1. Run the script to allow connections to https://localhost:3000 if you’re developing the inject page. (Note: This is necessary because the inject page is injected into HTTPS pages).
  2. Load unpacked extensions with the ./dev folder.
  3. For hot reloading, edit the relevant files of the popup, window, and inject pages.
  4. If using Redux DevTools Extension, it can be used in development mode.
  5. To build a CRX file for auto-updates, provide options and add the update.xml file URL in the manifest.json. Options include: --app-id (your extension ID), --key (your private key path, default: ‘./key.pem’), and --codebase (your CRX file URL).
  6. For testing, use the test/app directory for React components and Redux actions/reducers tests, and the test/e2e directory for E2E tests with Chromedriver and Selenium WebDriver.

Summary:

The React Chrome Extension Boilerplate is a comprehensive starting point for building Chrome extensions using React.js. It provides several key features such as hot reloading, ES2015+ syntax support, and E2E testing. By following the installation guide, developers can quickly set up an extension with React and Redux examples for the window, popup, and inject pages. Additionally, the boilerplate offers options for building CRX files with auto-updates and includes testing frameworks for both unit tests and E2E tests.