-
Notifications
You must be signed in to change notification settings - Fork 22
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.
(Optional). Create a separate Chrome profile to test your extension changes (to avoid interference with the latest installed extension from the marketplace).
- Open the Extension Management page by navigating to
chrome://extensions
. - Enable Developer Mode by clicking the toggle switch next to Developer mode.
- Click the Load unpacked button and select the extension directory
You can usually view your new extension changes by simply re-opening or refreshing your current view, but for changes that affect the background script, you will have to manually click the "Reload" button next extension toggle.
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 runnpm run build
ornpm run watch
as in the instructions above -
$ web-ext run
can be run at the root of the project, will automatically usedist
- 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)