Webpack Support via extension.config.js#

Warning: This feature is a work in progress and may be incomplete or subject to change. If you see an error or something that could be improved, please make a pull-request. The link that documents this feature can be found at the bottom of the page.

The extension.config.js file enables developers to adjust the behavior of Extension.js. This configuration file provides flexibility by enabling browser-specific configurations, command customization, and support for the massive ecosystem of webpack loaders and plugins.

How Does It Work?#

Adding a extension.config.js file at the same level as your manifest.json file will extend the capabilities of Extension.js. The config file includes the following keys:

Webpack Configuration#

The config key allows you to modify the default webpack configuration. This gives you the power to add additional loaders or plugins:

config: (config) => {
  config.module.rules.push({
    test: /\.mdx$/,
    use: ["babel-loader", "@mdx-js/loader"],
  });
  return config;
};

Full Sample extension.config.js#

Below are sample configurations for the different sections in extension.config.js using webpack.

Webpack Configuration Sample#

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = {
  config: (config) => {
    config.plugins = [
      ...config.plugins,
      new NodePolyfillPlugin({
        additionalAliases: ["process"],
      }),
    ];
    return config;
  },
};

The extension.config.js types are defined here.

Best Practices#

• Use the extension.config.js file: Leverage the extension.config.js file to customize your extension's behavior.
• Separate browser-specific configurations: Keep browser-specific configurations in the browser key.
• Customize commands: Use the commands key to adjust the behavior of commands like dev, preview, and build.

Next Steps#

• Learn more about the Browsers Available.