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

Overview

CrossBuilder

Build Status Build status Windows bitHound Score Dependency Status devDependency Status

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

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

  1. Install global tools: npm install -g cordova.
  2. Add your cordova platform by running cordova platform add %PLATFORM% (where %PLATFORM% is the platform you deploy for: android and more).
  3. 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

    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

    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

    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

    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

    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

    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

    Upgrade react to 0.14

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

    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]
    
    screen shot 2016-03-10 at 9 39 40 am

    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?

    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

    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

    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

    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 [email protected]"3.9.1" from the root project
    npm WARN
    npm WARN Could not resolve dependency:
    npm WARN peerOptional [email protected]">=4" from [email protected]
    npm WARN node_modules/gulp-mocha
    npm WARN   dev [email protected]"7.0.2" from the root project
    npm WARN
    npm WARN Conflicting peer dependency: [email protected]
    npm WARN node_modules/gulp
    npm WARN   peerOptional [email protected]">=4" from [email protected]
    npm WARN   node_modules/gulp-mocha
    npm WARN     dev [email protected]"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 gulp[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

    npm ERR! missing script: dev

    [email protected] ~/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 [email protected] ~/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 螢幕快照 2019-06-01 下午1 22 44

    opened by lilakima 0
  • How to run Chrome app on dev

    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

    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

    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)

  • v0.7.0(Jan 24, 2016)

  • 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

    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)

  • 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)

    1. Build Chrome apps, not only extensions.
    2. Redux devTools can be used for the background script as well.
    3. Use chrome.storage.local instead of window.localStorage for persisting states and syncing, thanks to @rt2zz.
    4. 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.
    5. Fixed hot-reloading, thanks to @jhen0409.
    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(Oct 6, 2015)

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

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

Sebastian Szczepański 140 Sep 28, 2022
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

react-redux-cordova-boilerplate A boilerplate for a Redux-React Cordova application using Babel, Webpack and Gulp Development Run npm install Run npm

Inderpal Singh 20 Oct 24, 2021
A vite plugin for generating cross browser platform, ES module based web extensions.

@samrum/vite-plugin-web-extension A vite plugin for generating cross browser platform, ES module based web extensions. Features Manifest V2 & V3 Suppo

Ruben Medina 48 Sep 30, 2022
Ext-react - A starter repo for building browser extensions with React and Typescript

Web Extensions React starter A starter repo for building browser extensions with

Okanovic Dragan 30 Sep 13, 2022
This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.

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

Bronathan 37 Sep 21, 2022
Electron-mirror - Electron application for Smart Mirror using React via the electron-react-boilerplate repository.

Electron-Mirror Electron application for Smart Mirror using React via the electron-react-boilerplate repository. Starting Development Start the app in

null 1 Feb 8, 2022
Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh.

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

Heikki Lotvonen 2 Oct 6, 2021
Create Chrome Extension (.crx) - Next generation chrome extension generater

Create Chrome Extension (.crx) Next generation chrome extension generater ⚡️ Lightning Fast HMR(use vite2) ?? Multiple Framework Support ?? Optimized

Yalda 57 Oct 2, 2022
📚 Learn React + Redux by building a SoundCloud Client. Full tutorial included. Source Code for main tutorial but also extensions included.

react-redux-soundcloud I wrote a huge tutorial about setting up your own SoundCloud Client in React + Redux. Additonally you can find a real world exa

Robin Wieruch 281 Aug 18, 2022
An Electron boilerplate featuring typescript, react, webpack, tailwind and redux - ready to use!

A secure, modular, and easy to use Electron Forge boilerplate featuring Typescript, React, Webpack, TailwindCSS, Redux and persistance (with redux-persist support)

Daniel 36 Oct 4, 2022
Electron-react-template - Electron React Template uses React Router and Styled Components

Electron React Template This template uses Create React App, Electron and Electr

Pedro Bzz 7 May 17, 2022
React-electron - dagimsolomon: minimalstic setup of Reactjs with electron

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 2 Jan 23, 2022
Build-electron - Use ES modules in Electron

build-electron Use ES modules in Electron now! build-electron is a simple build

Mikael Finstad 16 Jun 23, 2022
Vite-solid-electron - A simple Vite, SolidJS, Electron integration template

vite-solid-electron Overview Very simple Vite, SolidJS, Electron integration tem

Christian Hansen 20 Sep 30, 2022
Electron-app - A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript

Electron App ??  A ready-to-go with a well-thought-out structure Electron app bo

Dalton Menezes 90 Oct 5, 2022
Minimal Electron boilerplate built with Typescript, Webpack 5 and Babel 7

electron-webpack-boilerplate Minimal Electron Starter Kit built with Typescript, React, Webpack 5 and Babel 7 To create a JS library, check out js-lib

Francisco Hodge 10 Aug 16, 2022
React-Typescript-Webpack was config with React, Typescript, and Webpack without CRA. Faster to start your next react project.

Start your react typescript project with manual webpack config in seconds Flexible to control webpack, easy to deploy Keywords: React Starter, Webpack

jdn97 58 Aug 9, 2022
🚀 React & TypeScript Starter for developing web extensions with hot reload

A web extension (Manifest V3) starter kit with hot reload support, built with React, Typescript, Redux, Vite, ESLint, Prettier, TailwindCSS, Jest and more!

Sinan Bekar 6 Sep 12, 2022
Modularization best practice to common web development scenarios, applies to vue/react/... any framework

Vite How-to Guide There are plenty of tutorials on how to use vite to compile code written in latest and hottest technology, this guide is different.

Tao Wen 150 Sep 18, 2022