Better Related Anime/Manga Reader

Display the Synonyms/Spin-offs/Alternative versions/Sequels/Summary/Others and Side stories titles in a better readable way on anime and manga pages.

Install this script?
Author's suggested script

You may also like Approved Entries Notifier - MAL.

Install this script
// ==UserScript==
// @name         Better Related Anime/Manga Reader
// @namespace    ReadeableSequels
// @version      0.6
// @description  Display the Synonyms/Spin-offs/Alternative versions/Sequels/Summary/Others and Side stories titles in a better readable way on anime and manga pages.
// @author       hacker09
// @include      /^https:\/\/myanimelist\.net\/anime\/[\d]+(\/.*)?/
// @include      /^https:\/\/myanimelist\.net\/manga\/[\d]+(\/.*)?/
// @icon         https://www.google.com/s2/favicons?domain=myanimelist.net
// @run-at       document-end
// @grant        GM_deleteValue
// @grant        GM_listValues
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
  'use strict';
  if (document.body.innerText.search("Synonyms:") > -1) //If the text "Synonyms:" exists on the page
  { //Starts the if condition

    if (GM_listValues().length >= 100) //If there's 100 anime ids and Synonyms titles stored on tampermonkey
    { //Starts the if condition
      GM_listValues().forEach(a => GM_deleteValue(a)); //Erase all the 100 stored anime IDs and their Synonyms titles stored on tampermonkey
    } //Finishes the if condition

    function findTheSynonymsText() { //Create a function to get the Synonyms: Titles text
      const allInfo = [...[...document.querySelectorAll("h2")].find(h2 => h2.textContent === "Information").parentNode.querySelectorAll("div")]; //Select all divs inside the Information h2 element
      return allInfo.find(info => info.innerText.includes("Synonyms:")); //Return the div that contains the Synonyms text
    } //Find the Synonyms text that's inside the information h2 element

    if (findTheSynonymsText().querySelector("span").nextSibling.textContent.match(', ') !== null) //If there's any commas on the Synonyms titles
    { //Starts the if condition
      var ID, EntryType; //Makes these variables global
      var EntryID = location.pathname.match(/\d+/)[0]; //Store the Entry ID
      var StoredEntryIDsArray = []; //Creates a new blank array
      GM_listValues().forEach(a => StoredEntryIDsArray.push('^' + a)); //Add all Entry IDs and types on tampermonkey to the array
      var StoredEntryIDsRegex = new RegExp(StoredEntryIDsArray.join('$|')); //Create a new variable and regex containing all the values saved on tampermonkey and replace the , separator with the or $| regex symbols

      if (location.pathname.split('/')[1] === 'anime') //If the opened url is an anime entry page
      { //Starts the if condition
        ID = 'aid'; //Add a value to the variable
        EntryType = 'anime'; //Add a value to the variable
      } //Finishes the if condition
      else //If the opened url is an manga entry page
      { //Starts the else condition
        ID = 'mid'; //Add a value to the variable
        EntryType = 'manga'; //Add a value to the variable
      } //Finishes the else condition

      async function GetSynonyms() //Creates a function to get the Synonyms titles
      { //Starts the function

        const response = await fetch('https://myanimelist.net/dbchanges.php?' + ID + '=' + EntryID + '&t=alternative_titles'); //Fetch
        const html = await response.text(); //Gets the fetch response
        const newDocument = new DOMParser().parseFromString(html, 'text/html'); //Parses the fetch response
        var SynonymsTitles = newDocument.querySelector("td.dark_text").nextElementSibling.textContent.trim().split(';'); //Creates a variable to hold the Synonyms Titles

        var SynonymsTitlesArray = []; //Create a new global array to store all Synonyms Titles later
        SynonymsTitles.forEach(a => SynonymsTitlesArray.push(a)); //Add a break line between each anime/manga title
        findTheSynonymsText().innerHTML = '<span class="dark_text">Synonyms:</span><div>' + SynonymsTitlesArray.join('<br><br>') + '</div>'; //Add the Synonyms Titles with break lines to the page
        GM_setValue(EntryType + EntryID, SynonymsTitlesArray.join('<br><br>')); //Get and save the Entry id, type and Synonyms Titles with break lines as a variable
      } //Finishes the async function

      var EntryTypeANDID = EntryType + EntryID; //Join the Entry Type and ID into 1 string to use match latter
      if (EntryTypeANDID.match(StoredEntryIDsRegex) !== null && StoredEntryIDsRegex.toLocaleString() !== '/(?:)/') //If the current url Entry id and type matches an Entry id and type that is stored on tampermonkey, and if the Regex contains 1 or more Entry ids
      { //Starts the if condition

        findTheSynonymsText().querySelector("span").nextSibling.textContent = ''; //Remove the old Synonyms Titles text
        findTheSynonymsText().innerHTML = '<span class="dark_text">Synonyms:</span><div>' + GM_getValue(EntryTypeANDID) + '</div>'; //Add the Synonyms Titles text content on the Synonyms: bold text

        findTheSynonymsText().querySelector("span").onclick = function() { //When the bold Synonyms: text is clicked
          GetSynonyms(); //Update the Synonyms Titles
        }; //Finishes the onclick advent listener
        findTheSynonymsText().querySelector("span").style.cursor = 'pointer'; //Make the bold Synonyms: text look like it's clickable

      } //Finishes the if condition
      else //If the current url Entry id and type does NOT match any Entry id and type that is stored on tampermonkey
      { //Starts the else condition
        var TimesExecuted = 0; //Creates a new variable

        window.onscroll = async function() { //Creates a new function to run when the page is scrolled
          TimesExecuted += 1; //Sum the amount of times that the page is scrolled
          if (TimesExecuted === 1) { //On the first time that the page is hovered
            GetSynonyms(); //Starts the function GetSynonyms
          } // //Finishes the if condition
        }; //Finishes the onscroll event listener

      } //Finishes the else condition

    } //Finishes the if condition

  } //Finishes the if condition

  if (document.querySelector("table.anime_detail_related_anime").innerText.match(', ') !== null) //If there are titles separated by commas
  { //Starts the if condition
    document.querySelector("table.anime_detail_related_anime").outerHTML = document.querySelector("table.anime_detail_related_anime").outerHTML.replaceAll(', ', ''); //Remove the now needless commas

    document.querySelector("table.anime_detail_related_anime").querySelectorAll("a[href*='anime'],a[href*='manga']").forEach(a => a.outerHTML = a.outerHTML + '<br>'); //Add a break line between each anime/manga title
  } //Finishes the if condition

})();