happy-ferret / webextension-toolbox Goto Github PK

Small cli toolbox for creating cross-browser WebExtensions.

If you want to get started quickly check out the yeoman generator for this project.

Browser Support

• chrome (auto polyfilled)
• opera (auto polyfilled)
• firefox
• edge

Features

...
"name": "my-extension"
"__chrome__key": "yourchromekey"
...

...
"name": "my-extension"
"key": "yourchromekey"
...

...
"name": "my-extension"
...

Usage

Install

$ npm install -g webextension-toolbox@next

Development

• Compiles the extension via webpack to dist/<vendor>.
• Watches all extension files and recompiles on demand.
• Reloads extension or extension page as soon something changed.
• Sets process.env.NODE_ENV to development.
• Sets process.env.VENDOR to the current vendor.

Syntax

$ webextension-toolbox dev <vendor> [..options]

Examples

$ webextension-toolbox dev --help
$ webextension-toolbox dev chrome
$ webextension-toolbox dev firefox
$ webextension-toolbox dev opera
$ webextension-toolbox dev edge

Build

• Compile extension via webpack to dist/<vendor>.
• Minifies extension Code.
• Sets process.env.NODE_ENV to production.
• Sets process.env.VENDOR to the current vendor.
• Packs extension to packages.

Syntax

$ webextension-toolbox build <vendor> [..options]

Examples

$ webextension-toolbox build --help
$ webextension-toolbox build chrome
$ webextension-toolbox build firefox
$ webextension-toolbox build opera
$ webextension-toolbox build edge

Browser API

Always use the webextension browser api. Webextension-Toolbox will polyfill it for you in chrome and opera.

Entry points

All javascript files located at the root of your ./app or ./app/scripts directory will create a seperate bundle.

Customizing webpack config

In order to extend our usage of webpack, you can define a function that extends its config via webextension-toolbox.js.

// This file is not going through babel transformation.
// So, we write it in vanilla JS
// (But you could use ES2015 features supported by your Node.js version)
module.exports = {
  webpack: (config, { dev, vendor }) => {
    // Perform customizations to webpack config

    // Important: return the modified config
    return config
  }
}

FAQ

What is the difference to web-ext?

If want to develop browser extensions for Firefox only web-ext might be a better fit for you, since it supports, extension signing, better manifest validation and auto mounting.

Nevertheless if you want to develop cross browser extensions using

• the same development experience in every browser
• a single codebase
• react
• and custom webpack configuration

webextension-toolbox might be your tool of choice.

License

Copyright 2018 Henrik Wenz

This project is free software released under the MIT license.