Feedback from building an extension based on your (awesome) project.

[lilobase]

Hello,
First of all, a big thank you for your incredible project !
(disclaimer, I'm a not a native english speaker... please forgive my mistakes :))
I will update this issue throughout the project with some of the modifications I made to adapt the seed.

The project I work on, is a browser extension for a french startup: http://www.lmem.net

I made this issue to share thought about building a more complexe extension based on your seed. Maybe this can be helpful for other extension creator.

[lilobase]

1. Be able to listen from browser events

My first need was to be able to dispatch action from a browser event.
To do that, I add a src/app/listeners folder to put all the necessary listeners.

Adding a listener

For example I have a listener for the web request, so I create a webRequest class which look like this:

import { webRequestLaunched } from '../actions/browsing';

class WebRequestListener {

    constructor(vAPI) { //the vAPI is a façade for the chrome api
        this.vAPI = vAPI;
    }

    listen(store) {
        this.vAPI.net.onBeforeRequest = {
            urls: [
                'http://*/*',
                'https://*/*'
            ],
            callback: (details) => {
                store.dispatch(webRequestLaunched(details))
            }};
    }
}

export default WebRequestListener;

Registering the listeners

I have created a src/app/listeners/index.js file which register all the listeners:

import WebRequestListener from './webRequest'

export default {
    init: function(vAPI, store) {
        new WebRequestListener(vAPI).listen(store);
    }
}

Then in the src/browser/extension/background/index.js I have added after initBadge the following code: listener.init(vAPI, store);

[lilobase]

2. Having different views/context for the contentScript and Popup

In our future extension, some configuration will be made through the popup.
To do this I made a folder by context in the src/app/containers folder:

containers/
  PopUp/
    Root.js
    App.js
  ContentScript/
    Root.js
    App.js
... 

With this structure I am able to build very different view for each part of the extension.

[zalmoxisus]

Hey,

That's an amazing idea to share experience of implementation here! Thanks a lot for sharing it!

I use this boilerplate for redux-devtools-extension and for remotedev-app. The interesting thing about them is that though they're separate projects, redux-devtools-extension reuses remotedev-app by importing it. Other interesting things that can be found there are rendering into Chrome devtools' and using page action instead of browser action.

More implementations will come later.