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 a PageName.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. You must extend the BasePage class and implement the getMetadata(), getTitle(), getIdentifier() and getRawEpisodeNumber() functions.

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

import { BasePage } from '../base-page';
import { Metadata } from '../base-page.types';
import metadata from './metadata.json';

class PageName extends BasePage {
  static getMetadata(): Metadata {
    return metadata;
  }

  getTitle(): string {
    ...
  }

  getIdentifier(): string {
    ...
  }

  getRawEpisodeNumber(): string {
    ...
  }
}

export default PageName;

The getMetadata() used to identify which Page class should be instantiated in the PageFactory.getPage() function.

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 Romanised 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.

type Metadata = {
  pageUrls: string[];
};

The pageUrls 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:

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

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

Registering the New Page

This is the final step in adding a new page. In the PageFactory class, you should add the page constructor in the static pages variable. Try to keep the imports and pages in the array alphabetical.

For example, adding Example page with https://www.example.com as the domain would look like the following:

import globToRegExp from 'glob-to-regexp';
...
import { Example } from './Example';
...

export class PageFactory {
  static pages = [
    ...
    Example,
    ...
  ];

  ...
}

Provider Name

When calling the MALSync API, the provider name i.e. the name of the the website you're watching on, is used to find the MAL ID. Generally the provider name is the domain name with the first letter capitalised. If this is not the case, you can override this behaviour by setting the provider name class member in the constructor. For example, AniMixPlay.

Troubleshooting

After completing the previous steps, the Aniskip player buttons and skip time indicators should be injected on to the page. If not, take a look at the following troubleshooting steps.

Error: Page {pageName} not supported

This error is found in the console. This happens if the pageUrls has been successfully added but the PageFactory class is not correctly instantiating the newly created page class. Double check that the page constructor is in the pages array.

Player Injection is Not Working

If the player buttons are not being injected, this may indicate that players found on the page are not supported. You can check if the background page is making network requests to the MALSync or Aniskip API. You can do this by opening the Chrome / Firefox DevTools in the background page and opening the Network tab. If network calls are being made, this means that player domain is present in the metadata.json of the supported player but either the styles or the document query selectors used are incorrect.

If the player styles look incorrect, you can add player specific styles in the player.scss file. If you need finer grained detail, you can use domain name specific styles. The styles for the button that open the vote / submit menu are found here. For the styles for button containers itself, you can find the styles here.

If the document query selectors used are incorrect e.g. you cannot see the button but network calls are being made. You can edit the metadata.json for the player in question. The players supported can be found here.

If no network calls are being made, you will need to add the player domain URL in the metadata.json for the player in question. You will also need to update the PlayerFactory in a similar fashion to adding a new page into the PageFactory class.