Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

Mihail Diordiev

Last update: Jan 6, 2023

Related tags

Boilerplate crossbuilder

Overview

CrossBuilder

Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging.

Redux states are synced between background, injected 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.

Structure

src/app: React cross-browser application (will be imported in the apps bellow).
src/web: web app sources.
src/browser: extensions sources.
src/chromeApp: Chrome app sources
src/electron: Electron app sources
test/app: tests for Redux actions and reducers, and for React components (using enzyme).
test/chrome: tests for Chrome app and extension (using chromedriver, selenium-webdriver).

CrossBuilder included libraries

Installation

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

Development

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

Open web app in browser at localhost:3000.
Load unpacked extension's ./dev folder to Chrome.

React/Flux hot reload

This boilerplate uses Webpack and react-transform. You can hot reload by editing related files of ./src/app. If the inject page for the extension 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.

Debug with Redux DevTools

We use Redux DevTools Extension, install it from Chrome store for debugging.

Build web app

# build files to './build/web'
npm run build:web

Build Electron app

# build files to './build/electron'
npm run build:electron

# or to start it
npm run start:electron

Build Chrome app

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

Build Chrome extension

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

Build Firefox extension

# build files to './build/firefox'
npm run build:firefox

Note that you should use Firefox Nightly or Developer Edition to support WebExtensions. It's not possible for now to load Firefox extensions from local directories, so use npm run compress:firefox instead to generate an xpi file or use Firefox Developer Edition which can load local directories. Make sure yo follow prerequisites and installing instruction.

Build & Run Cordova app

Install global tools: npm install -g cordova.
Add your cordova platform by running cordova platform add %PLATFORM% (where %PLATFORM% is the platform you deploy for: android and more).
Use cordova run android or cordova build android to run or build the app (it will execute npm run build:cordova automatically as a hook).

Build & Compress

# build and compress Electron app to [name].dmg, win32-ia32.zip, win32-x64.zip, linux-ia32.zip, linux-x64.zip
npm run compress:electron

# compress Chrome app to app.zip
npm run compress:app

# compress Chrome extension to extension.zip
npm run compress:extension

# compress Firefox extension to firefox.xpi
npm run compress:firefox

Load

Test

# test app
npm run test:app

# start Chromedriver for testing with Chrome
npm run before:test:chrome

# test Chrome extension
npm run test:chrome:extension

# test Chrome app
npm run test:chrome:app

# test Chrome extension and app
npm run test:chrome

# test everything
npm test

Roadmap

LICENSE

MIT

Comments

Use one store without rehydratations
As discussed in #18 and #16, in order to increase the performance and to avoid errors, we want to deprecate browser-redux-bg and just use background page's store in other extension pages.

So, there will be no more a call in background action, as all redux actions will be dispatched in background. It's very convenient as you may dispatch an action from everywhere, and even if you close the popup or the injected page, you will get it done.

To implement it, we need to:

[x] remove rehydratations (change browser-redux-sync).

[x] get the store with chrome.runtime.getBackgroundPage for all the pages except the background.

[x] make a workaround for the content script via messaging.

Any suggestions are welcome.
opened by zalmoxisus 6
Multiple background-scripts sharing the same store

Hi, our setup involves multiple background-scripts depending on a single background store. I guess calling configStore in each modules entry point will generate a new store instance. The current implementation simply puts the store instance onto the window object (window.store). Defining multiple background scripts in background.html loads those scripts in a parallel fashion, consequently window.store is only available when configStore is completed. In order to resolve this issue the configurationStore and it`s internal function calls has to be adapted onto a promise based solution. Further the store initialisation has to be bundles within a shared module providing distributing the store instance on request to other modules.

Thanks,

opened by gurkerl83 5
Tried starting it per README and received an error

I followed the README and when I access https://localhost:3000/ using Chrome, there is an error on the console:

Uncaught TypeError: storage.getAllKeys is not a function

I did some debugging and it looks like if I replace storage.getAllKeys with storage().getAllKeys, it would work. This is in https://github.com/rt2zz/redux-persist/blob/master/src/getStoredState.js#L14. Do you indeed have 1.5.3 installed and working or are you on 2.x now?

opened by cymen 4
React 15 breaks test

I created a new crossbuilder project and ran test successfully. Then I upgraded to react 15.0.2 and reran test again. This time most the tests of the form "should contain text "Clicked:" failed. I also upgraded redux, react-addons-test-utils, and selenium-webdriver to their latest versions and still get the same failures.

Interestingly the apps still work correctly. It appears that the function checkValue in tests.js is aborting for the failure cases.

Any suggestions?

opened by chetmurphy 3
Proposal for electron-redux

Hi, first of all browser-redux sounds like a working concept which allows state synchronisation throughout multiple sandboxed environments such as content and background scripts in the browser. Electron has a similar structure which separates main and render aspects. Unfortunately Electron does not support chrome API`s so a direct reuse of browser-redux and the underlying libraries such as crossmessaging is not possible. On the other hand Electron implements a nice IPC and remote - require concept which would allow a port of browser-redux. Note: N1 implements a action-bridge which is backed by Electron IPC allowing to dispatch Actions within a window, global and work environment scope.

https://github.com/nylas/N1/blob/master/src/flux/action-bridge.coffee

Thanks

opened by gurkerl83 3
Support Immutable data structures in reducers

Hi, tried several approaches integrating immutable.js in counter reducer starting from using redux-persist-immutable and other immutable enabling redux libraries. Unfortunately the experiment is not working so I try to reach out for some hints. I think one issue might be the combineReducers (browser-redux-bg) calls in configureStore to recognise immutable.js.

