Anime Website Buttons Plus

A script that adds buttons on Anime Planet, MAL and Anilist for searching various sites.

当前为 2020-03-22 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @author      Deathwing
// @name        Anime Website Buttons Plus
// @include     https://www.anime-planet.com/anime/*
// @include     http://myanimelist.net/anime/*
// @include     https://myanimelist.net/anime/*
// @include     https://anilist.co/anime/*
// @exclude     https://www.anime-planet.com/anime/
// @exclude     https://www.anime-planet.com/anime/all?name=*
// @exclude     https://www.anime-planet.com/anime/recommendations/*
// @description A script that adds buttons on Anime Planet, MAL and Anilist for searching various sites.
// @version     1.99(WIP)
// @grant       GM.setValue
// @grant       GM.getValue
// @grant       GM.listValues
// @grant       GM.deleteValue
// @grant       GM.notification
// @namespace https://greasyfork.org/users/18375
// ==/UserScript==


//Find h1
var header;
var host = document.location.host;

if (host == "www.anime-planet.com") {
    header = getHeader("#siteContainer h1");
    main();
}
else if (host == "myanimelist.net") {
    header = getHeader('#contentWrapper span span');
    main();
}
else if (host == "anilist.co") {
    function getAlHeader() {

        header = getHeader('div.content h1');

        if (header) {
            main();
        }
        else {
            setTimeout(getAlHeader, 500);
        }
    }

    getAlHeader();
}

function getHeader(atr) {
    return document.querySelector(atr);
}

