Highlight the post content of the user in the "followList".
// ==UserScript==
// @name Add Follow List Form
// @namespace your-namespace
// @version 1.4
// @author zzm88 & calon @ 253874.net
// @description Highlight the post content of the user in the "followList".
// @match https://*.253874.net/t/*
// @match http://*.253874.net/t/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=253874.net
// @grant none
// @license MIT
// ==/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)) {
// highlight these users' replies
const postList = author.closest(".post_list");
postList.style.borderLeft = "medium solid #FF0000";
postList.style.paddingLeft = "0.4rem";
// usernameElement.style.borderBottom = "medium solid #FF0000";
// postList.style.boxShadow = "0.2rem 0.2rem 0.5rem rgb(0 0 0 / .5)";
} else {
// Back to the default style
const postList = author.closest(".post_list");
postList.style.borderLeft = "initial";
// usernameElement.style.borderBottom = "initial";
// postList.style.boxShadow = "";
}
}
}
})();