Development commands

Part of the Getting started guide.

Build

You can build the project locally by running:

npm run build

Or this, to watch for changes and rebuild automatically:

npm run watch

NOTE: the build tool does not do "hot-reloading". You will have to refresh the page you're on to see any changes.

This ENV will make the build faster by excluding most icons and maybe other heavy dependencies:

DEV_SLIM=true npm run watch

The watch script will notify you every time it builds the extension. To silence the notifications, use:

DEV_NOTIFY=false npm run watch

If you do want to be notified, but are not receiving notifications:

• Make sure you do not have notifications muted (Do Not Disturb mode must be turned off)
• In your system preferences, make sure terminal-notifier has permission to send system notifications

Manifest v3

During the migration to MV3, you can build a MV3 extension by setting the env MV=3 inline or in .env before building it. For example:

MV=3 npm run watch

Storybook

To run the Storybook:

npm run storybook

Automated tests

npm test

Linting

This command will show if there are any lint errors (but not warnings) that must be resolved:

npm run lint -- --quiet

This command will attempt to automatically fix those errors:

npm run lint -- --quiet --fix

React Dev Tools

Chrome Extension

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Stand-alone

The React Dev Tools Chrome Extension cannot be used to inspect dev tools panels. To do so, you can use react-devtools which provides the dev tools as a stand-alone Electron application:

npm i -g react-devtools

Uncomment the script tag in the pageEditor.html file.

Then, to run the dev tools application:

npx react-devtools

Dependency updates

Storybook isn't updated by dependabot, so to update it manually you can run these commands and open a PR:

DEPS=$(npm query ':root > [name^="@storybook"]' | jq .[].name -r | tr '\n' ' ')
npm rm $DEPS 
npm install -D $DEPS