Add Follow List Form

Adds a form with a labeled input box and submit button after the element with the ID "quot" and stores the input value in local storage when the submit button is clicked; loops through the elements with the class "author" and adds a border and "following" tag to the parent element with the class "post_list" if the username matches any username in the "followList" stored in local storage

Versión del día 15/03/2023. Echa un vistazo a la versión más reciente.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==UserScript==
// @name           Add Follow List Form
// @namespace      your-namespace
// @version        1.3
// @description    Adds a form with a labeled input box and submit button after the element with the ID "quot" and stores the input value in local storage when the submit button is clicked; loops through the elements with the class "author" and adds a border and "following" tag to the parent element with the class "post_list" if the username matches any username in the "followList" stored in local storage
// @match          https://www.253874.net/*
// @match          https://253874.net/*
// @icon           https://www.google.com/s2/favicons?sz=64&domain=253874.net
// @grant          none
// ==/UserScript==

(function() {
      // Find the element with the ID "quot"
    const quot = document.getElementById("quot");

    // Create the form
    const form = createForm();

    // Add the form after the element with the ID "quot"
    quot.after(form);

    // Get the follow list from local storage
    const followList = localStorage.getItem("followList");

    // Create the input box
    const input = document.getElementById("follow-list-input");

    // Load the follow list in the input box after the page is loaded
    loadFollowList(input, followList);

    // Loop through the elements with the class "author"
    loopAuthors(authors => {
        // Highlight the posts by users in the follow list
        highlightPosts(authors, followList);
    });

    // Add an event listener to the form for when it is submitted
    form.addEventListener("submit", function(event) {
        event.preventDefault();

        // Get the input value and format it
        const inputVal = input.value.trim().replace(/\s+/g, " ");

        // Store the input value in local storage
        localStorage.setItem("followList", inputVal);

        // Loop through the elements with the class "author" again to update the highlights
        loopAuthors(authors => {
            highlightPosts(authors, inputVal);
        });
    });


    function createForm() {
        // Create the form
        const form = document.createElement("form");
        form.id = "follow-list-form";

        // Create the label
        const label = document.createElement("label");
        label.htmlFor = "follow-list-input";
        label.textContent = "Following: ";
        form.appendChild(label);

        // Create the input box
        const input = document.createElement("input");
        input.type = "text";
        input.name = "follow-list";
        input.id = "follow-list-input";
        form.appendChild(input);

        // Create the submit button
        const submit = document.createElement("button");
        submit.type = "submit";
        submit.textContent = "Submit";
        form.appendChild(submit);

        return form;
    }

    function loadFollowList(input, followList) {
        // Load the follow list in the input box after the page is loaded
        input.value = followList;
    }

    function loopAuthors(callback) {
        // Loop through the elements with the class "author"
        const authors = document.querySelectorAll(".author");
        callback(authors);
    }






    function highlightPosts(authors, followList) {
    // Loop through the elements with the class "author" and highlight the posts by users in the follow list
    for (let i = 0; i < authors.length; i++) {
        const author = authors[i];

        // Get the username from the author element
        const usernameElement = author.querySelector(".username");
        if (!usernameElement) continue; // skip if username element is not found
        let username = usernameElement.textContent.trim();
        username = username.replace(/\【.*?\】/g, "").trim(); // remove text enclosed in square brackets

        // Check if the username is in the follow list
        if (followList && followList.includes(username)) {
            // Add a border and "following" tag to the parent element with the class "post_list"
            const postList = author.closest(".post_list");
            postList.style.border = "2px solid green";


        } else {
            // Remove the border and "following" tag from the parent element with the class "post_list"
            const postList = author.closest(".post_list");
            postList.style.border = "";


        }
    }
}











})();