Mentioner

// ==UserScript==
// @name         Mentioner - MAL
// @namespace    MALMentioner
// @version      10
// @description  Adds a button to copy the @user name on all users who have commented on any topics on MAL. The script also adds a search user name box near the box were the reply is written, so that you can search for any user that commented on that topic and click on the displayed @UserName to auto paste the @UserName into the reply box.
// @author       hacker09
// @match        https://myanimelist.net/forum/?topicid=*
// @match        https://myanimelist.net/clubs.php?cid=*
// @icon         https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://myanimelist.net&size=64
// @run-at       document-end
// @grant        none
// ==/UserScript==
var MouseOverExecuted; //Create a new variable with the value null
var Executed = 0; //Create a new variable with the value 0
(function() {
    'use strict';
    var MALUserParsedList = []; //Creates a array to later add all non-dup mal usernames on the page
    const ScriptUsername = document.querySelector("a.header-profile-link").innerText; //Gets the script username

    document.querySelectorAll('div.username,div[style*="margin-bottom: 6px;"] > a').forEach(function(UserName) { //Execute this function for each username on the topic page
        if (!MALUserParsedList.includes(UserName.innerText) && UserName.innerText !== ScriptUsername && UserName.innerText !== 'removed-user') { //If the username isn't already on the array and if isn't the Script Username or the removed-user
            MALUserParsedList.push(UserName.innerText); //Add the username on the array
            window.jQuery('div.username:contains("' + UserName.innerText + '"),div[style*="margin-bottom: 6px;"]:contains("' + UserName.innerText + '")').parent().after('<a title="Copy @' + UserName.innerText + '" onclick=navigator.clipboard.writeText("@' + UserName.innerText + '") style="cursor: pointer; margin-left: 9px; height: 10px; width: 10px; background-size: cover; display: inline-block; transform: scale(1.5); vertical-align: top; margin-top: 2px; background-image: url(https://i.imgur.com/vU0m0ye.png);"></a>'); //Add the copy @UserName button to every username that replied on the topic

        } //Finishes the if condition

        MALUserParsedList = MALUserParsedList.filter(v => v !== ScriptUsername); //Remove the script user username of the array if the script user also commented on the topic
        MALUserParsedList = MALUserParsedList.filter(v => v !== 'removed-user'); //Remove the 'removed-user' username of the array (if existent on the topic page)

    }); //Finishes the async function

    document.querySelector(".topic-reply-box,form.form-club-user-comment").onmouseover = function() { //When the reply or club comment form was mouse overed
        if (MouseOverExecuted == undefined) //If it's the first time that the script txt box is mouse overed
        { //Starts the if condition
            MouseOverExecuted += 1; //Sum the total amount of times that the reply or club comment form was mouse overed
            document.querySelector(".topic-reply-box,form.form-club-user-comment").insertAdjacentHTML("afterend", `<br><textarea id="autocomplete-input" placeholder="Find User" style="resize: none; margin-left: 270px; margin-top: -27px;" cols="10" rows="1"></textarea> <div id="autocomplete-list" style="margin-left: 270px; margin-top: -5px; cursor: pointer; width: 150px; height: 145px; overflow-y: scroll; display: none;"></div>`); //Add a new div and text area to the page display: none; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 5px

        } //Finishes the if condition

        const UserNameList = document.querySelector("#autocomplete-list"); //Add the script div to a variable

        document.querySelector("#autocomplete-input").onclick = function() //When the script txt box is clicked
        { //Starts the onclick condition
            Executed += 1; //Sum the total amount of times that the script txt box was clicked
            if (Executed === 1) //If it's the first time that the script txt box is clicked
            { //Starts the if condition
                UserNameList.style.display = ''; //Display the list containing the User Names
                MALUserParsedList.forEach(UserName => UserNameList.innerHTML += `<div  title="Click to paste @${UserName} on the text box" onmouseout='this.style.color = "black"' onmouseover='this.style.color = "#6386d5"' onclick='document.querySelector("textarea").value === "" ? document.querySelector("textarea").value += "@${UserName}\\n\\n" : document.querySelector("textarea").value += "@${UserName} "'>\n@${UserName}</div>`); //Add the @UserNames to the script div
            } //Finishes the if condition
        }; //Finishes the onclick condition

        document.querySelector("#autocomplete-input").oninput = function(e) { //When any letter is written on the script txt box
            const matcher = new RegExp(`^${this.value}`, 'gi'); //Get the letters written on the script txt box and create a regex with that user input
            const matches = MALUserParsedList.filter(MALUserParsedList => MALUserParsedList.match(matcher)); //Find the user input in the arrays
            UserNameList.innerHTML = ''; //Remove the previously displayed UserNames
            matches.forEach(UserName => UserNameList.innerHTML += `<div  title="Click to paste @${UserName} on the text box" onmouseout='this.style.color = "black"' onmouseover='this.style.color = "#6386d5"' onclick='document.querySelector("textarea").value === "" ? document.querySelector("textarea").value += "@${UserName}\\n\\n" : document.querySelector("textarea").value += "@${UserName} "'>\n@${UserName}</div>`); //Display the users found
        }; //Finishes the oninput event listener
    }; //Finishes the onmouseover event listener
})();