The first step is to learn the basics. Thus Tuj followed the tutorial and made his first extension. Was it an add-on? Hurray, most Mozilla subdomains now had a glaring border.

Then Tuj set out making his own extension and was annoyed by the debug process: zip the files into an xpi file, send the xpi file to firefox (developer edition), click to indicate that he was OK with unsigned add-on and watch if everything runs according to plan. Thus the proper second step is to set up development environment. Obviously Mozilla provides the tool web-ext that once run, monitors the current directory for changes and reloads the add-on to reflect the changes automatically. Way to go... except that Tuj installed it into the Windows Subsystem for Linux and it does not play well with the firefox outside the subsystem. (╯°□°)╯︵ ┻━┻ Tuj did not have nodejs installed outside the subsystem. Thus he downloaded the windows version of nodejs and npm installed web-ext. Then everything worked fine. Tuj also set up the following two environment variables to save typing.

WEB_EXT_FIREFOX: C:\Program Files\Firefox Developer Edition\firefox.exe
WEB_EXT_FIREFOX_PROFILE: %APPDATA%\Mozilla\Firefox\Profiles\randomlookingstring.dev-edition-default

Step Three: developing while learning or learning while developing? 🤔