Skip to content

Instantly share code, notes, and snippets.

@HaNdTriX

HaNdTriX/README.md

Last active May 16, 2017
Embed
What would you like to do?
Creating a webextension generator

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?

What I already got

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

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

@Mte90

This comment has been minimized.

Copy link

@Mte90 Mte90 commented Nov 8, 2015

There any news on that?

@HaNdTriX

This comment has been minimized.

Copy link
Owner Author

@HaNdTriX HaNdTriX commented Mar 22, 2016

Oh sorry for my late response.
I don't have an eye on gists ;)

I haven't developed it, since there was not enough response from other developers.
But I have updated https://github.com/HaNdTriX/generator-chrome-extension-kickstart.

It supports multible vendors, but it doesn't add any polyfills.
You'll have to write them yourself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.