Greasy Fork

I need a script that will replace the same profile image throughout discord. (Why? It's for a prank.)
Basically I'd like to put a different image on someone, I tried with css, but unfortunally certain images can't be targeted as they have a different structure that makes css useless.
Additionally, the css route required me to add those with pseudo elements and also change some styles on certain elements.

This works for now (in most places), but I'd like a more permanent solution, one that isn't prone to breaking when discord changes their classes.

Whoever decides to make this, the path of the images is (https://cdn.discordapp.com/avatars/_USER_NUMBER_ID_/_PIC_RANDOM_ID_.webp)
It used to be PNG, but now it became WEBP.

Thank you in advance.

I recommend you to do something like this


var PageLinks = document.querySelectorAll('a'); //Add all page links total number to a variable
for (var i = PageLinks.length; i--;) { //Starts the for condition
if (PageLinks[i].href.match('https://cdn.discordapp.com/avatars/')) { //If the Page Link is a https://cdn.discordapp.com/avatars/ page
PageLinks[i].href = 'link of the avatar for all users here'; //Change the element link image of the avatar for all users
} //Finishes the if condition
} //Finishes the for condtiion
}, 500); //Finishes the settimeout function

I recommend you to do something like this


var PageLinks = document.querySelectorAll('a'); //Add all page links total number to a variable
for (var i = PageLinks.length; i--;) { //Starts the for condition
if (PageLinks[i].href.match('https://cdn.discordapp.com/avatars/')) { //If the Page Link is a https://cdn.discordapp.com/avatars/ page
PageLinks[i].href = 'link of the avatar for all users here'; //Change the element link image of the avatar for all users
} //Finishes the if condition
} //Finishes the for condtiion
}, 500); //Finishes the settimeout function

I'm sorry, but I won't use that. More copies of the image can keep coming and the page won't reload. Plus I don't want a delay before the custom image appears.

If you don't want the delay, just remove it.

Use mutation observers for that,or set interval.

There is a great extension for that: https://chrome.google.com/webstore/detail/requestly-modify-headers/mdnleldcmiljblolnjhpnblkcekpdkpa

And don't forget to clean your browser cache after applying the rule

I was hoping to not install more extensions, especially ones that do ton more, only to use it in one place.

How to use mutation observer?

https://googlethatforyou.com?q=How%20to%20use%20mutation%20observer%3F

I still don't get it.


new MutationObserver(async function() { //create a new async mutation observer function
await replace(); //Call the replace function when a change happens on the element we are observing changes in
}).observe(document.querySelector("ELEMENT THAT GETS NEW MESSAGES"), { //Defines the element that frequently changes and wait and listen for those changes, when a changes happens the function replace above runs
attributes: true,
attributeOldValue: true,
characterData: true,
characterDataOldValue: true,
childList: true,
subtree: true
}); //Finishes the characteristics of the element that we chose to observe and listen to