用户脚本，用于替换Stack Exchange页面上的图标，垃圾邮件背景图片（应在其中放置图标）

Question

我正在尝试编写用户脚本来解决新的Stack Exchange设计中突出显示的编辑器图标颜色错误的问题（至少在使用其他原色的站点上，例如tex.stackexchange，在在https://meta.stackexchange.com/a/317581/237989中有更多详细信息）

我尝试了以下代码

// ==UserScript==
// @name        StackExchange TEX, adjust css
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `

    .wmd-button{
        background-image: url("https://svgshare.com/i/9T3.svg") !important;
    }

` );

但这会导致

Answer 1

注意：

1. 该脚本在设置错误的节点样式。页面源^{（Link to typical example）}类似于：

   <li class="wmd-button" id="wmd-code-button" title="Code Sample <pre><code> Ctrl+K">
       <span style="background-position: -80px 0px;"></span>
   </li>
   

   因此，名义上，您应该设置.wmd-button > span的样式，但是...

2. 您想与其他出色的脚本/扩展名（Example）玩得很好，因此请使用.wmd-button[id] > span来减少副作用。

3. 由于svgshare.com已被证明停机时间很长，您可能需要将该图像转换为PNG格式，并将其托管在i.stack.imgur.com上。

因此您的脚本将变为：

// ==UserScript==
// @name        Stack Exchange TEX, fix edit-icon hover colors
// @description Adulterates that beautiful, beautiful orange.
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `

    .wmd-button[id] > span {
        background-image: url("https://svgshare.com/i/9T3.svg") !important;
    }

` );