Skip to main content

Installation

  • Unpack the zip file.
  • Go inside the folder and open a command prompt or terminal.
  • Run npm install
  • You are now good to go

Starting development server

Before we start the server the main part that is useful to know is that there are 2 different manifests. Manifest v2 is used for developing for firefox and manifest v3 is for chrome & chromium base browsers.

Chrome or chromium based browsers (manifest v3)

Run this command to compile code with manifest v3.

npm run webpack-dev

Now go to chrome extension settings and enable developer mode and load the extension

go to manage extension in chrome

Click manage extensions

Turn on developer mode

turn on developer mode

Click this button to turn on developer mode

Click the load unpacked button

click the load unpacked button

Click load unpacked


Browse to the dist/manifest-v3 folder and select it

browse to manifest-v3 and select it

Selecting extension dist folder

The extension should be loaded

the extension should be loaded

Extension is loaded

Remember to reload the extension every time the code is generated

reload the extension by clicking this button

Reload the extension by clicking this button

Firefox (manifest-v2)

For firefox you'll need to run 2 different commands, one to compile the code with manifest v2 and another to run the compiled code in firefox

To compile the code for manifest v2 run this command in a command shell. This command will generate the manifest v2 code and keep watch on code changes and recompile automatically

npm run webpack-dev-v2

In another shell run this command to launch a firefox window that loads the compiled code

npm run dev

01. run the commands for manifest v2

Running the commands


02. extension running in firefox

The extension running in firefox