Thanks!

opened by gurkerl83 3
Upgrade react to 0.14
I'm trying to upgrade React, but needs to be updated together Redux.

[x] react@^0.14.0

[x] react-dom@^0.14.0

[x] redux@^3.0.2

[x] react-redux@^4.0.0

[ ] redux-devtools@^3.0.0 (waiting for release)

[ ] redux-devtools-log-monitor@^1.0.0 (waiting for release)

[ ] redux-devtools-dock-monitor@^1.0.0 (waiting for release)

[x] legit-tests@^0.6.1

Wait until all released, we can begin this work. :)
opened by jhen0409 3

Electron: SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

I did following commands:

npm install
npm run start:electron

and here is the output and gif

[09:38:35] Finished 'webpack:build:electron' after 3.08 s
[09:38:35] Starting 'build:electron'...
[09:38:35] Finished 'build:electron' after 5.22 μs
App threw an error when running [SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode]

Full log follows:

~/projects/electron/crossbuilder (master)$ npm run start:electron

> [email protected] start:electron /Users/barton/projects/electron/crossbuilder
> rm -rf ./build/electron/ && gulp build:electron && electron ./build/electron/

[09:42:19] Requiring external module babel-register
[09:42:23] Using gulpfile ~/projects/electron/crossbuilder/gulpfile.babel.js
[09:42:24] Starting 'webpack:build:electron'...
[09:42:24] Starting 'views:build:electron'...
[09:42:24] Finished 'views:build:electron' after 16 ms
[09:42:24] Starting 'copy:build:electron'...
[09:42:24] Finished 'copy:build:electron' after 2.31 ms
[09:42:27] [webpack:build] Hash: 3f78f35c1485d53c2376
Version: webpack 1.12.14
Time: 3102ms
        Asset    Size  Chunks             Chunk Names
