Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/extend-chrome/js-react-boilerplate
Chrome extension boilerplate with JavaScript and React
https://github.com/extend-chrome/js-react-boilerplate
Last synced: 4 days ago
JSON representation
Chrome extension boilerplate with JavaScript and React
- Host: GitHub
- URL: https://github.com/extend-chrome/js-react-boilerplate
- Owner: extend-chrome
- License: mit
- Created: 2020-12-22T14:20:27.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-05-13T20:37:05.000Z (over 3 years ago)
- Last Synced: 2024-08-03T13:02:40.381Z (4 months ago)
- Language: JavaScript
- Size: 215 KB
- Stars: 48
- Watchers: 2
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-random-stuff - extend-chrome/js-react-boilerplate: Chrome extension boilerplate with JavaScript and React - Chrome extension boilerplate with JavaScript and React - extend-chrome/js-react-boilerplate (Uncategorized / Uncategorized)
README
# JavaScript React Chrome Extension Boilerplate
A basic JavaScript React Chrome Extension boilerplate that gets you started quickly. It supports ES modules, JSX, and automatic reloading during development. Jest, ESLint and Prettier included, all bundled using [Rollup](https://rollupjs.org/guide/en/) and [`rollup-plugin-chrome-extension`](https://extend-chrome.dev/rollup-plugin).
## Get Started
### Using `create-react-crx`
Type this into your terminal:
```sh
npx create-react-crx
```
Follow the prompts to setup your Chrome extension project.
### Using `git clone`
Type this into your terminal:
```sh
git clone https://github.com/extend-chrome/js-react-boilerplate.git my-chrome-extension
cd my-chrome-extension
npm install
```
> 🖌️ Update your package name and version in `package.json` before you get started!
### Development
For development with automatic reloading:
```sh
npm run start
```
Open the [Extensions Dashboard](chrome://extensions), enable "Developer mode", click "Load unpacked", and choose the `dist` folder.
When you make changes in `src` the background script and any content script will reload automatically.
### Production
When it's time to publish your Chrome extension, make a production build to submit to the Chrome Web Store. This boilerplate will use the version in `package.json`, unless you add a version to `src/manifest.json`.
> Make sure you have updated the name and version of your extension in `package.json`.
Run the following line:
```sh
npm run build
```
This will create a ZIP file with your package name and version in the `releases`
folder.
## Source Layout
Your manifest is at `src/manifest.json`, and Rollup will bundle any files you
include here. All the filepaths in your manifest should point to files in `src`.
## Features
- Uses Rollup to bundle your extension
- Chrome Extension automatic reloader
- Jest configuration for testing
## Resources
[Chrome Extension official documentation](https://developer.chrome.com/docs/webstore/)
[How to Publish your extension step by step video tutorial](https://www.youtube.com/playlist?list=PLYlOQabA4Mm0bPiMKIBMgZK0u2jbYsrC6)