Is it possible to use ES6 in a Chrome Extension?

Question

I've just started building a Chrome Extension and was curious if I'd be able to use ES6 with it.

In the following compatibility table, Chrome 41 shows that it currently has 41% compatibility. A couple key features like class are not included in that 41% and so I was curious if there were other options, such as transpiling.

I've already used Babel, an ES6 transpiler, with Ember CLI and it has worked great.

However, I find the build process a bit different when developing a chrome extension. For example, when testing an extension I'm developing, I load it into the browser via the "Load unpacked extension" option which points directly to the source code.

For the extension I am building, I am using the yeoman chrome extension generator as a base. Ideally, I'd like to be able to set up some sort of grunt task that hooks into the debug task and then transpiles the code any time it changes to a separate directory. From there, I could load the contents of that directory via the load unpacked extension option. However, I'm not exactly sure how to do this or if there are other options instead.

Answer 1

Update This answer was originally written in 2015. The compatibility table link shows Chrome, FF, Edge, and Safari are more compatible than Babel now.

Chrome 49+, FF 45+ may not benefit from Babel. Other browsers, may need transpiling.

Original

I am also currently developing a Chrome Extension in ES6. Your questions seems to be more general so I try to answer this based on my experiences.

In the following compatibility table, Chrome 41 shows that it currently has 41% compatibility. A couple key features like class are not included in that 41% and so I was curious if there were other options, such as transpiling.

This is true. You can easily use all existing ES6 Features without worries and transpiling. Every new Chrome release has some more features, which makes it quite exciting to wait ;) Chrome 44 now covers 48%, including class.

However, if you want go full ES6 then a compiler is still the best option. You don't have to worry about supported features and simply write ES6 code, which will be compiled to proper ES5 code.

My current setup is Browserify (via grunt-browserify) using Babelify as compiler. Browserify enables you to also use ES6 Modules, which give you the full power of ES6.

Gruntfile.js

browserify: {
    dist: {
        options: {
            transform: [
                ['babelify', { loose: 'all' }]
            ],
            browserifyOptions: { debug: true },
            exclude: ''
        },
        files: {
            'path/to/es5/app.js': ['path/to/es6/**/*.js']
        }
    }
}
// Then it will be uglified and copied to dist.

That means my Extension still runs with ES5 code though, but that doesn't matters much for me as I still can write in ES6.

If you really want to use available ES6 features (which I did before), it can be quite frustrating/annoying as you always have to look up whats possible in Chrome and mostly it's waiting for a new Chrome release.

However, I find the build process a bit different when developing a chrome extension. For example, when testing an extension I'm developing, I load it into the browser via the "Load unpacked extension" option which points directly to the source code.

Well it's not really different to any other project I think. Depending on what Chrome specific features you are using, you could either just develop your project and later test it via loading it into the browser or just link the "Load unpacked extension" path to your generated dist/build/public folder. Doing that, it's always the current state. This works for me the best.

Hope that helps a bit :)