Making a Chrome extension to replace a single image - google-chrome

Question

sorry if this has already been asked - I looked extensively, but can't find anything that seems to address it. Though it's quite possible it's been asked a dozen times already and the language used just went completely over my head. Which brings me to this: I'm not technologically stupid or anything, but as far as coding anything goes, that's another story entirely and I know virtually zero terminology regarding Chrome extensions. I just started googling about an hour ago.
Anyway, the question. I'm trying to make an extension to replace a single gif on a website I frequent. It's a loading image, so it appears on virtually every page, and it's just atrocious. The image is called (is that the right word?) by a script...rocket-script, I think it's called, which refers to it as ajax_loader, from browsing the page source? And the CSS stylesheet gave me the URL for the image.
So, here is the code I have, based on googling:
manifest.json
{
"manifest_version": 2,
"version": "1.0",
"name": "extensioname",
"description": "extensiondescription",
"content_scripts": [
{
"matches": ["websiteitselfurl.com*","URLofimagetobeblocked.gif"],
"js": ["part2.js"]
}
]
}
And then there's
part2.js
document.images[0].src = "replacementimage.gif";
document.images[0].height = "300";
document.images[0].width = "300";
Obviously those aren't the actual URLs, but...
All this ends up doing is replacing an image on every webpage, regardless of where it is, with the replacement gif. And not even the loading image in question on the site I am trying to replace in the first place.
I've tried changing the values in the "matches" line to a few different things, including at the end as in the example I found, and...that's literally all I can think to do.
I'd like to reiterate that I'm a complete know-nothing moron about this, so I apologize if it's already been asked, but I really cannot find an answer anywhere, and for the life of me I cannot get this to work myself and I'm out of ideas at this point. I registered here just to ask because I'm like ripping my hair out over it.
Any guidance whatsoever would be tremendously appreciated. Thank you!

Answer 1

Considering you are referring gif hosted in external site(imgur), you should use the full path of that image: https://i.imgur.com/Li7isRP.gif
manifest.json
{
"manifest_version": 2,
"version": "1.0",
"name": "extensioname",
"description": "extensiondescription",
"content_scripts": [
{
"matches": [
"http://websiteitselfurl.com/*", "https://websiteitselfurl.com/*"
],
"js": [
"content.js"
]
}
]
}
content.js
var ajax_loader = document.getElementById("ajax-loader");
ajax_loader.style.setProperty('background', 'url("https://i.imgur.com/Li7isRP.gif")', 'important');
// If needed, you could also change width/height of ajax_loader to better match the new image.

Answer 2

Just thought I would throw in another possible avenue for a solution. Since you want to replace a gif that loads in dynamically, it might be better to just redirect the request rather than try to alter the page after it is called. Something using the webRequest api would work well for this. For example:
manifest.json
{
"name": "VF Sample",
"version": "1.0.0",
"description": "A sample for VF gif replacement",
"manifest_version": 2,
"permissions": [
"webRequest","webRequestBlocking","http://vampirefreaks.com/*"
],
"background": {
"scripts": ["bgp.js"]
}
}
bgp.js
chrome.webRequest.onBeforeRequest.addListener(function(details){
return {redirectUrl:"http://i.imgur.com/Li7isRP.gif"};
},
{urls: ["http://vampirefreaks.com/_img/site/ajax-loader*"]},["blocking"]);