0

I'm currently making a dark theme for my local router, the images it uses are terrible, I want to replace them, but they are added with JavaScript, after lots of research with Tampermonkey/Greasemonkey and also Stylish, I couldn't find any way to do it.

Only idea I had was replace images with the file name say wan_up.png with another image.

Luka ash
  • 103
  • 4
  • [Stylish wiki](https://github.com/stylish-userstyles/stylish/wiki/Replacing-images-in-img-tags) has an example. Try it with `img[src*="wan_up.png"]` selector. – wOxxOm Feb 16 '17 at 04:57
  • @wOxxOm Thing is that the images are added in javascript, I've never messed with javascript before as I've been avoiding it, so I'm not sure how I'm meant to use that css for javascript. – Luka ash Feb 16 '17 at 04:59
  • @wOxxOm Well, sorta works, using the code from the wiki it does add the image, but it doesn't remove the old one, so the old one just goes on top and overlays it – Luka ash Feb 16 '17 at 05:11
  • Well, to say why it doesn't work in your case I'd need to see that page source. The wiki trick works for me and many others so... here's my last attempt to shoot in the dark: https://puu.sh/u5kUI/3a6021c5ff.txt I'll add an answer if it works for you. – wOxxOm Feb 16 '17 at 05:40
  • @wOxxOm Well after a while of messing around, it finally works, go ahead and an answer, I'll accept it. – Luka ash Feb 16 '17 at 19:00

1 Answers1

1

Use CSS in Stylish or similar extension.

#your-selector-here {
    height: 0 !important;
    width: 0 !important;
    /* these numbers match the new image's dimensions */
    padding-left: 32px !important;
    padding-top: 32px !important;
    background: url(http://example.com/your/image/here) no-repeat !important;
    background-size: 32px 32px; /* modern CSS property to scale the new image */
}

Use MutationObserver API to alter the image element before it's shown.

There are many wrappers for MutationObserver, here's an example based on setMutationHandler:

// ==UserScript==//
// @name           Replace image
// @match          http://192.168.0.1/*
// @run-at         document-start
// @require        https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// ==/UserScript==

setMutationHandler({
    processExisting: true,
    selector: 'img[src*="wan_up"]',
    handler: images => images.forEach(img => {
        img.src = 'http://foo/bar.png';
    })
});

Edit the URL in @match, selector for the image to replace, new image URL accordingly.

wOxxOm
  • 65,848
  • 11
  • 132
  • 136