Building Chrome extension using React.js, Redux and Gulp automation
Am not gonna cover basics of React, Redux & Chrome extension API as there are number of good resources available over the Internet already and below are my choices to learn them.
There is a boilerplate already present for this which uses Webpack. But I prefer Gulp, so have built separate boilerplate using Gulp tasks involving Browserify & Css-modulesify making my first open-source contribution. This is a TodoMVC example where the states are saved in localStorage using Chrome storage API. The example has layouts for Popup, Inject-script & Context-menu.
- Clone the repo
- Install npm dependencies
$ npm install
- Build using gulp tasks
- Load the
./devfolder to Google Chrome using Load unpacked extensions option.
The react sources are present inside the ./app folder. The folder structure inside ./app should be familiar to you if you had already gone through React-Redux tutorial above. The Store uses Chrome storage API instead of redux-store.
The React render code for the Todo app is present in ./chrome/extension/todoapp.js. The states are made persistent by below code.
The background.js file includes the code for changing badge count each time a new todo is added, code for injecting the inject.js script into github.com’s source and the code for context menu.
Am stopping here. Please let me know if you have any doubts or problems with the source/execution. I will try and help out.
This article was originally posted on my own site.