function main() {

    //Cut anime name
    var animeName;

    if (document.location.host == "www.anime-planet.com") {
        animeName = getAnimeName();
    }
    else if (document.location.host == "myanimelist.net") {
        animeName = header.childNodes[0].nodeValue;
    }
    else if (document.location.host == "anilist.co") {
        animeName = getAnimeName();
    }


    function getAnimeName() {
        return header.textContent.trim();
    }


    function creteButton(icon, searchUrl, title) {
        var buttImg = document.createElement("img");
        buttImg.src = icon;
        buttImg.setAttribute("style", "width:16px;height:16px;margin-right:2px;");
        var button = document.createElement("a");
        button.href = searchUrl;
        button.target = "_blank";
        button.title = title;
        button.appendChild(buttImg);
        return button;
    }

    //Set buttons with information

    //MAL Button
    var icon = 'https://myanimelist.net/favicon.ico';
    var searchUrl = 'http://myanimelist.net/anime.php?q=' + animeName;
    var title = "Search MyAnimeList";

    var malButton = creteButton(icon, searchUrl, title);



    //Anilist Button
    icon = 'https://www.google.com/s2/favicons?domain=anilist.co';
    searchUrl = 'https://anilist.co/search/anime?search=' + animeName + '&sort=SEARCH_MATCH';
    title = "Search Anilist";

    var alButton = creteButton(icon, searchUrl, title);



    //Anime-Planet Button
    icon = 'https://www.anime-planet.com/favicon.ico';
    searchUrl = 'https://www.anime-planet.com/anime/all?name=' + animeName;
    title = "Search Anime-Planet";

    var apButton = creteButton(icon, searchUrl, title);



    //YouTube Button
    icon = 'https://www.google.com/s2/favicons?domain=youtube.com';
    searchUrl = 'https://www.youtube.com/results?search_query=' + animeName + " trailer";
    title = 'YouTube Trailer';

    var ytButton = creteButton(icon, searchUrl, title);


    //Google Images button
    icon = 'https://www.google.com/s2/favicons?domain=http://www.google.bg/';
    searchUrl = 'https://www.google.bg/search?tbm=isch&biw=&bih=&gbv=2&q=' + animeName;
    title = "Search with Google Images";

    var giButton = creteButton(icon, searchUrl, title);



    //Nyaa button
    icon = 'https://www.google.com/s2/favicons?domain=https://nyaa.si/';
    searchUrl = 'https://nyaa.si/?f=0&c=0_0&q=' + animeName;
    title = "Search Nyaa";

    var nyButton = creteButton(icon, searchUrl, title);



    //Plus button
    icon = 'https://img.favpng.com/5/16/6/computer-icons-font-awesome-symbol-png-favpng-RHypbMhS6fLtnQTPtKFLqJBdD.jpg';

    var plusButton = createHTMLElement('img', null, 'addCustomButton', [{ n: 'style', v: 'width:16px;height:16px;margin-right:2px;background:transparent;' },
    { n: 'src', v: icon }]);

    //plusButton.addEventListener('click', addButtonHandler);


    //Add Website Buttons

    if (document.location.host == "www.anime-planet.com") {
        appendButtons([malButton, alButton]);
    }
    else if (document.location.host == "anilist.co") {
        appendButtons([malButton, apButton]);
    }
    else if (document.location.host == "myanimelist.net") {
        appendButtons([apButton, alButton]);
    }


    function appendButtons(buttonsArray) {
        header.appendChild(document.createTextNode(" "));

        const otherButtons = [ytButton, giButton, nyButton, plusButton];
        const allButtons = buttonsArray.concat(otherButtons);
        allButtons.forEach(btn => {
            header.appendChild(btn);
        });
    }


    function addButtonHandler(e) {
        var popUp = getPopup();

        if (!popUp) {
            addButtonPopup();
        }

        popUp = getPopup();

        togglePopup(true);

        var buttonsDiv = popUp.querySelector('.addAndCancelButtons');
        buttonsDiv.addEventListener('click', addAndCancelButtonsHandler);
    }

    function getPopup() {
        return document.querySelector('.addButtonPopup');
    }

    function addAndCancelButtonsHandler(e) {
        var targetEl = e.target;

        if (targetEl.className === 'addButton') {
            var valuesListPromise = GM.listValues();
            valuesListPromise.then(addButtonLogic);
        }
        else if (targetEl.className === 'cancelButton') {
            togglePopup(false);
        }


    }

    function togglePopup(v) {
        var popUp = document.querySelector('.addButtonPopup');

        if (v) {
            popUp.style.display = 'block';
            popUp.style.width = '400px';
            popUp.style.height = '500px';
        }
        else {
            popUp.style.display = 'none';
            popUp.style.width = '0px';
            popUp.style.height = '0px';
        }

    }

    function addButtonLogic(valuesList) {
        var buttonTitle = document.querySelector('.titleInput');

        GM.deleteValue("Search Nyaa");
        if (valuesList.includes(buttonTitle.value)) {
            alert('Button with the same title already exists!');
        }
        else {
            var searchUrl = document.querySelector('.URLInput');
            var icon = document.querySelector('.iconInput');
            GM.setValue(buttonTitle, JSON.stringify({
                title: buttonTitle.value,
                url: searchUrl.value,
                icon: icon.value
            }));

            buttonTitle.value = '';
            searchUrl.value = '';
            icon.value = '';

            alert(`Button ${buttonTitle.value} successfully added!`);
            togglePopup(false);
        }
    }


    function addButtonPopup() {
        var style = 'margin:auto;text-align: center;display:block;margin-bottom: 5px;';
        var popUp = createHTMLElement('div', null, 'addButtonPopup', [{ n: 'style', v: 'position:absolute;display:none;top:50%;left:50%;margin-top:-250px;margin-left:-200px;background-color:white;width:0px;height:0px;box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);border-radius: 8px;' }]);
        var trueTitle = createHTMLElement('h2', 'ADD CUSTOM BUTTON', null, [{ n: 'style', v: style + 'margin-top: 20px' }])
        var title = createHTMLElement('h3', 'Title', null, [{ n: 'style', v: style + 'margin-top: 30px' }]);
        var titleInput = createHTMLElement('input', null, 'titleInput', [{ n: 'placeholder', v: 'Button title' }, { n: 'style', v: style }]);
        var URLTitle = createHTMLElement('h3', 'Search URL', null, [{ n: 'style', v: style + 'margin-top: 20px' }]);
        var URLDescr = createHTMLElement('div', 'To get the search URL first go the site you want to add and search the term "ANIMENAME" in the search field. Then copy the full URL (including http://) in the field below.', null, [{ n: 'style', v: style + 'margin-left: 15px;margin-right: 15px;font-size: 90%;font-family: monospace;' }]);
        var URLInput = createHTMLElement('input', null, 'URLInput', [{ n: 'placeholder', v: 'Search URL' }, { n: 'style', v: style + 'width:80%' }]);
        var iconTitle = createHTMLElement('h3', 'Icon URL', null, [{ n: 'style', v: style + 'margin-top: 20px' }]);
        var iconDescr = createHTMLElement('div', 'Link to icon for the button. The easiest way to get it is to copy this link "https://www.google.com/s2/favicons?domain=" and place the website url at the end (example: https://www.google.com/s2/favicons?domain=myanimelist.net).', null, [{ n: 'style', v: style + 'margin-left: 15px;margin-right: 15px;font-size: 90%;font-family: monospace;' }]);
        var iconInput = createHTMLElement('input', null, 'iconInput', [{ n: 'placeholder', v: 'Icon URL' }, { n: 'style', v: style + 'width:80%' }]);
        var buttonsDiv = createHTMLElement('div', null, 'addAndCancelButtons', [{ n: 'style', v: style + 'bottom:10px;position:absolute;width:100%' }]);
        var buttStyle = 'width:70px;margin:5px';
        var addButton = createHTMLElement('button', 'ADD', 'addButton', [{ n: 'style', v: buttStyle }]);
        var cancelButton = createHTMLElement('button', 'CANCEL', 'cancelButton', [{ n: 'style', v: buttStyle }]);

        appendChildren(buttonsDiv, [addButton, cancelButton]);
        appendChildren(popUp, [trueTitle, title, titleInput, URLTitle, URLDescr, URLInput, iconTitle, iconDescr, iconInput, buttonsDiv]);
        var html = document.querySelector('html');
        html.appendChild(popUp);
    }

    function createHTMLElement(tag, textContent, className, attributes) {
        var element = document.createElement(tag);

        if (className) {
            element.className = className;
        }
        if (textContent) {
            element.textContent = textContent;
        }
        if (attributes) {
            attributes.forEach((a) => {
                element.setAttribute(a.n, a.v);
            })
        }

        return element;
    }

    function appendChildren(element, children) {
        children.forEach((c) => {
            element.appendChild(c);
        })
    }

}