A boilerplate code to build a chrome extension with react and webpack.
MIT License
Boilerplate for your chrome extension with react.js and webpack
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.
Open your terminal and type...
git clone https://github.com/vivek9patel/chrome-extension-react-boilerplate.git
cd chrome-extension-react-boilerplate
yarn
yarn run dev
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
│ ├── 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
dist
folder in the root directory.chrome://extensions
in the URL bar.dist
folder from the root directory, and that will load this extension in the chrome!If you have questions, feature requests or a bug you want to report, please click here to file an issue.
Like what you see? Keep me awake at night by buying me a coffee or two.