# generate-chrome-extension

> Boilerplate for Custom Chrome Extensions

Latest version **1.1.2** (published 2020-08-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install generate-chrome-extension
pnpm add generate-chrome-extension
yarn add generate-chrome-extension
bun add generate-chrome-extension
```

Provides the command `react-chrome`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2020-08-12 |
| First published | 2020-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 45.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Jithin Antony |
| Maintainers | jithinantony |
| Keywords | react-chrome, react, chrome, cli, extension, google, manifest |

## Links

- npm: https://www.npmjs.com/package/generate-chrome-extension
- Repository: https://github.com/JithinAntony4/generate-chrome-extension
- Homepage: https://github.com/JithinAntony4/generate-chrome-extension#readme
- Issues: https://github.com/JithinAntony4/generate-chrome-extension/issues
- npm.io page: https://npm.io/package/generate-chrome-extension

## Dependencies (11)

- [ora](https://npm.io/package/ora.md) ^5.0.0
- [clear](https://npm.io/package/clear.md) ^0.1.0
- [kleur](https://npm.io/package/kleur.md) ^4.0.3
- [figlet](https://npm.io/package/figlet.md) ^1.5.0
- [tslint](https://npm.io/package/tslint.md) ^6.1.3
- [nodegit](https://npm.io/package/nodegit.md) ^0.27.0
- [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.1
- [inquirer](https://npm.io/package/inquirer.md) ^7.3.3
- [inversify](https://npm.io/package/inversify.md) ^5.0.1
- [typescript](https://npm.io/package/typescript.md) ^3.9.7
- [reflect-metadata](https://npm.io/package/reflect-metadata.md) ^0.1.13

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2020-08-12
- 1.1.1 — 2020-08-11
- 1.1.0 — 2020-08-11
- 1.0.10 — 2020-08-10
- 1.0.9 — 2020-08-10
- 1.0.8 — 2020-08-10
- 1.0.7 — 2020-08-10
- 1.0.6 — 2020-08-09
- 1.0.5 — 2020-08-09
- 1.0.4 — 2020-08-09
- 1.0.3 — 2020-08-09
- 1.0.2 — 2020-08-09
- 1.0.1 — 2020-08-09
- 1.0.0 — 2020-08-09

## README

# generate-chrome-extension
Boilerplate for Custom Chrome Extensions

[![npm-release](https://img.shields.io/npm/v/generate-chrome-extension.svg?label=npm)](https://www.npmjs.com/package/generate-chrome-extension)
[![generate-chrome-extension](https://github.com/JithinAntony4/generate-chrome-extension/workflows/generate-chrome-extension/badge.svg?branch=master)](https://github.com/generate-chrome-extension)
[![license](https://img.shields.io/npm/l/generate-chrome-extension)](https://github.com/JithinAntony4/generate-chrome-extension/blob/master/LICENSE)
![npm](https://img.shields.io/npm/dw/generate-chrome-extension)
Easily create Google Chrome Extensions using the `latest` version of React.

The following scenarios/options are supported:

- Popup ✓
- New Tab ✓
- Options ✓
- Background Page ✓
- Content Page ✓

## How to install

```bash
npm install -g generate-chrome-extension
```

## Start creating a new project

```bash
react-chrome
```

![alt text](https://snipboard.io/v4VHAx.jpg 'react-chrome CLI')

## How to use/develop

- change directory to your newly created project
- run react app (extensions files) on the browser `npm run start`
- build unpacked extension `npm run build`
- production build (this zip file can upload to Google WebStore) `npm run pack`
- goto: `chrome://extensions` in the browser and enable `'developer mode'`
- press `Load unpacked` and target the folder `build/`

The project is automatically being watched, any changes to the files will recompile the project.

**NOTE**: changes to the **content page** and **background page** scripts requires you to reload the extension in `chrome://extensions`

![alt text](https://snipboard.io/1W2m0H.jpg 'React Chrome Popup')

## Build/package for production

- update version number inside `./src/manifest.json`
- run `npm run pack`
- upload `extension-build.zip` to the chrome webstore.

This will run a production build and will automatically zip it as an extension package in the root folder named: `extension-build.zip`

## React folder

This folder contains the react single app source code.
inside it can build page for popup, options, tabs.

see: `./src/`

## Chrome folder

This `./build` folder contains the content page,background page, popup page scripts.

---
_Source: https://npm.io/package/generate-chrome-extension · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._