https://github.com/zaifsenpai/react-chrome-extension-boilerplate

Boilerplate for building Chrome Extensions in React and TypeScript using a simple Webpack build process.
https://github.com/zaifsenpai/react-chrome-extension-boilerplate

actions boilerplate boilerplate-template build-action chrome-extension chrome-extensions material-ui materialui mui mui-icons npm react reactjs typescript webpack webpack5

Last synced: 26 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/zaifsenpai/react-chrome-extension-boilerplate
• Owner: ZaifSenpai
• License: mit
• Created: 2023-10-23T07:33:49.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-08T14:44:31.000Z (30 days ago)
• Last Synced: 2024-12-08T15:31:14.380Z (30 days ago)
• Topics: actions, boilerplate, boilerplate-template, build-action, chrome-extension, chrome-extensions, material-ui, materialui, mui, mui-icons, npm, react, reactjs, typescript, webpack, webpack5
• Language: JavaScript
• Homepage:
• Size: 346 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
---

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