Home

Awesome

#Redux Chrome Extension

work in progress

A starter boilerplate for a Chrome Extension using Redux and React.js. It handles store syncing throughout the whole Extension. Uses React for Popup window UI. Console.log in every part of extensions for better debugging. Implemets Redux Counter example (https://github.com/rackt/redux/tree/master/examples/counter).

https://developer.chrome.com/extensions/getstarted#unpacked

Installation

npm i

Development

npm start

Browserify and Watchify are used for building scripts and it's blazing fast. For more details see: (https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md)

  1. In Chrome open chrome://extensions/
  2. Select Developer mode
  3. Click on Load unpacked extension
  4. Add /dist folder

##Schema

Uses (https://developer.chrome.com/extensions/messaging)

Background Page

Popup Window

Content Script

Options Page

*** code for functionality that is in parenthesis was commented out, see src/content.index.js and src/popup/index.js ***

Example App

Releasing

gulp release

You can find .zip packages in the /dist folder.

##Data passing If you understand the Schema above, you see that not every part of extension talk to each other. That's because of in certain cases it doesn't make sense to notify the part, that would otherwise load the whole state from Background Page again.

It's not possible to have Content Script and Popup Window active both in the same time, since Popup Window is autoclosing when it loses focus, and after each invoking it's fetching the state from Background Page. So it doesn't make sense to send any changes from Content Script to Popup Window. Same with Popup Window and Options.

On the other hand Content Script is living behind every tab all the time, so we need to propagate store changes in Popop Window to Content Scripts immediately.

##Storage All the data we need to keep stored in extension after closing Chrome or disabling Extension are being saved to localStorage.

You can modify localStorage indirectly by changing state.persistent property, like Options page in example.

##TODO

Thanks to

https://github.com/schovi/webpack-chrome-extension