app.bundle.js  169 kB       0  [emitted]  app
chunk    {0} app.bundle.js (app) 766 kB [rendered]
    [0] multi app 28 bytes {0} [built]
    [1] ./src/web/index.js 623 bytes {0} [built]
    [2] ./~/react/react.js 56 bytes {0} [built]
    [3] ./~/react/lib/React.js 1.49 kB {0} [built]
    [4] ./~/react/lib/ReactDOM.js 3.71 kB {0} [built]
    [5] ./~/react/lib/ReactCurrentOwner.js 653 bytes {0} [built]
    [6] ./~/react/lib/ReactDOMTextComponent.js 4.32 kB {0} [built]
    [7] ./~/react/lib/DOMChildrenOperations.js 5 kB {0} [built]
    [8] ./~/react/lib/Danger.js 6.96 kB {0} [built]
    [9] ./~/react/~/fbjs/lib/ExecutionEnvironment.js 1.09 kB {0} [built]
   [10] ./~/react/~/fbjs/lib/createNodesFromMarkup.js 2.71 kB {0} [built]
   [11] ./~/react/~/fbjs/lib/createArrayFromMixed.js 2.36 kB {0} [built]
   [12] ./~/react/~/fbjs/lib/toArray.js 1.98 kB {0} [built]
   [13] ./~/react/~/fbjs/lib/invariant.js 1.51 kB {0} [built]
   [14] ./~/react/~/fbjs/lib/getMarkupWrap.js 3.06 kB {0} [built]
   [15] ./~/react/~/fbjs/lib/emptyFunction.js 1.09 kB {0} [built]
   [16] ./~/react/lib/ReactMultiChildUpdateTypes.js 861 bytes {0} [built]
   [17] ./~/react/~/fbjs/lib/keyMirror.js 1.27 kB {0} [built]
   [18] ./~/react/lib/ReactPerf.js 2.51 kB {0} [built]
   [19] ./~/react/lib/setInnerHTML.js 3.35 kB {0} [built]
   [20] ./~/react/lib/setTextContent.js 1.2 kB {0} [built]
   [21] ./~/react/lib/escapeTextContentForBrowser.js 849 bytes {0} [built]
   [22] ./~/react/lib/DOMPropertyOperations.js 7.88 kB {0} [built]
   [23] ./~/react/lib/DOMProperty.js 9.57 kB {0} [built]
   [24] ./~/react/lib/quoteAttributeValueForBrowser.js 746 bytes {0} [built]
   [25] ./~/react/~/fbjs/lib/warning.js 1.77 kB {0} [built]
   [26] ./~/react/lib/ReactComponentBrowserEnvironment.js 1.26 kB {0} [built]
   [27] ./~/react/lib/ReactDOMIDOperations.js 3.29 kB {0} [built]
   [28] ./~/react/lib/ReactMount.js 36.8 kB {0} [built]
   [29] ./~/react/lib/ReactBrowserEventEmitter.js 12.4 kB {0} [built]
   [30] ./~/react/lib/EventConstants.js 2.04 kB {0} [built]
   [31] ./~/react/lib/EventPluginHub.js 9.22 kB {0} [built]
   [32] ./~/react/lib/EventPluginRegistry.js 8.41 kB {0} [built]
   [33] ./~/react/lib/EventPluginUtils.js 6.79 kB {0} [built]
   [34] ./~/react/lib/ReactErrorUtils.js 2.27 kB {0} [built]
   [35] ./~/react/lib/accumulateInto.js 1.74 kB {0} [built]
   [36] ./~/react/lib/forEachAccumulated.js 893 bytes {0} [built]
   [37] ./~/react/lib/ReactEventEmitterMixin.js 1.3 kB {0} [built]
   [38] ./~/react/lib/ViewportMetrics.js 638 bytes {0} [built]
   [39] ./~/react/lib/Object.assign.js 1.26 kB {0} [built]
   [40] ./~/react/lib/isEventSupported.js 1.97 kB {0} [built]
   [41] ./~/react/lib/ReactDOMFeatureFlags.js 458 bytes {0} [built]
   [42] ./~/react/lib/ReactElement.js 8.07 kB {0} [built]
   [43] ./~/react/lib/canDefineProperty.js 629 bytes {0} [built]
   [44] ./~/react/lib/ReactEmptyComponentRegistry.js 1.38 kB {0} [built]
   [45] ./~/react/lib/ReactInstanceHandles.js 10.6 kB {0} [built]
   [46] ./~/react/lib/ReactRootIndex.js 723 bytes {0} [built]
   [47] ./~/react/lib/ReactInstanceMap.js 1.25 kB {0} [built]
   [48] ./~/react/lib/ReactMarkupChecksum.js 1.39 kB {0} [built]
   [49] ./~/react/lib/adler32.js 1.2 kB {0} [built]
   [50] ./~/react/lib/ReactReconciler.js 3.55 kB {0} [built]
   [51] ./~/react/lib/ReactRef.js 2.34 kB {0} [built]
   [52] ./~/react/lib/ReactOwner.js 3.45 kB {0} [built]
   [53] ./~/react/lib/ReactUpdateQueue.js 10.9 kB {0} [built]
   [54] ./~/react/lib/ReactUpdates.js 8.54 kB {0} [built]
   [55] ./~/react/lib/CallbackQueue.js 2.44 kB {0} [built]
   [56] ./~/react/lib/PooledClass.js 3.55 kB {0} [built]
   [57] ./~/react/lib/Transaction.js 9.55 kB {0} [built]
   [58] ./~/react/~/fbjs/lib/emptyObject.js 482 bytes {0} [built]
   [59] ./~/react/~/fbjs/lib/containsNode.js 1.43 kB {0} [built]
   [60] ./~/react/~/fbjs/lib/isTextNode.js 628 bytes {0} [built]
   [61] ./~/react/~/fbjs/lib/isNode.js 712 bytes {0} [built]
   [62] ./~/react/lib/instantiateReactComponent.js 4.52 kB {0} [built]
   [63] ./~/react/lib/ReactCompositeComponent.js 27.5 kB {0} [built]
   [64] ./~/react/lib/ReactComponentEnvironment.js 1.67 kB {0} [built]
   [65] ./~/react/lib/ReactPropTypeLocations.js 549 bytes {0} [built]
   [66] ./~/react/lib/ReactPropTypeLocationNames.js 611 bytes {0} [built]
   [67] ./~/react/lib/shouldUpdateReactComponent.js 1.49 kB {0} [built]
   [68] ./~/react/lib/ReactEmptyComponent.js 1.68 kB {0} [built]
   [69] ./~/react/lib/ReactNativeComponent.js 3.02 kB {0} [built]
   [70] ./~/react/lib/validateDOMNesting.js 13.1 kB {0} [built]
   [71] ./~/react/lib/ReactDefaultInjection.js 3.99 kB {0} [built]
   [72] ./~/react/lib/BeforeInputEventPlugin.js 14.9 kB {0} [built]
   [73] ./~/react/lib/EventPropagators.js 5.22 kB {0} [built]
   [74] ./~/react/lib/FallbackCompositionState.js 2.49 kB {0} [built]
   [75] ./~/react/lib/getTextContentAccessor.js 994 bytes {0} [built]
   [76] ./~/react/lib/SyntheticCompositionEvent.js 1.16 kB {0} [built]
   [77] ./~/react/lib/SyntheticEvent.js 5.79 kB {0} [built]
   [78] ./~/react/lib/SyntheticInputEvent.js 1.15 kB {0} [built]
   [79] ./~/react/~/fbjs/lib/keyOf.js 1.11 kB {0} [built]
   [80] ./~/react/lib/ChangeEventPlugin.js 11.5 kB {0} [built]
   [81] ./~/react/lib/getEventTarget.js 930 bytes {0} [built]
   [82] ./~/react/lib/isTextInputElement.js 1.03 kB {0} [built]
   [83] ./~/react/lib/ClientReactRootIndex.js 551 bytes {0} [built]
   [84] ./~/react/lib/DefaultEventPluginOrder.js 1.26 kB {0} [built]
   [85] ./~/react/lib/EnterLeaveEventPlugin.js 3.9 kB {0} [built]
   [86] ./~/react/lib/SyntheticMouseEvent.js 2.2 kB {0} [built]
   [87] ./~/react/lib/SyntheticUIEvent.js 1.64 kB {0} [built]
   [88] ./~/react/lib/getEventModifierState.js 1.3 kB {0} [built]
   [89] ./~/react/lib/HTMLDOMPropertyConfig.js 7.63 kB {0} [built]
   [90] ./~/react/lib/ReactBrowserComponentMixin.js 1.15 kB {0} [built]
   [91] ./~/react/lib/findDOMNode.js 2.17 kB {0} [built]
   [92] ./~/react/lib/ReactDefaultBatchingStrategy.js 1.92 kB {0} [built]
   [93] ./~/react/lib/ReactDOMComponent.js 36.9 kB {0} [built]
   [94] ./~/react/lib/AutoFocusUtils.js 816 bytes {0} [built]
   [95] ./~/react/~/fbjs/lib/focusNode.js 725 bytes {0} [built]
   [96] ./~/react/lib/CSSPropertyOperations.js 5.71 kB {0} [built]
   [97] ./~/react/lib/CSSProperty.js 3.5 kB {0} [built]
   [98] ./~/react/~/fbjs/lib/camelizeStyleName.js 1.03 kB {0} [built]
   [99] ./~/react/~/fbjs/lib/camelize.js 729 bytes {0} [built]
  [100] ./~/react/lib/dangerousStyleValue.js 1.93 kB {0} [built]
  [101] ./~/react/~/fbjs/lib/hyphenateStyleName.js 1 kB {0} [built]
  [102] ./~/react/~/fbjs/lib/hyphenate.js 822 bytes {0} [built]
  [103] ./~/react/~/fbjs/lib/memoizeStringOnly.js 778 bytes {0} [built]
  [104] ./~/react/lib/ReactDOMButton.js 1.15 kB {0} [built]
  [105] ./~/react/lib/ReactDOMInput.js 5.74 kB {0} [built]
  [106] ./~/react/lib/LinkedValueUtils.js 5.18 kB {0} [built]
  [107] ./~/react/lib/ReactPropTypes.js 12.3 kB {0} [built]
  [108] ./~/react/lib/getIteratorFn.js 1.17 kB {0} [built]
  [109] ./~/react/lib/ReactDOMOption.js 2.82 kB {0} [built]
  [110] ./~/react/lib/ReactChildren.js 5.83 kB {0} [built]
  [111] ./~/react/lib/traverseAllChildren.js 6.9 kB {0} [built]
  [112] ./~/react/lib/ReactDOMSelect.js 6.11 kB {0} [built]
  [113] ./~/react/lib/ReactDOMTextarea.js 4.35 kB {0} [built]
  [114] ./~/react/lib/ReactMultiChild.js 14.7 kB {0} [built]
  [115] ./~/react/lib/ReactChildReconciler.js 4.52 kB {0} [built]
  [116] ./~/react/lib/flattenChildren.js 1.65 kB {0} [built]
  [117] ./~/react/~/fbjs/lib/shallowEqual.js 1.28 kB {0} [built]
  [118] ./~/react/lib/ReactEventListener.js 7.51 kB {0} [built]
  [119] ./~/react/~/fbjs/lib/EventListener.js 2.65 kB {0} [built]
  [120] ./~/react/~/fbjs/lib/getUnboundedScrollPosition.js 1.09 kB {0} [built]
  [121] ./~/react/lib/ReactInjection.js 1.37 kB {0} [built]
  [122] ./~/react/lib/ReactClass.js 27.8 kB {0} [built]
  [123] ./~/react/lib/ReactComponent.js 5.04 kB {0} [built]
  [124] ./~/react/lib/ReactNoopUpdateQueue.js 3.94 kB {0} [built]
  [125] ./~/react/lib/ReactReconcileTransaction.js 4.58 kB {0} [built]
  [126] ./~/react/lib/ReactInputSelection.js 4.32 kB {0} [built]
  [127] ./~/react/lib/ReactDOMSelection.js 6.83 kB {0} [built]
  [128] ./~/react/lib/getNodeForCharacterOffset.js 1.66 kB {0} [built]
  [129] ./~/react/~/fbjs/lib/getActiveElement.js 924 bytes {0} [built]
  [130] ./~/react/lib/SelectEventPlugin.js 6.71 kB {0} [built]
  [131] ./~/react/lib/ServerReactRootIndex.js 868 bytes {0} [built]
  [132] ./~/react/lib/SimpleEventPlugin.js 17.4 kB {0} [built]
  [133] ./~/react/lib/SyntheticClipboardEvent.js 1.23 kB {0} [built]
  [134] ./~/react/lib/SyntheticFocusEvent.js 1.12 kB {0} [built]
  [135] ./~/react/lib/SyntheticKeyboardEvent.js 2.76 kB {0} [built]
  [136] ./~/react/lib/getEventCharCode.js 1.56 kB {0} [built]
  [137] ./~/react/lib/getEventKey.js 2.93 kB {0} [built]
  [138] ./~/react/lib/SyntheticDragEvent.js 1.13 kB {0} [built]
  [139] ./~/react/lib/SyntheticTouchEvent.js 1.33 kB {0} [built]
  [140] ./~/react/lib/SyntheticWheelEvent.js 1.99 kB {0} [built]
  [141] ./~/react/lib/SVGDOMPropertyConfig.js 3.8 kB {0} [built]
  [142] ./~/react/lib/ReactVersion.js 379 bytes {0} [built]
  [143] ./~/react/lib/renderSubtreeIntoContainer.js 463 bytes {0} [built]
  [144] ./~/react/lib/ReactDOMServer.js 766 bytes {0} [built]
  [145] ./~/react/lib/ReactServerRendering.js 3.3 kB {0} [built]
  [146] ./~/react/lib/ReactServerBatchingStrategy.js 673 bytes {0} [built]
  [147] ./~/react/lib/ReactServerRenderingTransaction.js 2.3 kB {0} [built]
  [148] ./~/react/lib/ReactIsomorphic.js 2.05 kB {0} [built]
  [149] ./~/react/lib/ReactDOMFactories.js 3.36 kB {0} [built]
  [150] ./~/react/lib/ReactElementValidator.js 10.8 kB {0} [built]
  [151] ./~/react/~/fbjs/lib/mapObject.js 1.47 kB {0} [built]
  [152] ./~/react/lib/onlyChild.js 1.21 kB {0} [built]
  [153] ./~/react/lib/deprecated.js 1.77 kB {0} [built]
  [154] ./~/react-dom/index.js 63 bytes {0} [built]
  [155] ./src/app/containers/Root.js 2.59 kB {0} [built]
  [156] ./~/react-redux/lib/index.js 475 bytes {0} [built]
  [157] ./~/react-redux/lib/components/Provider.js 2.94 kB {0} [built]
  [158] ./~/react-redux/lib/utils/storeShape.js 262 bytes {0} [built]
  [159] ./~/react-redux/lib/components/connect.js 12.8 kB {0} [built]
  [160] ./~/react-redux/lib/utils/shallowEqual.js 543 bytes {0} [built]
  [161] ./~/react-redux/lib/utils/wrapActionCreators.js 268 bytes {0} [built]
  [162] ./~/redux/lib/index.js 1.94 kB {0} [built]
  [163] ./~/redux/lib/createStore.js 7.68 kB {0} [built]
  [164] ./~/redux/~/lodash/isPlainObject.js 1.72 kB {0} [built]
  [165] ./~/redux/~/lodash/_isHostObject.js 552 bytes {0} [built]
  [166] ./~/redux/~/lodash/isObjectLike.js 592 bytes {0} [built]
  [167] ./~/redux/lib/combineReducers.js 5.52 kB {0} [built]
  [168] ./~/redux/lib/utils/warning.js 665 bytes {0} [built]
  [169] ./~/redux/lib/bindActionCreators.js 2.04 kB {0} [built]
  [170] ./~/redux/lib/applyMiddleware.js 2.03 kB {0} [built]
  [171] ./~/redux/lib/compose.js 830 bytes {0} [built]
  [172] ./~/react-redux/~/lodash/isPlainObject.js 1.72 kB {0} [built]
  [173] ./~/react-redux/~/lodash/_isHostObject.js 552 bytes {0} [built]
  [174] ./~/react-redux/~/lodash/isObjectLike.js 592 bytes {0} [built]
  [175] ./~/react-redux/~/hoist-non-react-statics/index.js 921 bytes {0} [built]
  [176] ./~/react-redux/~/invariant/browser.js 1.52 kB {0} [built]
  [177] ./src/app/containers/App.js 969 bytes {0} [built]
  [178] ./src/app/components/Counter.js 2.4 kB {0} [built]
  [179] ./src/app/actions/counter.js 896 bytes {0} [built]
  [180] ./src/app/constants/ActionTypes.js 345 bytes {0} [built]
  [181] ./src/app/store/configureStore.js 1.99 kB {0} [built]
  [182] ./~/redux-thunk/lib/index.js 306 bytes {0} [built]
  [183] ./~/redux-notify/lib/index.js 1.42 kB {0} [built]
  [184] ./src/app/reducers/index.js 676 bytes {0} [built]
  [185] ./src/app/reducers/counter.js 1.37 kB {0} [built]
  [186] ./src/app/reducers/extension.js 303 bytes {0} [built]
  [187] ./src/app/events/notifyEvents.js 463 bytes {0} [built]
  [188] ./src/app/actions/extension.js 597 bytes {0} [built]
  [189] ./~/crossmessaging/lib/index.js 3.08 kB {0} [built]
  [190] ./src/app/store/getStoredState.js 1.04 kB {0} [built]
  [191] ./~/redux-persist/lib/index.js 407 bytes {0} [built]
  [192] ./~/redux-persist/lib/defaults/asyncLocalStorage.js 2.42 kB {0} [built]
  [193] (webpack)/~/node-libs-browser/~/timers-browserify/main.js 2.1 kB {0} [built]
  [194] (webpack)/~/node-libs-browser/~/process/browser.js 2.06 kB {0} [built]
  [195] ./~/redux-persist/lib/persistStore.js 5.31 kB {0} [built]
  [196] ./~/redux-persist/~/lodash.foreach/index.js 2.4 kB {0} [built]
  [197] ./~/redux-persist/~/lodash.foreach/~/lodash._arrayeach/index.js 942 bytes {0} [built]
  [198] ./~/redux-persist/~/lodash.foreach/~/lodash._baseeach/index.js 5.41 kB {0} [built]
  [199] ./~/redux-persist/~/lodash.foreach/~/lodash._baseeach/~/lodash.keys/index.js 6.62 kB {0} [built]
  [200] ./~/redux-persist/~/lodash.foreach/~/lodash._baseeach/~/lodash.keys/~/lodash._getnative/index.js 3.87 kB {0} [built]
  [201] ./~/redux-persist/~/lodash.foreach/~/lodash._baseeach/~/lodash.keys/~/lodash.isarguments/index.js 6.33 kB {0} [built]
  [202] ./~/redux-persist/~/lodash.foreach/~/lodash.isarray/index.js 5.16 kB {0} [built]
  [203] ./~/redux-persist/~/lodash.foreach/~/lodash._bindcallback/index.js 1.91 kB {0} [built]
  [204] ./~/redux-persist/lib/constants.js 99 bytes {0} [built]
  [205] ./~/redux-persist/lib/getStoredState.js 2.66 kB {0} [built]
  [206] ./~/redux-persist/lib/autoRehydrate.js 3.01 kB {0} [built]
  [207] ./~/redux-persist/~/lodash.isplainobject/index.js 3.24 kB {0} [built]
  [208] ./~/redux-persist/~/lodash.isplainobject/~/lodash._basefor/index.js 1.56 kB {0} [built]
  [209] ./~/redux-persist/~/lodash.isplainobject/~/lodash.isarguments/index.js 6.33 kB {0} [built]
  [210] ./~/redux-persist/~/lodash.isplainobject/~/lodash.keysin/index.js 3.84 kB {0} [built]
  [211] ./~/redux-persist/~/lodash.isplainobject/~/lodash.keysin/~/lodash.isarray/index.js 5.16 kB {0} [built]
  [212] ./~/redux-persist/lib/bufferActions.js 541 bytes {0} [built]
  [213] ./~/chrome-storage-local/storage.js 857 bytes {0} [built]
  [214] ./src/app/store/getStateToBg.js 956 bytes {0} [built]
  [215] ./src/app/store/getStateFromBg.js 714 bytes {0} [built]
  [216] template of 164 referencing  1.72 kB {0} [not cacheable] [built]
