<commit_before># Browser App and Extension Boilerplate using Redux Actions

Simple boilerplate and library for building Chrome apps and cross-browser extensions (support for Firefox and Safari will come later) that use Redux actions instead of messaging.

![Demo](demo.gif)

Redux states are synced between background, inject page, app window, extension popup and badge.

The developing is the same as for the web apps with React and Redux, just use the `src/app` boilerplate. If you need some extension or Chrome app customizations, use `src/browser/` boilerplates.

The app example is edited from [Redux Counter example](https://github.com/rackt/redux/tree/master/examples/counter) using [Redux Persist](https://github.com/rt2zz/redux-persist), based on [React Chrome Extension Boilerplate](https://github.com/jhen0409/react-chrome-extension-boilerplate).

## Structure

- [browser-redux-sync](https://github.com/zalmoxisus/browser-redux-sync): states syncing module.
- [browser-redux-bg](https://github.com/zalmoxisus/browser-redux-bg): messaging module - send redux actions (from popup, windows or inject pages) to be called in the background by their function name. 
- `src/app`: React cross-browser application.
- `src/browser`: sources for the extension and Chrome app.
- `test/app`: tests for Redux actions and reducers, and for React components (using [Legit Tests](https://github.com/Legitcode/tests)).
- `test/chrome`: tests for Chrome app and extension (using [chromedriver](https://www.npmjs.com/package/chromedriver), [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)).

## Included

 - [react](https://github.com/facebook/react)
 - [redux](https://github.com/rackt/redux)
 - [react-redux](https://github.com/gaearon/react-redux)
 - [redux-persist](https://github.com/rt2zz/redux-persist)
 - [redux-devtools](https://github.com/gaearon/redux-devtools)
 - [redux-logger](https://github.com/fcomb/redux-logger)
 - [redbox-react](https://github.com/KeywordBrain/redbox-react)
 - [react-chrome-extension-boilerplate](https://github.com/jhen0409/react-chrome-extension-boilerplate)
 - [webpack](https://github.com/webpack/webpack)
 - [react-transform-hmr](https://github.com/gaearon/react-transform-hmr)
 - [react-transform-catch-errors](https://github.com/gaearon/react-transform-catch-errors)
 - [babel](https://github.com/babel/babel)
 - [babel-plugin-react-transform](https://github.com/gaearon/babel-plugin-react-transform)
 - [gulp](https://github.com/gulpjs/gulp)

## Installation

```bash
# required node.js/io.js
# clone it
npm install
```

## Development

```bash
# build files to './dev'
# watch files change
# start WebpackDevServer
npm run dev
```

You can load unpacked extensions with `./dev`.

#### React/Flux hot reload

This boilerplate uses `Webpack` and `react-transform`, and use `Redux`. You can hot reload by editing related files of Popup & Window. If the inject page is on https (like `https://github.com`), click the 'shield' icon on the Chrome address bar to allow loading `http://localhost` there (after making any changes in dev mode), so hot reload can work for that page.

## Build extension

```bash
# build files to './build/extension'
npm run build:extension
```

## Build app

```bash
# build files to './build/app'
npm run build:app
```

## Build & Compress ZIP file

```bash
# compress extension's build folder to extension.zip
npm run compress:extension

# compress app's build folder to app.zip
npm run compress:app
```

## Load to Chrome

- [Load the extension](https://developer.chrome.com/extensions/getstarted#unpacked)
- [Launch your app](https://developer.chrome.com/apps/first_app#five)

## Test

```bash
# test app<commit_msg>Add build commands to the README<commit_after># Browser App and Extension Boilerplate using Redux Actions

Simple boilerplate and library for building Chrome apps and cross-browser extensions (support for Firefox and Safari will come later) that use Redux actions instead of messaging.

![Demo](demo.gif)

Redux states are synced between background, inject page, app window, extension popup and badge.

The developing is the same as for the web apps with React and Redux, just use the `src/app` boilerplate. If you need some extension or Chrome app customizations, use `src/browser/` boilerplates.

The app example is edited from [Redux Counter example](https://github.com/rackt/redux/tree/master/examples/counter) using [Redux Persist](https://github.com/rt2zz/redux-persist), based on [React Chrome Extension Boilerplate](https://github.com/jhen0409/react-chrome-extension-boilerplate).

## Structure

- [browser-redux-sync](https://github.com/zalmoxisus/browser-redux-sync): states syncing module.
- [browser-redux-bg](https://github.com/zalmoxisus/browser-redux-bg): messaging module - send redux actions (from popup, windows or inject pages) to be called in the background by their function name. 
- `src/app`: React cross-browser application.
- `src/browser`: sources for the extension and Chrome app.
- `test/app`: tests for Redux actions and reducers, and for React components (using [Legit Tests](https://github.com/Legitcode/tests)).
- `test/chrome`: tests for Chrome app and extension (using [chromedriver](https://www.npmjs.com/package/chromedriver), [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)).

## Included

 - [react](https://github.com/facebook/react)
 - [redux](https://github.com/rackt/redux)
 - [react-redux](https://github.com/gaearon/react-redux)
 - [redux-persist](https://github.com/rt2zz/redux-persist)
 - [redux-devtools](https://github.com/gaearon/redux-devtools)
 - [redux-logger](https://github.com/fcomb/redux-logger)
 - [redbox-react](https://github.com/KeywordBrain/redbox-react)
 - [react-chrome-extension-boilerplate](https://github.com/jhen0409/react-chrome-extension-boilerplate)
 - [webpack](https://github.com/webpack/webpack)
 - [react-transform-hmr](https://github.com/gaearon/react-transform-hmr)
 - [react-transform-catch-errors](https://github.com/gaearon/react-transform-catch-errors)
 - [babel](https://github.com/babel/babel)
 - [babel-plugin-react-transform](https://github.com/gaearon/babel-plugin-react-transform)
 - [gulp](https://github.com/gulpjs/gulp)

## Installation

```bash
# required node.js/io.js
# clone it
npm install
```

## Development

```bash
# build files to './dev'
# watch files change
# start WebpackDevServer
npm run dev
```

You can load unpacked extensions with `./dev`.

#### React/Flux hot reload

This boilerplate uses `Webpack` and `react-transform`, and use `Redux`. You can hot reload by editing related files of Popup & Window. If the inject page is on https (like `https://github.com`), click the 'shield' icon on the Chrome address bar to allow loading `http://localhost` there (after making any changes in dev mode), so hot reload can work for that page.

## Build extension

```bash
# build files to './build/extension'
npm run build:extension
```

## Build app

```bash
# build files to './build/app'
npm run build:app
```

## Build firefox extension

```bash
# build files to './build/firefox'
npm run build:firefox
````
Note that it's [not possible for now to load Firefox extensions from local directories](https://bugzilla.mozilla.org/show_bug.cgi?id=1185460), so use `npm run compress:firefox` instead to generate an xpi file.

## Build & Compress ZIP file

```bash
# compress extension's build folder to extension.zip
npm run compress:extension

# compress app's build folder to app.zip
npm run compress:app

# compress firefox extension's build folder to firefox.xpi
npm run compress:firefox
```

## Load to Chrome

- [Load the extension](https://developer.chrome.com/extensions/getstarted#unpacked)
- [Launch your app](https://developer.chrome.com/apps/first_app#five)

## Test

```bash
# test app
{'fraction_non_alphanumeric': 0.13595088886046808, 'fraction_numerical': 0.003453126998337383, 'mean_word_length': 4.642135642135642, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 51, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5022308', 'n_tokens_mistral': 2529, 'n_tokens_neox': 2344, 'n_words': 696}