mangayomi-extensions

Contributing

This guide have some instructions and tips on how to create a new Mangayomi extension on Dart extension.

Prerequisites

Before starting please have installed the recent desktop version of the mangayomi application preferably or if you want with a tablet too.

Writing your extension

  1. Open the app.
  2. Go to extension tab : 1
  3. then click + and you will see : 2
  4. Fill in the fields with your new source that you would like to create, 3 NB: only the ApiUrl field is optional then click on save
  5. you will see your new source in the extension list 4 click to open settings
  6. After click on edit code 5
  7. Finally you can now write the extension 6
    • This page contains three parts:
    • Code editor: where you will write your code
    • Fecth result: where you will test the different implemented methods by having a result in the expected format
    • Console: which will show you the logs

Once extension is ready you can relocate your code into mangayomi-extension project in a src or multisrc package Create the folder with the name of the source such as this example after go either to the anime_source_list.dart file for anime or manga_source_list.dart for the manga and import the extension then create a Pull Request.

Source

Field Description
name Name displayed in the “Sources” tab in Mangayomi.
baseUrl Base URL of the source without any trailing slashes.
apiUrl (Optional, defaults is empty) Api URL of the source with trailing slashes.
lang An ISO 639-1 compliant language code (two letters in lower case in most cases, but can also include the country/dialect part by using a simple dash character).
id Identifier of your source, automatically set in Source. It should only be manually overriden if you need to copy an existing autogenerated ID.
sourceCodeUrl contains the URL where the extension source code can be downloaded
sourceCode contains the extension source code
isManga (Optional, defaults to true) specify source type (false for anime and true for manga)
dateFormat (Optional, defaults is empty)
iconUrl The extension icon URL
version The extension version code. This must be incremented with any change to the code.
dateFormatLocale (Optional, defaults is empty)
isNsfw (Optional, defaults to false) Flag to indicate that a source contains NSFW content.

Extension call flow

a.k.a. the Browse source entry point in the app (invoked by tapping on the source name).

Latest manga

a.k.a. the Latest source entry point in the app (invoked by tapping on the “Latest” button beside the source name).

Search manga

Filters

The search flow have support to filters that can be added to a FilterList inside the getFilterList method. When the user changes the filter’s state, they will be passed to the search method, and they can be iterated to create the request (by getting the filter.state value, where the type varies depending on the Filter used). You can check the filter types available here and in the table below.

Filter Description
HeaderFilter A simple header. Useful for separating sections in the list or showing any note or warning to the user.
SeparatorFilter A line separator. Useful for visual distinction between sections.
SelectFilter A select control, similar to HTML’s <select>. Only one item can be selected, and the state is the index of the selected one.
TextFilter A text control, similar to HTML’s <input type="text">.
CheckBoxFilter A checkbox control, similar to HTML’s <input type="checkbox">. The state is true if it’s checked.
TriStateFilter A enhanced checkbox control that supports an excluding state
GroupFilter A group of filters (preferentially of the same type). The state will be a List with all the states.
SortFilter A control for sorting, with support for the ordering. The state indicates which item index is selected and if the sorting is ascending.

All control filters can have a default state set. It’s usually recommended if the source have filters to make the initial state match the popular manga list, so when the user open the filter sheet, the state is equal and represents the current manga showing.

Manga Details

Chapter pages

Episode Videos

Example sources that can help you understand how to create your source

Some functions already available and usable

http client

Return Response

- Simple request

final Client client = Client();

final res = await client.get(Uri.parse("http://example.com"));

print(res.body);

- With headers 

final Client client = Client();

final res = await client.get(Uri.parse("http://example.com"),headers:{"Referer": "http://example.com"});

print(res.body);

- With body

final Client client = Client();

final res = await client.post(Uri.parse("http://example.com"),headers:{"Referer": "http://example.com"},'body':{'name':'test'});

print(res.body);

xpath selector

Return result as List<String>

Example:

final String htmlString = '''
<html lang="en">
<body>
<div><a href='https://github.com/kodjodevf'>author</a></div>
<div class="head">div head</div>
<div class="container">
    <table>
        <tbody>
          <tr>
              <td id="td1" class="first1">1</td>
              <td id="td2" class="first1">2</td>
              <td id="td3" class="first2">3</td>
              <td id="td4" class="first2 form">4</td>
              <td id="td5" class="second1">one</td>
              <td id="td6" class="second1">two</td>
              <td id="td7" class="second2">three</td>
              <td id="td8" class="second2">four</td>
          </tr>
        </tbody>
    </table>
</div>
<div class="end">end</div>
</body>
</html>
''';


  List<String> xpathRes = xpath(htmlString,'//div/a/@href');
  print(xpathRes); // [https://github.com/kodjodevf]
  print(xpathRes.first); // https://github.com/kodjodevf

HTML DOM selector

Example:

final String htmlString = '''
<html lang="en">
<body>
<div><a href='https://github.com/kodjodevf'>author</a></div>
<div class="head">div head</div>
<div class="container">
    <table>
        <tbody>
          <tr>
              <td id="td1" class="first1">1</td>
              <td id="td2" class="first1">2</td>
              <td id="td3" class="first2">3</td>
              <td id="td4" class="first2 form">4</td>
              <td id="td5" class="second1">one</td>
              <td id="td6" class="second1">two</td>
              <td id="td7" class="second2">three</td>
              <td id="td8" class="second2">four</td>
          </tr>
        </tbody>
    </table>
</div>
<div class="end">end</div>
</body>
</html>
''';


  MDocument document = parseHtml(htmlString);
  print(document.selectFirst("a").attr("href")); // https://github.com/kodjodevf
  print(document.selectFirst("td").text); // 1

See MDocument model and MElement model to see available methods.

String utils

Crypto utils

Help

If you need a help or have some questions, ask a community in our Discord server.

This site is open source. Improve this page.