[09:42:27] Finished 'webpack:build:electron' after 3.13 s
[09:42:27] Starting 'build:electron'...
[09:42:27] Finished 'build:electron' after 7.6 μs
App threw an error when running [SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode]

opened by bartonhammond 2

Using React components for Chrome badges?
Hi!

I'm new to React and just started learning Redux so I might be completely wrong, and I'm not sure if it's going to work, please let me know what you think.

My understanding how badges currently work

I've looked at the code and to me it looks like you're using redux-notify to send NOTIFY_SEND and NOTIFY_RECEIVE events that you then catch in a reducer and set the badge: https://github.com/zalmoxisus/browser-redux/blob/master/src/app/reducers/counter.js#L6

if ( typeof window === 'object' && window.bgBadge && (action.type === NOTIFY_SEND || action.type === NOTIFY_RECEIVE) ) { window.bgBadge(state.count); return state; }

The Redux docs say that reducers should be pure and not have any side effects: http://redux.js.org/docs/basics/Reducers.html

For now, just remember that the reducer must be pure. Given the same arguments, it should calculate the next state and return it. No surprises. No side effects. No API calls. No mutations. Just a calculation.

Also, I think it's kind of a lot of new concepts for a relatively small feature.

Possible alternative

I'm thinking that wouldn't it be simpler to have a React component on the background page that would take count from the store as a prop and instead of rendering HTML, set the badge?

