Loading the extension in the browser

Part of the Getting started guide.

You will always have to run npm run build or npm run watch before loading the extension.

Manually

1. Open the Extension Management page by navigating to chrome://extensions.
2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
3. Click the Load unpacked button and select the extension directory

Once loaded, you will have to manually click the "Reload" button next extension toggle every time you make changes to the extension.

Via web-ext, with auto-reload

You can use web-ext to watch for the changes and reload the extension automatically:

web-ext run                   # Opens Firefox
web-ext run --target chromium # Opens Chrome

Some information about the web-ext:

• web-ext does not build the extension. You still need to run npm run build or npm run watch as in the instructions above
• $ web-ext run can be run at the root of the project, will automatically use dist
• Any files in that folder causes the whole extension to be reloaded (some contexts like the DevTools and tabs additional need manual reloading)
• Generates a new temporary profile for each run
• The profile can be preserved, but they advise not preserving your personal profile as these profiles are less secure. Use a custom path instead
• You can use the same path for both browsers, as suggested below

web-ext run \
  --keep-profile-changes \
  --firefox-profile ~/.cache/web-ext-profile

web-ext run \
  --keep-profile-changes \
  --chromium-profile ~/.cache/web-ext-profile \
  --target=chromium

Since these commands are personalized (the path part), we suggest creating local aliases instead of adding them to package.json

A workflow for using web-ext:

• Terminal tab with npm run watch
• Terminal tab with startchrome (my alias for web-ext)