HaNdTriX/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Hi
I am Henrik and I want to create a webextension generator that supports chrome, firefox, opera and safari. The stack I would like to use  will contain:

yeoman for scaffolding
gulp as a build system
webpack for script compilation (modules, env variables, polyfills)
npm as a module system
and babel for ES2015

I already created a generator for chrome but now I am thinking to move it into a new repository and add tasks for other browser vendors.
The idea behind it, is to stick to the chrome extension api and automatically shim the missing apis in other browsers via webpacks provide plugin.
Example webpack polyfill config

var webpackPlugins = [];

if (vendor === 'safari') {
  // Automatically add polyfills for safari
  plugins.push(
    new webpack.ProvidePlugin({
      'chrome.i18n': 'polyfill-chrome-api-safari/i18n',
      'chrome.runtime': 'polyfill-chrome-api-safari/runtime',
      'chrome.extension': 'polyfill-chrome-api-safari/extension',
      'chrome.webrequest': 'polyfill-chrome-api-safari/webrequest',
      'chrome.commands': 'polyfill-chrome-api-safari/webrequest',
      ...
    })
  )
} else if (vendor === 'mozilla') {
  // Automatically add polyfills for safari
  plugins.push(
    new webpack.ProvidePlugin({
      'chrome.commands': 'polyfill-chrome-api-firefox/commands',
      ...
    })
  )
}
....

The workflow for the developer will be pretty nice, since he just has to develop his extension for https://developer.chrome.com/extensions/api_index. The build tool will shim the missing apis automatically (so far possible).
Example
...
chrome.i18n.getMessage('someKey');
...

if you later run
gulp build --vendor=safari

webpack will detect chrome.i18n and include the polyfill.
What needs to be done?


 create polyfill packages for the different vendors similar to port.js but with higher modularity.
 create the generator (maybe fork https://github.com/HaNdTriX/generator-chrome-extension-kickstart?)

What I already got

As I mentioned I created a generator for chrome that already supports:

 packaging
 livereload
 ES2105
 modules
 css, less, sass
 environment variables
 npm as package manager
 ...

All the logic is hackable so the developer is able to easily extend the stack if he needs to (e.g.: add postcss).
Feedback

I know this project seem big. There is a lot to do to implement but I think it is worth it.
The reason why I am writing this is to collect early feedback and find developers who might participate.

Would you use such a generator.
Do you think using polyfills is the right approach?
Do you like it?

Negative and positive Feedback welcome!
Thanks a lot
Henrik