Warning: Cannot modify header information - headers already sent by (output started at /home/allmanga/www/dev.php:11) in /home/allmanga/www/css/amr_style.php on line 27
All Mangas Reader

Developper Tutorial

About

AMR has been designed to be easily extended to any web site containing mangas.

To add a web site, you only have to create a js file describing the behaviour of the web site through pre defined methods. You can use jQuery to retrieve informations from the web site inside your js code.

This section describes which methods you must develop and how to integrate your js file in AMR

How to test your mirror ?

To test that your implementation of your mirror works, you can try the AMR lab. This lab automatically tests a lot of aspects which are required from your code to make your site work with AMR. Just select your mirror in the list of mirrors in the lab and click on the test button. You can test it on the existing mirrors.

If you are a developper, you can check the option "I am a developper" in the options page, it will display an icon in the popup to have a direct access to the lab.

What must you know to add support for a web site ?

To add support for a web site, you must provide me two files :

  • A javascript file which implement all the required methods described below and which will be called when a user navigates on the web site you want to be supported.
  • A png file (16x16 with transparency) : the icon of the web site.

When you choose to add support for a web site, I recommend you to know a bit of javascript and jQuery. If it is your case, you will add support for your web site within two days of work.

Initiate your new mirror

To start developping a mirror, I recommend to work in "local", i mean to copy the extension code on your computer and to modify it there. It will prevent the extension to be updated and you to loose your code.

To do this, go in the extensions directory of Google chrome :

  • For linux users (Ubuntu) : ~/.config/google-chrome/Default/Extensions/
  • For Windows users (Seven) : C:\Users\[username]\AppData\Local\Google\Chrome\User Data\Default\Extensions\
  • For Windows users (XP) : C:\Documents and Settings\[username]\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\
Then find the directory corresponding to AMR's extension id and copy it where you want on your computer.

To start implementing your mirror, download the mirror model, change the name of the file and save it in your local extension directory in the js directory. Open the file and change the name of the object in this file (MirrorClassName by default) by the name you will use.

Then you must modify the extension so it will recognize your mirror as one of its mirrors. To do that, open the "js/mgEntry.js" file. The first object in this file is a json array describing all existing mirrors in the extension. Add yours :

{objectName: "The name of the object that correspond to your mirror (in your js file : var XXX = {..., it is the XXX)",
jsFile: "Name of the js file to load",
webSites: [List of urls in which your mirror will be loaded],
}

Then you must configure Chrome to load your local extension instead of the real one. In the extensions tab, desactivate AMR. Then, click on the "Load unpacked extension" button and select the directory where your local extension is.

That's all !!

Implementing support for a web site

The js file

This section describes all different methods and attributes you must implement in your code. The model downloaded before contains many comments on what you must modify and parts of code you musn't need to change.

Attributes of the class

There are three attributes to fill :

  • mirrorName : contains the name of the mirror which will be displayed
  • canListFullMangas : true if the implementation can return a list of all the existing mangas on the web site. If false, a search string will b e passed to search the list of mangas (see MangaFox implementation.)
  • mirrorIcon : path of the icon for your mirror, must be a png, 16px x 16px with transparency, put it in the img folder. The value of the attribute is "img/myicon.png"

OffDOM Methods

These methods are called out of the web site page :

getMangaList

This method must return the list of all or part of all mangas from the mirror

Arguments

  • search : a search string which is used if canListFullMangas attribute is false
  • callback : a function to call when the list has been built

Description

The method must create a list Array containing : [["manga name 1", "url"], ["manga name 2", "url"]...]. When the list is built, you must call the callback function with the arguments : ("Mirror name", list). In the model, the implementation has been filled with an ajax request (with headers to prevent cache to be loaded), you just have to fill the res array with informations retrieved from the page on which the request is made.

getListChaps

This method must return the list of all chapters for a given manga.

Arguments

  • urlManga : the url of the manga. This url is one of the urls returned by getMangaList
  • mangaName : The name of the manga. (also returned by getMangaList)
  • obj : Do not use this object (its for internal purpose), just send it back to the extension with the callback function
  • callback : a function to call when the list has been built