Don't you think it would be a better implementation? Do you see any issues with my approach?

I'm just learning Redux, so any feedback would be very helpful and appreciated. Thanks!
opened by unmanbearpig 2
Mixing import and require

If I'm interpreting this correctly, I think these lines https://github.com/zalmoxisus/browser-redux/blob/master/src/app/store/configureStore.js#L9-L10 will only work with the add-module-exports plugin that is included in webpack/dev.config.js but not in webpack/prod.config.js.

opened by emschwartz 2
Question about storage sync / debounce

Right now redux-persist has a 33ms debounce built in to the storage set calls. This does not make sense for apps that use storage as a type of messaging bus. My thought is we should add a debounce option to redux-persists that can either be false or an integer number of ms.

Since your project is on the top of my mind right now, @zalmoxisus does this sound right to you?

opened by rt2zz 2

Output with errors on npm audit fix --force

I try to run this with npm audit fix --force ... but I got errors about changes and updates. This is the output I got with these errors:

npm audit fix --force
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating gulp-jade to 0.1.0,which is a SemVer major change.
npm WARN audit Updating gulp-mocha to 7.0.2,which is a SemVer major change.
npm WARN audit Updating gulp to 3.9.1,which is a SemVer major change.
npm WARN audit Updating gulp-zip to 4.2.0,which is a SemVer major change.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/gulp
npm WARN   dev gulp@"3.9.1" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peerOptional gulp@">=4" from [email protected]
npm WARN node_modules/gulp-mocha
npm WARN   dev gulp-mocha@"7.0.2" from the root project
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/gulp
npm WARN   peerOptional gulp@">=4" from [email protected]
npm WARN   node_modules/gulp-mocha
npm WARN     dev gulp-mocha@"7.0.2" from the root project
npm WARN deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to at least constantinople 3.1.1
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: Deprecated, use jstransformer

