Developer Guides

Adding Page Support

In order to add page support, you will need to create a new Page class in the pages folder. This Page class is mainly used to detect the anime and the episode. You can use the other implemented pages for completed examples.

Adding page support consists of:

1. Creating a new folder with the name of the page you want to support in the pages folder
2. Creating an index.ts file containing an implementation of the Page class
3. Creating a metadata.json file and adding the page URLs
4. Registering the new page in the PageFactory class

Creating the Page class

The Page interface outlines all the methods which are used when detecting the anime and episode number used to retrieve the skip times. The BasePage class implements the applyRules() and getMalId() functions. You must extend the BasePage class and implement the getTitle(), getIdentifier() and getRawEpisodeNumber() functions.

The general layout of a page class will look like the following:

import BasePage from '../base_page';

class PageName extends BasePage {
  constructor(hostname: string, pathname: string, document: Document) {
    super(hostname, pathname, document);
  }

  getTitle() {
    ...
  }

  getIdentifier() {
    ...
  }

  getRawEpisodeNumber() {
    ...
  }
}

The getTitle() is used as a backup to MALSync's API. If the anime information cannot be found using the MALSync API, this title will be used to search the AniList database for possible matches. This title should be the title with spaces and can be in English or Romanized Japanese. In general this can be found somewhere on the page and you would use document query selectors to retrieve the title. Ensure that this title does not include the episode number in it e.g. ... Episode 10.

The getIdentifier() is used to query the MALSync API. It has to be in the form which MALSync uses. If you are unsure what the identifier looks like for the page you want to support, you can take a look at the database backup. In general, the identifier can be found in the URL of the website e.g. AniMixPlay. However, this is not always the case e.g. Crunchyroll where the identifier comes from the title and it is URL encoded twice.

The getRawEpisodeNumber() is used to retrieve the skip time for a specific episode. This is also generally found in the URL e.g. AniMixPlay. This is the most common and easiest case, but they can also be found on the page and can be retrieved using document query selectors. We should always prefer getting the episode number in the URL as it is the most stable. If it is not available, you can other methods of getting the episode number.

Adding the Page URLs

You should create a metadata.json in the same folder you created the Page class. This json file should adhere to the following interface.

interface Metadata {
  page_urls: string[];
}

The page_urls property contains all of the possible domains that the website uses. For example if the website's domain is https://example.com and the streams appear in the /watch endpoint, then you would add the *://example.com/watch/* in this property. The page URLs should adhere to the match patterns specification.

The completed example metadata.json would look like the following:

{
  "page_urls": ["*://example.com/watch/*"]
}

If the page domain changes, simply add more domains in the page_urls array.

// TODO: Registering the New Page