dorkhub
show your thing

MangaOnlineViewer

This scripts loads all pages(images) from the current chapter of the manga showing them in one page in a list type stru…

TagoDR
TypeScript★ 506⑂ 64 forksupdated 6 days ago
javascriptmanganodejsreadertampermonkeyuserscriptviewer
git clone https://github.com/TagoDR/MangaOnlineViewer.gitTagoDR/MangaOnlineViewer
README.mdfork it — it’s yours

Manga OnlineViewer

Manga Icon Adult Script Manga Icon Main Script Manga Icon Dev Script

Description

Loads all pages from a chapter in a nice view, allowing for faster and more comfortable reading, without the need to wait for pages to load.

❗ Attention: Some sites require you to reload the page(F5) or open the chapter in a new tab for the script to start.

Supported Browsers

Firefox and Chrome with Tampermonkey or Violentmonkey. Other Browsers with other add-ons may also work, but not officially supported.

Installation

Main Reader

Adult Reader

Alternative version without dependencies, everything bundled inside and minified

Main Reader Full

Adult Reader Full

Official Source: GitHub

Local Files Reader (ZIP, CBZ, CBR..., PNGs, JPGs...)

Download the standalone HTML file from the link below. Open it in your browser to load local comic/manga files.

Download Local Standalone Reader

Supported Manga Sites

Supported Comic Sites

Supported Hentai Sites

Adult Script available only on GitHub

HotKeys

  • Auto Scroll: space
  • Scroll Up: up / W / num_8
  • Scroll Down: down / S / num_2
  • Next Chapter: right / / / D / num_6
  • Previous Chapter: left / ; / A / num_4
  • Enlarge: - / num_add / E
  • Restore: = / num_subtract / Q
  • Restore: 9 / num_divide / R
  • Fit Width: 0 / num_multiply / F
  • Fit Height: H
  • Settings: num_divide / num_5 / X
  • WebComic: C
  • Vertical: V
  • Left to Right: N
  • Right to Left: B

Features

  • Auto Scroll
  • View Modes:
    • Vertical/WebComic [Default]
    • Fluid Left to Right
    • Fluid Right to Left
  • Bookmark Pages (To resume reading)
  • Full Themes and Customizable
  • Global and Individual images zoom
    • In(Global one may stretch images beyond window width)
    • Out
    • Restore original(Toggle fit width if oversize)
    • Fit width
    • Fit width if oversize[Default on]
    • Fit Height (with scroll pages)
    • Hide
  • Auto reload Images
    • Counter for loaded Images
    • Individual image reload, just in case
  • HotKeys
  • Goto Page
  • Image Loading Timer[Default 1s](Some sites require longer timers. e.g.:ExHentai,e-hentai)
  • Thumbnails Navigation[Default on]
  • Download all images as ZIP File[Automatic Default off]
  • Lazy Load Images[Default off]

Adding new Manga Sites

Fork this project and make a pull request, in the folders "main" or "adult" create a new file .ts with The name of the site. After writing the module like below, import it from the index of the selected folder

Inside the file, gather the information needed using any means, look at other sites for inspiration, Below is an example with descriptions.

// == MangaDex =====================================================================================
import { Category, IManga, ISite, Language } from '../types';

const site: ISite = {
  name: 'MangaDex', // The name of the to be listed, may be an array of names
  url: /https?:\/\/(www\.)?mangadex.org/, // Regex to detect the site, usually just the reader part of the site, but can be the root if is has a lot of dynamic content
  homepage: 'https://mangadex.org/',
  language: [Language.ENGLISH], // Array of languages the site serve
  category: Category.MANGA, // Category of the site
  waitEle: '#chapter-selector a', // Wait for something before running, some site requires some steps before the information is available
  async run(): Promise<IManga> {
    // Logic for obtaining the required information
    const chapterId = /\/chapter\/([^/]+)(\/\d+)?/.exec(window.location.pathname)?.at(1);
    const home = `https://api.mangadex.org/at-home/server/${chapterId}`;
    const server = await fetch(home).then(async res => res.json());
    const images = server.chapter.data;
    const chapters = document.querySelectorAll('#chapter-selector a');
    return {
      title: document.querySelector('title')?.text.replace(' - MangaDex', ''), // Title of the Chapter/Manga
      series: document.querySelector("a.text-primary[href^='/title/']")?.getAttribute('href'), // Url for the gallery or chapter list
      pages: images.length, // Quantity of pages
      prev: chapters?.item(0)?.getAttribute('href'), // Previous Chapter
      next: chapters?.item(1)?.getAttribute('href'), // Next Chapter
      listImages: images.map(
        // List of images
        (img: string) => `${server.baseUrl}/data/${server.chapter.hash}/${img}`,
      ),
    };
  },
};
export default site;

Look inside the types folder to better understand the structure and valid values.

Permissions

I allow this script to be posted or used anywhere as long as I am given credit and provided a link to this site. I allow parts of my script to be used freely.

Disclaimer

In case the owner/admin of one of the supported sites does not want my script to run on their site, I will make it disabled by default. Forcing users to manually activate it.

Mobile

It's recommended to use Tampermonkey with Firefox mobile or Kiwi Browser.

Bookmarklet (Not Recommended)

Settings can't be saved with Bookmarklet:

Bookmarklet seems to work only in Chrome, open the chapter then use the search bar to activate your bookmarklet.

Main Reader:
javascript:(function() {
  if (unsafeWindow === undefined) unsafeWindow = window;
  ["https://cdn.jsdelivr.net/npm/colorjs.io@0.7.1/dist/color.global.min.js", "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.9.1/jszip.min.js", "https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js", "https://cdn.jsdelivr.net/npm/lodash@4.17.23/lodash.min.js", "https://cdn.jsdelivr.net/npm/hotkeys-js@4.0.2/dist/hotkeys-js.min.js", "https://cdn.jsdelivr.net/npm/bowser@2.14.1/bundled.js", "https://cdnjs.cloudflare.com/ajax/libs/blob-util/2.0.2/blob-util.min.js", "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js", "https://cdn.jsdelivr.net/gh/TagoDR/MangaOnlineViewer@latest/dist/Manga_OnlineViewer.user.min.js"].map(s => document.body.appendChild(document.createElement('script')).src = s)
})();
Adult Reader:
javascript:(function() {
  if (unsafeWindow === undefined) unsafeWindow = window;
  ["https://cdn.jsdelivr.net/npm/colorjs.io@0.7.1/dist/color.global.min.js", "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.9.1/jszip.min.js", "https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js", "https://cdn.jsdelivr.net/npm/lodash@4.17.23/lodash.min.js", "https://cdn.jsdelivr.net/npm/hotkeys-js@4.0.2/dist/hotkeys-js.min.js", "https://cdn.jsdelivr.net/npm/bowser@2.14.1/bundled.js", "https://cdnjs.cloudflare.com/ajax/libs/blob-util/2.0.2/blob-util.min.js", "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js", "https://cdn.jsdelivr.net/gh/TagoDR/MangaOnlineViewer@latest/dist/Manga_OnlineViewer_Adult.user.min.js"].map(s => document.body.appendChild(document.createElement('script')).src = s)
})();

more like this

lottery

🎉🌟✨🎈年会抽奖程序，基于 Express + Three.js的 3D 球体抽奖程序，奖品🧧🎁，文字，图片，抽奖规则均可配置，😜抽奖人员信息Excel一键导入😍，抽奖结果Excel导出😎，给你的抽奖活动带来全新酷炫体验🚀🚀🚀

JavaScript★ 4.6k
@moshang-ax

search

search projects, people, and tags