Simple Chrome Extension

Quickly setup chrome extension seed project with webpack, react, jquery, babel, bootstrap and react-bootstrap.

Usage

With npx just run

npx simple-chrome-extension project-name

Without npx

Install simple-chrome-extension globally using

npm i -g simple-chrome-extension

then run

simple-chrome-extension project-name

replace project-name with the name of your chrome extension.

Runing Extension

1. cd into your extension directory
2. run npm run watch
3. webpack will create dist directory inside extension directory with the bundled code and keep watching for code changes

Add extension to chrome

To test the extension

1. Open chrome://extensions/ in the chrome browser

2. Enable developer mode by button on the top right

3. Click on load unpack button on top left and select the dist folder

4. It will load our chrome extension like this

5. Click on the icon next to the url section and it should render this popup

Project Structure

• src folder contains everything other than boilerplate code
• assets folder contains static assets like css, js files, images and icons
• index.html is the default_popup of chrome extension
• App.js contains the root component, It renders the TodoList component
• TodoList.js contains the TodoList component with all the logic for adding and removing the task from the list

Demo

Click here to add TodoList extension to your chrome browser - Please don't forget to give it 5-star rating ;)

Acknowledgments

• Inspired from https://github.com/Kornil/simple-react-app