Setup development environment

Setup environment

Firstly, clone the project repository:

git clone https://github.com/web-scrobbler/web-scrobbler.git
cd web-scrobbler

Then, install dependencies; they can be installed in a following way:

npm install

If you are running a non-x64 system, you might get a node-gyp error while running npm install due to node-canvas not having a prebuilt binary and requiring some external dependencies. See the compiling section in the node-canvas readme for detailed instructions on installing dependencies according to your OS. Try rerunning npm install after installing dependencies.

The minimal Node.js version is specified in the .nvmrc file. We recommend using mise which will make it easier for you to manage multiple node versions and switching versions between projects.

Make sure to enable this configuration flag:

mise settings add idiomatic_version_file_enable_tools node

Further reading.

Build and pack the extension

Although the extension can be used as an unpacked one w/o any compilation process, it's recommended to build it to apply browser-specific changes. You can build the extension by a following way:

npm run build firefox
# or
npm run build chrome
# or (requires xcodebuild)
npm run build safari

The built extension is located in build/{browser} directory. You can install the extension from this directory using this (Chrome), this (Firefox), or this (Safari) guide.

If you want to pack the extension in a zipball, you can use these commands:

npm run dist firefox
# or
npm run dist chrome

The target file is located in the root directory of the project.

Test changes before push

Automatically fix any formatting issues:

npm run prettierfix

And then run these commands:

# Linter checks
npm run lint

# Tests
npm run test

# Typescript issues
npm run checkts

Make sure these commands exit without errors before pushing the code. Otherwise, please fix all issues and run this command again. Note ESLint is able to fix almost all issues related to JavaScript code.

Note: The lint command may change the source code so make sure to stage any fixed changes.