Script to "follow" other users on the vndb

Posted in

#1 by velvet-amesist
2020-05-23 at 04:26
I joined VNDB few days ago, and I realized there's no easy way to go to my friend's profile easily.
So I decided to spend some time today to code script to "follow" any users.

Here are some screenshots of how this feature looks: img1 img2

I changed name in img1 to user1, ect to hide my friends' names. Actual usernames should be shown there with proper use.
I added follow/unfollow button next to username in profile.
"Followed" users can only be seen by user of the script. For example, I cannot see followed users of my friends.

List of followed users are stored in localStorage, so data would be lost if browser data is cleared.
Copy pasting generated string into the code can make the list permanent. (details are in the comments of the code below.)

I made this script for myself and my friends, but I thought maybe this script will be useful for others, so I decided to post the code here.

I hope this will be useful for someone!



Feel free to edit the code however you want. My code is far from being great, so there should be plenty of rooms for improvements.

Any browser extension that can inject JavaScript should be able to run the code below.

// Type your VNDB user id here
yourId = 176915;

// Your list of followed users are stored in localStorage, so data would be lost if
// your browser data is cleared. Get your current list by clicking "Get JSON" button
// Copy & paste displayed JSON here to ensure your list stays permanent.
permanentList = "{\"data\":{\"list\":[], \"dict\":{} }}"

addFriendList();

function addFriendList(){
let mainId = yourId;

let permaList = permanentList;

let URLcheck = document.URL.match(/^https:\/\/vndb.org\/u(\d*)$/);

if(!URLcheck){
return;
}
else if(document.querySelector(".friendBox")){
document.querySelector(".friendBox").remove();
};


let friendsList = JSON.parse(localStorage.getItem("friendsList"));
if (!friendsList){

localStorage.setItem("friendsList", permaList)
friendsList = JSON.parse(localStorage.getItem("friendsList"));
}

console.log(friendsList);




let mainbox = document.querySelector("div.mainbox");

let userId = URLcheck[1];

if(!mainbox){
setTimeout(addFriendList,200);
return;
};

if (mainId == userId){
console.log("aaa");
let content = document.querySelector("div#maincontent .userpage");

let friendBox = document.createElement("div");
friendBox.classList.add("mainbox");
friendBox.classList.add("friendBox");

let title = document.createElement("h1");
title.textContent = "Following"

friendBox.appendChild(title);

let innerBox = document.createElement("div");
innerBox.classList.add("friendsList");
innerBox.style.margin = "0 30px 15px 30px";

let jsonBox = document.createElement("div");
jsonBox.classList.add("jsonBox");

let jsonText = document.createElement("div");
jsonText.classList.add("jsonText");
jsonText.textContent = '`' + JSON.stringify(friendsList) + '`';
jsonText.style.wordBreak = "break-all";
jsonText.style.display = "none";
jsonText.style.margin = "0 0 10px 0";
jsonBox.appendChild(jsonText);

innerBox.appendChild(jsonText);

friendsList["data"]["list"].forEach(
function(u){
let userBox = document.createElement("div");
userBox.classList.add("userBox");
let link = document.createElement("a");
link.textContent = u;
link.href = "https://vndb.org/u" + friendsList["data"]["dict"][u];
userBox.appendChild(link);
innerBox.appendChild(userBox);
}
);



friendBox.appendChild(innerBox);


let jsonButton = document.createElement("button");
jsonButton.textContent = "Get JSON"
jsonButton.style.float = "right";
jsonButton.style.margin = "5px 0 0 0";
jsonButton.style.borderRadius = "3px";
jsonButton.style.padding = "2px";
jsonButton.style.background = "#333";
jsonButton.style.color = "#eee";
jsonButton.style.borderColor = "#444";
jsonButton.onclick = function(){
if (jsonText.style.display === "none"){
jsonText.style.display = "block";
}
else{
jsonText.style.display = "none";
}
};

title.appendChild(jsonButton);



content.parentNode.insertBefore(friendBox,content.nextElementSibling.nextElementSibling);
}
else{
let content = document.querySelector("div#maincontent div.userpage h1");
let userName = content.textContent.match(/^([a-zA-Z0-9-_]+)'/)[1];

let followed = friendsList["data"]["list"].includes(userName);

let followbutton = document.createElement("button");
followbutton.style.fontSize = "14px";
followbutton.style.margin = "0 0 0 7px";
followbutton.style.borderRadius = "3px";
followbutton.style.padding = "2px";
followbutton.style.background = "#333";
followbutton.style.color = "#eee";
followbutton.style.borderColor = "#444";
if (!followed){
followbutton.textContent = "Follow";
}
else{
followbutton.textContent = "Unfollow";
}

followbutton.onclick = function(){
if (!followed){
friendsList["data"]["list"].push(userName);
friendsList["data"]["list"].sort()
friendsList["data"]["dict"][userName] = userId;
followbutton.textContent = "Unfollow";
}
else{
friendsList["data"]["list"] = removeA(friendsList["data"]["list"], userName);
delete friendsList["data"]["dict"][userName];
followbutton.textContent = "Follow";
}
console.log(friendsList);
localStorage.setItem("friendsList", JSON.stringify(friendsList));
};


content.appendChild(followbutton);
};




}


function removeA(arr) {
var what, a = arguments, L = a.length, ax;
while (L > 1 && arr.length) {
what = a[--L];
while ((ax= arr.indexOf(what)) !== -1) {
arr.splice(ax, 1);
}
}
return arr;
}
#2 by arimias
2020-05-23 at 17:41
Thanks, this worked great. A much needed feature here.

Reply

You must be logged in to reply to this thread.