First clone the repository to a folder.

Linux:

npm install   
npm run build

Windows:

npm install   
npm run build:win

Additionally the following script has to be executed if you want to test it on firefox. Do not execute this if you are using a chromium based browser for testing:

npm run build:webextension:firefox

The userscipt and webextension can then be found in the dist folder.

After the initial build it possible to use one of the following commands for faster and automatic building on file change.

npm run dev:userscript

The extension has 2 separate parts. But the content is probably the most important one for you.

npm run dev:webextension:content
npm run dev:webextension:background

🛑 Please do not update things like the readme, because they are autogenerated

Example: https://github.com/MALSync/MALSync/blob/master/src/pages/MangaNato/
Quicksearch Example: https://github.com/MALSync/MALSync/blob/master/src/pages/Mangadex/meta.json#L2
You are free to add support for new pages, but you will somewhat be responsible to fix it. Just let me know beforehand in Discord.

File Structure:
The interface for the page script can be found in the pageInterface in this file (attributes with a ? are optional).
Just create a new folder for the page here, just like the other pages are implemented and then import it in this file.
The matching urls can be defined in the meta.json file. Keep in mind that when changing the urls you will have to execute npm run assets or npm run assets:firefox for firefox. Restarting the userscript dev script is enough for the urls to take effect.

Page interface:
The script is split into two parts the overview and sync part. The sync page is where normally the video player is found. The overview page normally contains the episode list and the MAL-Sync UI is loaded there. The function isSyncPage and isOverviewPage decides what what page type is currently loaded.

init Function:
The init function controls the general timings. The page.handlePage() should be called when the website is ready for starting the sync/overview checks. The function can be called multiple times if the page has no reload between episodes for example.
Normally it is enough to wait for the page load, but sometimes when the page heavily relies on javascript it could be that some data is still not loaded in the dom. Then you could use the utils function utils.waitUntilTrue(function(){return condition;}, function(){...}) to wait until the dom elements exists. If the website loads informations over ajax without page reloads. You can use the function utils.urlChangeDetect(function() {...}) to help with that.

tests.json:
Please add a test file with at least one testcase for both the overview and sync page. If the page has some edgecases it is a good idea to add them too. The test can be executed with npm run test:headless <name in tests.json>. You do not need to verify the tests. If it does not work just commit it as is. We will make sure the test runs correctly after the pull request is created. So expect the page test to fail until the first review from our side.

Do not commit changes from README.md, pages.md, pages/list.json when adding/updating a page.