Quickly setup chrome extension seed project with webpack, react, jquery, babel, bootstrap and react-bootstrap.
npx simple-chrome-extension project-name
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.
- cd into your extension directory
- run
npm run watch
- webpack will create
dist
directory inside extension directory with the bundled code and keep watching for code changes
To test the extension
-
Open chrome://extensions/ in the chrome browser
-
Click on load unpack button on top left and select the dist folder
-
Click on the icon next to the url section and it should render this popup
src
folder contains everything other than boilerplate codeassets
folder contains static assets like css, js files, images and iconsindex.html
is the default_popup of chrome extensionApp.js
contains the root component, It renders the TodoList componentTodoList.js
contains the TodoList component with all the logic for adding and removing the task from the list
Click here to add TodoList extension to your chrome browser - Please don't forget to give it 5-star rating ;)
- Inspired from https://github.com/Kornil/simple-react-app