Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chrome-ext-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Fork of JasonXian/react-chrome-extension-boilerplate

React Chrome Extension Boilerplate

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

Getting Started

npx chrome-ext-react my-ext
cd my-ext
Edit name and description in package.json and manifest.json
npm i to install dependancies
npm start to build in watch mode

Loading The Chrome Extension

Open Chrome and navigate to chrome://extensions/
Toggle on Developer mode in the top right corner
Click Load unpacked
Select the entire dist folder

Production Build

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

Initial Steps

git init to start a new git repo for tracking your changes, do an initial base commit with all the default files
Update package.json, important fields include author, version, name and description
Update manifest.json, important fields include version, name and description
Update webpack.commmon.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 dependancy 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