Chrome Extension with React.js Boilerplate
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…
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 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 │ ├── 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
distfolder in the root directory.
- Now, open up your chrome browser and type
chrome://extensionsin 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
distfolder 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.