Description

The method must create a list Array containing : [["chapter name 100", "url"], "chapter name 99", "url"]...]. This list must be sorted in descending order. The first element must be the most recent. When the list is built, you must call the callback function with the arguments : (list, obj). In the model, the implementation has been filled with an ajax request (with headers to prevent cache to be loaded), you just have to fill the res array with informations retrieved from the page on which the request is made.

InDOM Methods

These methods are called when the user is on the web site your implementation is made for.

Methods which are running in the DOM of the page could directly use this DOM. However, if you want to test the mirror with the lab, you must use the two arguments (doc and curUrl) of these methods to avoid using window.location.href (replaced by curUrl) and manipulate the DOM within the object doc (example, replace $("select") by $("select", doc) in jQuery). These two arguments are not described below but should be used.

getInformationsFromCurrentPage

This method must return (through the callback method) an object describing the current page

Arguments : doc and curUrl

  • callback : the function to call with the returned object

Description

The object returned by this method is a json object containing the following fields :

  • name : Name of current manga
  • currentChapter : Name of thee current chapter
  • currentMangaURL : Url to access current manga (must be one of the url returned by getMangaList)
  • currentChapterURL : Url to access current chapter (must be one of the url returned by getListChaps)

In the implementation, the model has been filled with four variables to fill, the json object is already made.

getListImages

This method must return the list of the urls of the images of the full chapter.

Arguments : doc and curUrl

Description

The method must create a list Array containing : ["url image 1", "url image 2", ...]

This function can return urls which are not the url of the images but urls of pages which contains the url of the images. The src of the image is set by the getImageFromPageAndWrite() function

getImageFromPageAndWrite

Write the image from the the url returned by the getListImages() function.

Arguments : doc and curUrl

  • urlImg : url returned by getListImages
  • image : image object where the image must be displayed (you must changed the src attribute of this object)

Description

The function getListImages can return an url which is not the source of the image. The src of the image is set by this function. If getListImages function returns the src of the image, just do $( image ).attr( "src", urlImg );

removeBanners

This method must remove all ads and banners from the page

Arguments : doc and curUrl

whereDoIWriteScans

This method returns the place to write the full chapter in the document. The returned element will be totally emptied by the extension. You must return only one place to write scans.

You can change the DOM of the page before this method is called in the method doSomethingBeforeWritingScans

Arguments : doc and curUrl

whereDoIWriteNavigation

This method returns the place to write the navigation bars in the document. The returned elements won't be emptied by the extension. You must return two place to write navigation. One above the chapter and one below.

You can change the DOM of the page before this method is called in the method doSomethingBeforeWritingScans

Arguments : doc and curUrl

isCurrentPageAChapterPage

This method must return true if the current page is a page containing scan. (Test if the current page contains a scan.)

Arguments : doc and curUrl

doSomethingBeforeWritingScans

This method is called before displaying full chapters in the page

Arguments : doc and curUrl

Description

Prepare the page to host navigation and the full chapter, you may need to change elements in the page, add elements, remove others and change css

getMangaSelectFromPage

This function can return a preexisting select from the page to fill the chapter select of the navigation bar. It avoids to load the chapters. If it's not possible, return null

Arguments : doc and curUrl

isImageInOneCol

If it is possible to know if an image is a credit page or something which must not be displayed as a book, just return true and the image will stand alone img is the DOM object of the image

Arguments : doc and curUrl

  • img : image object to test

doAfterMangaLoaded

This function is called when the manga is full loaded. Just do what you want here...

Arguments : doc and curUrl

How to send me your mirror ?

To send me your mirror, just mail me (my mail address is in all files of the extension, if you develop your mirror, you must find it...). In the mail, put the following informations :

  • The js file of your mirror
  • The icon of your mirror (png 16x16 with transparency)
  • The json description of your mirror from the "js/mgEntry.js" file

I will test your mirror before publishing it so please test it before so there won't be bugs. (use the lab !)

You must know that you are responsible of the code of your mirror, if there are bugs (due to web sites changes or other), please fix the bugs and send me the new versions. I don't want to maintain all your mirrors... THANKS !