chrome-ext-react/README.md

Chrome Extension Boilerplate with React and TypeScript

---
### Fork of [JasonXian/react-chrome-extension-boilerplate](https://github.com/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

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

## 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. `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. `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.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