Skip to content

Development with web‐ext & WebExtWebpackPlugin

Jump to bottom
Alessia Bellisario edited this page Sep 20, 2023 · 1 revision

For cross-browser development, we rely a modified version of the WebExtWebpackPlugin that hooks into the build process.

To develop with Firefox, run the following command:

npm run firefox

For Chrome, run the following command:

npm run chrome

Running either of these commands will:

  • Build and bundle the extension and application
  • Use webpack --watch to watch source files for changes
  • Install the extension in the browser
  • Open the targeted browser window to localhost:3000 (the sample application)
  • Rebuild and reload the extension when the source files are changed

Note that even though the extension is rebuilt and reloaded, a hard refresh is still required. Hot reloading is not an option for web extensions.

Development defaults

Defaults can be found and modified in the WebExtPlugin. You might want to do so if you'd like the targeted browser to open to a different address or to turn on lintOnBuild.

Clone this wiki locally