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

A boilerplate code to build a chrome extension with react and webpack.
https://github.com/vivek9patel/chrome-extension-react-boilerplate

Last synced: about 2 months ago
JSON representation

A boilerplate code to build a chrome extension with react and webpack.

• Host: GitHub
• URL: https://github.com/vivek9patel/chrome-extension-react-boilerplate
• Owner: vivek9patel
• License: mit
• Created: 2021-12-17T18:51:54.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2021-12-21T11:25:25.000Z (over 2 years ago)
• Last Synced: 2024-07-05T14:53:25.984Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 66.4 KB
• Stars: 24
• Watchers: 1
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Chrome Extension with React.js Boilerplate

[![GitHub version](https://img.shields.io/badge/version-v1.0.0-blue.svg)](https://github.com/vivek9patel/chrome-extension-react-boilerplate)

[![License](https://img.shields.io/github/license/yilber/readme-boilerplate.svg)](https://github.com/vivek9patel/chrome-extension-react-boilerplate/blob/master/LICENCE)

Boilerplate for your chrome extension with react.js and webpack

## Background

> Creating a file structure for developing chrome-extension takes forever, especially if you want to integrate react to generate popup starting off from scratch. So, I decided to make a template to help me speed up things a little bit.

## Installation

Open your terminal and type...

### Clone in your system

```sh

git clone https://github.com/vivek9patel/chrome-extension-react-boilerplate.git

```

```sh

cd chrome-extension-react-boilerplate

```

### Install dependencies & compile code with webpack

```sh

yarn

```

```sh

yarn run dev

```

## File structure

After all the above steps, you should able to see this file strucutre in the root directory:

```text

chrome-extension-react-boilerplate

├── README.md

├── node_modules

├── dist

│   ├── background.js

│   ├── icons

│   ├── manifest.json

│   ├── popup.html

│   ├── popup.js

│   └── popup.js.LICENSE.txt

├── package.json

├── public

│   ├── icons

│   │   ├── 128.png

│   │   ├── 16.png

│   │   └── 48.png

│   ├── manifest.json

│   └── popup.html

├── src

│   ├── chrome

│   │   └── background.js

│   ├── popup.css

│   └── popup.jsx

├── webpack.config.js

├── webpack.dev.js

├── webpack.prod.js

└── yarn.lock

```

## How to use

- By running the above commands webpack will generate `dist` folder in the root directory.

- Now, open up your chrome browser and type `chrome://extensions` in the URL bar.

- Toggle developer mode to on and click on the _Load Unpacked_ button.

- This will open a window to select folder. Go ahed and open the `dist` folder from the root directory, and that will load this extension in the chrome!

## Bugs

If you have questions, feature requests or a bug you want to report, please click [here](https://github.com/vivek9patel/chrome-extension-react-boilerplate/issues) to file an issue.

## Author

- [**vivek9patel**](https://www.linkedin.com/in/vivek9patel/)

- [![GitHub followers](https://img.shields.io/github/followers/vivek9patel.svg?style=social)](https://github.com/vivek9patel)

- [![Twitter Follow](https://img.shields.io/twitter/follow/vivek9patel.svg?style=social)](https://twitter.com/vivek9patel)

## Support

Like what you see? Keep me awake at night by buying me a coffee or two.