-
Notifications
You must be signed in to change notification settings - Fork 10
Developer Guides
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:
- Creating a new folder with the name of the page you want to support in the
pages
folder - Creating a
PageName.ts
file containing an implementation of thePage
class - Creating a
metadata.json
file and adding the page URLs - Registering the new page in the
PageFactory
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';
export class PageName extends BasePage {
static getMetadata(): Metadata {
return metadata;
}
getTitle(): string {
...
}
getIdentifier(): string {
...
}
getRawEpisodeNumber(): string {
...
}
}
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.
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.
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,
...
];
...
}
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.
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.
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.
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.
Need help? Join the Aniskip Discord.