added 142 packages, removed 179 packages, changed 56 packages, and audited 1539 packages in 22s

141 packages are looking for funding
  run `npm fund` for details

# npm audit report

constantinople  <=3.1.0
Severity: critical
Sandbox Bypass Leading to Arbitrary Code Execution in constantinople - https://github.com/advisories/GHSA-4vmm-mhcq-4x9j
Depends on vulnerable versions of uglify-js
No fix available
node_modules/constantinople
  jade  >=0.30.0
  Depends on vulnerable versions of constantinople
  Depends on vulnerable versions of transformers
  Depends on vulnerable versions of with
  node_modules/jade
    gulp-jade  *
    Depends on vulnerable versions of jade
    node_modules/gulp-jade

lodash  <=4.17.20
Severity: critical
Command Injection in lodash - https://github.com/advisories/GHSA-35jh-r3h4-6jhm
Prototype Pollution in lodash - https://github.com/advisories/GHSA-jf85-cpcp-j695
Regular Expression Denial of Service (ReDoS) in lodash - https://github.com/advisories/GHSA-x5rq-j2xg-h7qm
Prototype Pollution in lodash - https://github.com/advisories/GHSA-fvqr-27wr-82fm
Prototype Pollution in lodash - https://github.com/advisories/GHSA-p6mc-m468-83gw
fix available via `npm audit fix`
node_modules/globule/node_modules/lodash
  globule  <=1.1.0
  Depends on vulnerable versions of lodash
  Depends on vulnerable versions of minimatch
  node_modules/globule
    gaze  0.4.0 - 1.0.0
    Depends on vulnerable versions of globule
    node_modules/gaze
      glob-watcher  <=2.0.0
      Depends on vulnerable versions of gaze
      node_modules/glob-watcher

