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

by React

Chrome Extension with React.js Boilerplate


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

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

Install dependencies & compile code with webpack

$ yarn
$ yarn run dev

File structure

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

chrome-extension-react-boilerplate
├── README.md
├── node_modules
├── dist
│   ├── background.js
│   ├── icons
│   ├── main.js
│   ├── main.js.LICENSE.txt
│   ├── manifest.json
│   └── popup.html
├── package.json
├── public
│   ├── background.js
│   ├── icons
│   └── manifest.json
├── src
│   ├── popup.css
│   ├── popup.html
│   └── 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 to file an issue.

Author

Support

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

GitHub

View Github