Click on the Play button to watch and listen the OP/END directly on MAL! Click on the OP/END music title text to search for the music title on youtube on a new tab.
目前为
// ==UserScript==
// @name Openings/Endings Enhancer - MAL
// @namespace Search_Ops_Ends
// @version 0.11
// @description Click on the Play button to watch and listen the OP/END directly on MAL! Click on the OP/END music title text to search for the music title on youtube on a new tab.
// @author hacker09
// @match https://myanimelist.net/anime/*
// @match https://myanimelist.net/manga/*
// @icon https://www.google.com/s2/favicons?domain=myanimelist.net
// @run-at document-end
// ==/UserScript==
(async function() {
'use strict';
if (document.querySelectorAll('span[class*="theme-song"]').length !== 0) //If there's at least one op/end listed on the page
{ //Starts the if 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 scrolled
const MoeID = await (await fetch('https://staging.animethemes.moe/api/resource?filter[external_id]=' + location.pathname.split('/')[2] + '&filter[site]=myanimelist&include=anime')).json(); //Get the anime id on themes.moe
const Data = await (await fetch('https://staging.animethemes.moe/api/anime?filter[anime][id]=' + MoeID.resources[0].anime[0].id + '&include=themes.entries.videos,themes.song.artists')).json(); //Get the videos from theme.moe
function OnClick(el, link) { //Creates a new function
if (document.querySelector("video").style.display === 'none') { //If the video is hidden
document.querySelector("video").src = link; //Add the video source url to the video
el.src = "https://i.imgur.com/p66Ij4i.png"; //Change the btn to pause
document.querySelector("video").style.display = ''; //Show the video
} else { //If the video is being shown
document.querySelector("video").src = ''; //Remove the video source url of the video
el.src = "https://i.imgur.com/4qHDObk.png"; //Change the btn to play
document.querySelector("video").style.display = 'none'; //Hides the video
} //Finishes the else condition
} //Finishes the onclick function
document.querySelectorAll("div.di-t")[1].insertAdjacentHTML('afterEnd', `<video width="800" height="400" style="display:none;" controls autoplay></video>`); //Add the video on the page
var MostElems = document.querySelectorAll('span[class*="theme-song"]'); //Suppose that MAL has more ops/ends listed than the API and save MAL ops/ends to a variable
if (Data.anime[0].themes.length > MostElems.length) { //Check if MAL really has more ops/ends listed than the API
//console.log('mal has less elements than the API')
MostElems = Data.anime[0].themes; //Change the variable with the amount of videos in the API
} //Finishes the if condition
var j = 0; //Create a new counter variable to correctly count the total amount of index Number and play buttons
MostElems.forEach(function(video, i) { //forEach video links in the API or forEach listed op/end on MAL
function AddBtn() { //Creates a new function to add the play btn
var x = j - 1; //Create a new variable to correctly loop through each themes videos in the API
document.querySelectorAll('span[class*="theme-song"]')[i].insertAdjacentHTML('beforeend', `<img id="PlayPause" src="https://i.imgur.com/4qHDObk.png" style="cursor:pointer; margin-left: 5px;" />`); //Add the play btn in front of the OP/END
document.querySelectorAll("#PlayPause")[j].onclick = function(e) { //When the play/pause img is clicked
e.preventDefault(); //Stop YT from being opened
e.stopPropagation(); //Stop YT from being opened
OnClick(this, Data.anime[0].themes[x].entries[0].videos[0].link.replace('staging.', '')); //Call the OnClick function
}; //Run the OnClick function on every play/pause btn when clicked
j += 1; //Add +1 to the holds the total amount of theme index Number and play buttons
x += 1; //Add +1 to the var that holds the themes index Number
} //Finishes the function AddBtn
if (document.querySelectorAll('span[class*="theme-song"]').length > i) //If the current looped video number isn't greater than the amount of ops/ends in the page
{ //Starts the if condition
if (Data.anime[0].themes[j].type === 'OP' && document.querySelectorAll('span[class*="theme-song"]')[i].parentElement.className.match('opnening') !== null || document.querySelectorAll('span[class*="theme-song"]')[i].parentElement.id.match('opTheme') !== null) //If the current looped video number is an OP and the current video is an OP
{ //Starts the if condition
AddBtn(); //Add the play button
} //Finishes the if condition
if (Data.anime[0].themes[j].type === 'ED' && document.querySelectorAll('span[class*="theme-song"]')[i].parentElement.className.match('ending') !== null || document.querySelectorAll('span[class*="theme-song"]')[i].parentElement.id.match('edTheme') !== null) //If the current looped video number is an END and the current video is an END
{ //Starts the if condition
AddBtn(); //Add the play button
} //Finishes the if condition
} //Finishes the if condition
else //If the API has more Videos than MAL (Alternative Videos)
{ //Starts the else condition
if (document.body.innerText.search("Alternative Themes") === -1) //If the header wasn't already added
{ //Starts the if condition
[...document.querySelectorAll('span[class*="theme-song"]')].pop().insertAdjacentHTML('afterEnd', `<h2 id='AltThemes'>Alternative Themes</h2>`); //Add a header
} //Finishes the if condition
document.querySelector("#AltThemes").insertAdjacentHTML('afterEnd', `<span class='theme-song'>` + video.song.title + `<img id="PlayPause" src="https://i.imgur.com/4qHDObk.png" style="cursor:pointer; margin-left: 5px;" /></span><br>`); //Add the play btn in front of the OP/END
document.querySelectorAll("#PlayPause")[j].onclick = function(e) { //When the play/pause img is clicked
e.preventDefault(); //Stop YT from being opened
e.stopPropagation(); //Stop YT from being opened
OnClick(this, video.entries[0].videos[0].link.replace('staging.', '')); //Call the OnClick function
}; //Run the OnClick function on every play/pause btn when clicked
} // //Finishes the else condition
}); //Finishes the foreach function
document.querySelectorAll('span[class*="theme-song"]').forEach(function(el) { //For each op/end
var title = el.innerText.split(': '); //Save the op/end title on a variable
if (title[1] !== undefined) //If there's a number: in front of the op/end title
{ //Starts the if condition
title = title[1].split('(ep')[0].trim(); //Save the op/end title on a variable
} //Finishes the if condition
else //If there's no number: in front of the op/end title
{ //Starts the else condition
title = title[0].split('(ep')[0].trim(); //Save the op/end title on a variable
} //Finishes the else condition
el.style.cursor = 'pointer'; //Make the op/end title element look like it's clickable
el.onclick = function() //When the op/end title is clicked
{ //Starts the onclick function
window.open('https://www.youtube.com/results?search_query=' + title, 'blank'); //Search the music title on youtube on a new tab
}; //Finishes the onclick function
el.onmouseout = function() //When the op/end title is unhovered
{ //Starts the onmouseout function
this.style.color = ''; //Readd the default color
}; //Finishes the onmouseout function
el.onmouseover = function() //When the op/end title is hovered
{ //Starts the onmouseover function
this.style.color = '#6386d5'; //Change the default text color to blue
}; //Finishes the onmouseover function
}); //Finishes the for each condition
} //Finishes the if condition
}; //Finishes the onscroll event listener
} //Finishes the if condition
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址