Skip to main content

@exodus/browser-extension-base

This package serves as a foundation framework for the Exodus Browser Extensions ecosystem. It provides common build configuration, libraries, and tools.

The primary goal is to enable the development of browser extension projects by building upon this framework.

Installation​

yarn add @exodus/browser-extension-base --dev

Setup​

This package aims to be agnostic and configurable. To utilize this package, a project should define its specific configuration using an app.config.js file at the project's root.

config.manifest​

The manifest property specifies the location of the manifest file. By default, it looks for /src/manifest.json.

module.exports = {
  manifest: './src/manifest.js', // It's also possible to pass JS files
}

For more complex applications, you might want to specify different manifests depending on the environment being bundled. This can be easily achieved by providing an object where each key represents the environment name, and the corresponding value is the manifest file to use for that case.

module.exports = {
  manifest: {
    development: './src/manifests/development.js',
    production: './src/manifests/production.js',
  },
}

config.entrypoints​

An extension comprises multiple processes with separate lifecycles. Each process requires a different entrypoint. Typically, an application has a service worker (background) and one or more renderer processes (UIs). Each entrypoint should have a unique name, specify the process type, and indicate the entrypoint file.

module.exports = {
  entrypoints: [
    {
      name: 'index',
      processType: 'renderer',
      entry: './src/ui/index.js',
      options: { splitChunks: true },
    },
    {
      name: 'background',
      processType: 'worker',
      entry: './src/background',
    },
  ],
}

config.assets​

This allows for copying static files to the distribution. When providing only a string, the basename will be placed in the distribution directory.

By providing an object with the properties from and to, you can define custom destinations inside the distribution directory.

module.exports = {
  assets: [
    // copies 'public/docs.html' to 'dist/docs.html'
    'public/docs.html',
    // copies 'public/locales/en.json' to 'dist/_locales/en.json'
    {
      from: 'public/locales/en.json',
      to: '_locales/en.json',
    },
  ],
}

config.webpack​

@exodus/browser-extension-base utilizes Webpack to build the application in both production and development environments. It includes a basic webpack configuration necessary to bundle a simple application. However, each client can extend it as needed by providing a webpack function in the config file. This function is invoked for each entrypoint, allowing independent customization.

js

module.exports = {
  webpack: (config, entrypoint) => {
    // Perform any modification to webpack config
    return config
  },
}

CLI​

browser-extension CLI provides a set of commands to develop and build your browser extension.

Usage​

All interactions with browser-extension are of the form

browser-extension [command] [options]

Help Usage​

To display basic commands and arguments

browser-extension --help

Available Commands​

  • dev [options]: Used for development. Monitors entrypoints and rebuilds them when code changes, facilitating iterative development. It does not support hot reloading yet.
  • build [options]: Builds the application for production. The output is located in the /dist folder.

Available Options​

  • --config <value...>: Provide path to an app configuration file e.g. ./app.config.js.

Babel​

Scripts within this project automatically recognize babel.config.js files located at the project root. These configuration files are used to build both the production and development versions of the scripts.