lodash.template  <4.5.0
Severity: critical
Prototype Pollution in lodash - https://github.com/advisories/GHSA-jf85-cpcp-j695
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/lodash.template
  gulp-util  >=1.1.0
  Depends on vulnerable versions of lodash.template
  node_modules/gulp/node_modules/gulp-util
    gulp  2.6.1 - 3.9.1
    Depends on vulnerable versions of gulp-util
    Depends on vulnerable versions of vinyl-fs
    node_modules/gulp

minimatch  <3.0.2
Severity: high
Regular Expression Denial of Service in minimatch - https://github.com/advisories/GHSA-hxm2-r34f-qmc5
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/glob-stream/node_modules/minimatch
node_modules/globule/node_modules/minimatch
  glob  3.0.0 - 5.0.14
  Depends on vulnerable versions of minimatch
  node_modules/glob-stream/node_modules/glob
  node_modules/globule/node_modules/glob
    glob-stream  0.2.0 - 5.2.0
    Depends on vulnerable versions of glob
    Depends on vulnerable versions of minimatch
    node_modules/glob-stream
      vinyl-fs  <=1.0.0
      Depends on vulnerable versions of glob-stream
      node_modules/vinyl-fs
        gulp  2.6.1 - 3.9.1
        Depends on vulnerable versions of gulp-util
        Depends on vulnerable versions of vinyl-fs
        node_modules/gulp
  globule  <=1.1.0
  Depends on vulnerable versions of lodash
  Depends on vulnerable versions of minimatch
  node_modules/globule
    gaze  0.4.0 - 1.0.0
    Depends on vulnerable versions of globule
    node_modules/gaze
      glob-watcher  <=2.0.0
      Depends on vulnerable versions of gaze
      node_modules/glob-watcher

uglify-js  <=2.5.0
Severity: critical
Incorrect Handling of Non-Boolean Comparisons During Minification in uglify-js - https://github.com/advisories/GHSA-34r7-q49f-h37c
Regular Expression Denial of Service in uglify-js - https://github.com/advisories/GHSA-c9f4-xj24-8jqx
No fix available
node_modules/transformers/node_modules/uglify-js
node_modules/uglify-js
node_modules/with/node_modules/uglify-js
  constantinople  <=3.1.0
  Depends on vulnerable versions of uglify-js
  node_modules/constantinople
    jade  >=0.30.0
    Depends on vulnerable versions of constantinople
    Depends on vulnerable versions of transformers
    Depends on vulnerable versions of with
    node_modules/jade
      gulp-jade  *
      Depends on vulnerable versions of jade
      node_modules/gulp-jade
  transformers  2.0.0 - 3.0.1
  Depends on vulnerable versions of uglify-js
  node_modules/transformers
  with  1.1.0 - 2.0.0
  Depends on vulnerable versions of uglify-js
  node_modules/with

17 vulnerabilities (7 high, 10 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

opened by catafest-work 0

npm ERR! missing script: dev

yangziyi@Yangde-MacBook-Pro ~/Desktop/vueTest $ npm run dev npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in: npm ERR! /Users/yangziyi/.npm/_logs/2019-06-01T05_01_25_011Z-debug.log yangziyi@Yangde-MacBook-Pro ~/Desktop/vueTest $ npm start npm ERR! missing script: start

npm ERR! A complete log of this run can be found in: npm ERR! /Users/yangziyi/.npm/_logs/2019-06-01T05_04_31_007Z-debug.log

opened by lilakima 0
How to run Chrome app on dev

Hi all,

I am starting to look at building a Chrome app, but I can't figure out how to develop directly as an app on dev (enjoying hot reloading and all those dev goodies).

Any hint would be appreciated :) Thanks!

opened by davodesign84 1
Error while running build:electron

Hi, I am getting error code 3221225781 when trying to build the electron app. I think the error is caused by a missing dll. Does anyone know how to get around this issue?

opened by fosco 0

Error running electron-builder

I am getting this when running npm run compress:electron:

[12:19:46] Starting 'compress:electron'...
[12:19:46] Finished 'compress:electron' after 1.66 μs
paths []
- Running electron-builder 2.11.0
Error: Required option not set
    at Object.Builder.build (/Users/hepi/git/LM2_UI2/node_modules/electron-builder/src/index.ts:49:23)
    at /Users/hepi/git/LM2_UI2/gulp/tasks/compress.js:44:13

The weird thing is that path does not exist: /Users/hepi/git/LM2_UI2/node_modules/electron-builder/src/index.ts I mean the src folder does not exist.

So I can't see what kind of Error it is.

opened by hepiyellow 0

Releases(v0.7.1)

v0.7.1(Feb 15, 2016)
Use webpack-hot-middleware in order to see building in the console.

Add Gulp watch tasks.

Update ESLint rules and use enzyme@2 api.

Source code(tar.gz)
Source code(zip)
v0.7.0(Jan 24, 2016)

Now build also cordova apps.
Source code(tar.gz)
Source code(zip)
v0.6.0(Jan 9, 2016)
Build and develop web apps.

Build, compress and start Electron apps.

Chrome app now open web app's page in the window.

Add more modularity for the gulp tasks.

Update eslint, babel, react and other dependencies.

