使用 Greasemonkey 替换 css 文件中的行

Question

我正在尝试编写一个 Greasemonkey 脚本来替换 .css 文件中的一行。

all.css 的原始行是

#header {
    background: transparent url('img/bg-graph-top.png?v=7e4ce14d05fb') no-repeat 50% -25px;
}

我想用

替换它

#header {
    background: transparent url('https://upload.wikimedia.org/wikipedia/commons/0/09/Dummy_flag.png') no-repeat 50% -25px;
}

基于我试着写我的第一个用户脚本是这样的：

// ==UserScript==
// @name            swap
// @include         http://tex.stackexchange.com/*
// @include         https://tex.stackexchange.com/*
// @require         http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==

var desiredImage    = "https://upload.wikimedia.org/wikipedia/commons/0/09/Dummy_flag.png";

//--- Straight image swap:
$('img/bg-graph-top.png?v=7e4ce14d05fb').attr ('src', desiredImage);

/*--- Replace the link's -- with the logo as a background -- contents with just a plain image.
    Since this image is transparent, clear the old BG image.
    Also constrain the new img to its container. 
*/
$('#header all').css ('background-', 'none')
                .append ('<url>').find ('img/bg-graph-top.png?v=7e4ce14d05fb')  .attr ('src', desiredImage).css ();

但是图像没有改变:(

Answer 1

您正在尝试更改背景图片，而不是 <img> 标签，就像其他答案一样。

对于这样的事情，只需使用 CSS 覆盖。

这是 Greasemonkey/Tampermonkey 脚本中的样子：

// ==UserScript==
// @name        _TeX SE, Swap header background
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
    #header {
        background: transparent url('https://upload.wikimedia.org/wikipedia/commons/0/09/Dummy_flag.png') no-repeat 50% -25px !important;
    }
` );

注意 !important 标志。

此外，如果您的脚本进行任何 DOM 操作，@run-at document-start 可能会使事情复杂化。

无论如何，对于纯粹的 CSS 更改，像这个，你最好使用 the Stylish extension。 它不那么大惊小怪，性能更好

使用 Greasemonkey 替换 css 文件中的行

Replace line in css file, using Greasemonkey

css

greasemonkey

userscripts

tampermonkey