如何使用 Tampermonkey 或 Stylish 将名称为 x.png 的所有图像更改为 x.png？答案

【问题标题】：How do I change all images with the name x.png with x.png with Tampermonkey or Stylish?如何使用 Tampermonkey 或 Stylish 将名称为 x.png 的所有图像更改为 x.png？
【发布时间】：2017-02-16 04:53:28
【问题描述】：

我目前正在为我的本地路由器制作一个深色主题，它使用的图像很糟糕，我想替换它们，但它们是用 JavaScript 添加的，经过对 Tampermonkey/Greasemonkey 和 Stylish 的大量研究，我不能'找不到任何方法。

我唯一的想法是用另一个图像替换文件名 wan_up.png 的图像。

【问题讨论】：

Stylish wiki 有一个例子。试试img[src*="wan_up.png"] 选择器。
@wOxxOm 事情是图像是在 javascript 中添加的，我以前从来没有弄乱过 javascript，因为我一直在避免它，所以我不确定我应该如何使用它用于 javascript 的 css。
@wOxxOm 好吧，排序工作，使用来自维基的代码它确实添加了图像，但它不会删除旧的，所以旧的只是放在顶部并覆盖它跨度>
好吧，要说明为什么它在您的情况下不起作用，我需要查看该页面源。 wiki 技巧适用于我和其他许多人，所以......这是我最后一次在黑暗中拍摄的尝试：puu.sh/u5kUI/3a6021c5ff.txt 如果它适合你，我会添加一个答案。
@wOxxOm 好在折腾了一阵子，终于成功了，继续回答，我会接受的。

标签： javascript tampermonkey stylish

【解决方案1】：

在 Stylish 或类似扩展中使用 CSS。

#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 */
}

使用MutationObserver API 更改图像元素在显示之前。

MutationObserver 的包装器有很多，这里有一个基于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';
    })
});

编辑 @match 中的 URL，要替换的图像的选择器，相应的新图像 URL。

【讨论】：