Source code(tar.gz)
Source code(zip)
v0.5.1(Jan 3, 2016)
Better windows manipulations:

Move opening window from contextMenus to a separate module.

If an window already exists, focus it instead of reopening.

Listen for the windows onRemoved and remove window from the list when it is closed

Use stateless components.

Update babel, react, redux and eslint.

Use reagent for testing

Improve tests for Travis and add AppVeyor build.

Enhance webpack config.

Add alias for the extension path.

Fix unsupported parameter in latest Canary.

Source code(tar.gz)
Source code(zip)
v0.5.0(Nov 27, 2015)
Breaking changes

Removed browser-redux-bg and browser-redux-sync.

The extension's popup, windows and tabs now refer the store from the background page. So, now we have one store for the whole application, except content scripts.

No more auto rehydratations.

Each content script has its store, and it can be synchronized with the application (background store) and other content scripts. Unlike rehydratations, we synchronize actions not states. So it may have even different structure of the states.

No more sending actions to the background.

The current implementation breaks firefox support, but hopefully will be implemented soon. It should be tracked in #12.

New modules

redux-notify - a redux middleware for specifying a list of actions, which trigger dispatching of other actions. So it would be easy to specify which actions to be syncronized, and the actions responsible for synchronizing.

crossmessaging - a messaging layer implemented in the background and content scripts. It aims to be crossbrowser in the future.

chrome-storage-local for working with chrome.storage.local, and will have a fallback to localStorage (localForage).

Source code(tar.gz)
Source code(zip)
v0.4.1(Nov 8, 2015)
Get store asynchronously with the initialValue from the storage

New persist store

Move combineReducers from browser-redux-bg

Fix compress tasks

Source code(tar.gz)
Source code(zip)
v0.4.0(Oct 27, 2015)
Breaking Changes

React 0.14.x support

Source code(tar.gz)
Source code(zip)
v0.3.1(Oct 23, 2015)
Build WebExtensions for Firefox.

Source code(tar.gz)
Source code(zip)
v0.3.0(Oct 20, 2015)
Split the functionality into modules:

browser-redux-sync: states syncing module.

browser-redux-bg: messaging module - send redux actions (from popup, windows or inject pages) to be called in the background by their function name.

Source code(tar.gz)
Source code(zip)
v0.2.2(Oct 19, 2015)
Update the internal dependencies.

Increase timeout for tests.

Source code(tar.gz)
Source code(zip)
v0.2.1(Oct 17, 2015)

Added tests for React app, Chrome app and extension.
Source code(tar.gz)
Source code(zip)
v0.2.0(Oct 14, 2015)
Build Chrome apps, not only extensions.

Redux devTools can be used for the background script as well.

Use chrome.storage.local instead of window.localStorage for persisting states and syncing, thanks to @rt2zz.

There are no more actions called 'commands' (as it is redundant), just a CALL_IN_BG action with bg function, using as the argument the function name to be called in the background. Example: bg('increment'). More details here.

Fixed hot-reloading, thanks to @jhen0409.

Source code(tar.gz)
Source code(zip)
v0.1.0(Oct 6, 2015)

Initial public release.

Use for building Chrome extensions only.
Source code(tar.gz)
Source code(zip)

Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

Related tags

Overview

CrossBuilder

Structure

CrossBuilder included libraries

Installation

Development

React/Flux hot reload

Debug with Redux DevTools

Build web app

Build Electron app

Build Chrome app

Build Chrome extension

Build Firefox extension

Build & Run Cordova app

Build & Compress

Load

Test

Roadmap

LICENSE

Comments

My understanding how badges currently work

Possible alternative

Releases(v0.7.1)

v0.7.1(Feb 15, 2016)

v0.7.0(Jan 24, 2016)

v0.6.0(Jan 9, 2016)

v0.5.1(Jan 3, 2016)

v0.5.0(Nov 27, 2015)

Breaking changes

New modules

v0.4.1(Nov 8, 2015)

v0.4.0(Oct 27, 2015)

v0.3.1(Oct 23, 2015)

v0.3.0(Oct 20, 2015)

v0.2.2(Oct 19, 2015)

v0.2.1(Oct 17, 2015)

v0.2.0(Oct 14, 2015)

v0.1.0(Oct 6, 2015)

Owner

Mihail Diordiev

Get started with Chrome extensions development using webpack, Typescript, Sass, and more

A boilerplate for a Redux-React 'Cordova' application because react native is too new to use in prod. It also has Babel, Webpack and Gulp

A vite plugin for generating cross browser platform, ES module based web extensions.

This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.

Electron-mirror - Electron application for Smart Mirror using React via the electron-react-boilerplate repository.

Ext-react - A starter repo for building browser extensions with React and Typescript

Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh.

Create Chrome Extension (.crx) - Next generation chrome extension generater

📚 Learn React + Redux by building a SoundCloud Client. Full tutorial included. Source Code for main tutorial but also extensions included.

An Electron boilerplate featuring typescript, react, webpack, tailwind and redux - ready to use!

Electron-react-template - Electron React Template uses React Router and Styled Components

React-electron - dagimsolomon: minimalstic setup of Reactjs with electron

:electron: Electron + Vite + React + Sass boilerplate.

Build-electron - Use ES modules in Electron

Vite-solid-electron - A simple Vite, SolidJS, Electron integration template

Electron-app - A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript

Minimal Electron boilerplate built with Typescript, Webpack 5 and Babel 7

A react scaffold with redux and its best practice

Modularization best practice to common web development scenarios, applies to vue/react/... any framework