Nodding Previously Managed

    browser-redux

    0.4.0 • Public • Published

    Browser App and Extension Boilerplate using Redux Actions

    Build Status bitHound Score Dependency Status devDependency Status

    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

    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 using Redux Persist, based on React Chrome Extension Boilerplate.

    Structure

    • 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.
    • 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).
    • test/chrome: tests for Chrome app and extension (using chromedriver, selenium-webdriver).

    Included

    Installation

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

    Development

    # 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

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

    Build app

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

    Build firefox extension

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

    Note that 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.

    Build & Compress ZIP file

    # 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

    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

    Install

    npm i browser-redux

    DownloadsWeekly Downloads

    1

    Version

    0.4.0

    License

    MIT

    Last publish

    Collaborators

    • zalmoxisus