删除 Stack Exchange 链接的下划线样式而不闪烁

Question

作为rollout of new network site themes 的一部分，我经常访问的许多 Stack Exchange 网站现在都有links in posts and comments underlined。

更喜欢无下划线的外观，并且由于我主要使用 Chrome（68.0.3440.106（官方构建）（64 位））和 Edge（42.17692.1004.0），它们似乎没有全局覆盖设置，所以我安装了Tampermonkey 并基于an example I found on Stack Apps 编写了一个小用户脚本，以及我通过搜索此站点找到的一些相关代码以寻求解决方案：

// ==UserScript==
// @name         Remove link underlines on Stack Exchange
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *://*.stackexchange.com/*
// @match        *://*.stackoverflow.com/*
// @match        *://*.mathoverflow.com/*
// @match        *://*.serverfault.com/*
// @match        *://*.superuser.com/*
// @match        *://*.stackapps.com/*
// @match        *://*.askubuntu.com/*
// @grant        none
// @run-at       document-body
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    var style = document.createElement("style");
    style.appendChild(document.createTextNode("a {text-decoration: none !important;}"));
    document.head.appendChild(style);
})();

这似乎基本上工作得很好，虽然我确实注意到有时在页面加载时有简短的链接下划线，然后它被替换为无下划线的外观。

我可以做些什么来让我喜欢的外观更直接地出现，而不会出现短暂的下划线？

我尝试了// @run-at document-start，它消除了闪烁，但有时这根本无法应用样式更改。

除了编写第一个用户脚本之外，我没有这方面的经验，所以请解释任何提议的更改的好处和风险。

我选择（并标记）Tampermonkey 是为了与我选择的浏览器兼容，并使我能够在将来运行其他用户脚本（包括不限于样式更改的脚本）。

Answer 1

参考：How to change a class CSS with a Greasemonkey/Tampermonkey script?

对于纯 CSS/样式更改，Stylus 更合适，并且通常优于 Tampermonkey。

无论如何，为了避免/减少使用 Tampermonkey 的闪烁您确实需要@run-at document-start。否则，页面将在添加样式之前大量呈现。

但是，如果偶尔无法正常工作，则很可能是在这些情况下在document.head 可用之前触发。 （理想情况下，您会在浏览器控制台上看到错误。）

页面 CSS（或其他扩展名）使用 !important; 或通过链接的 style 属性应用 CSS 的可能性也很小。如果您的脚本失败，请检查页面源代码（以及上述浏览器控制台）。

无论如何，根据链接的答案注入 CSS ——并消除不必要的麻烦——你的脚本变成：

// ==UserScript==
// @name         Stack Exchange, Remove link underlines
// @version      0.2
// @match        *://*.stackexchange.com/*
// @match        *://*.stackoverflow.com/*
// @match        *://*.mathoverflow.com/*
// @match        *://*.serverfault.com/*
// @match        *://*.superuser.com/*
// @match        *://*.stackapps.com/*
// @match        *://*.askubuntu.com/*
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==

GM_addStyle ( `a {text-decoration: none !important;}` );

---

---

或者，如果你被诅咒需要支持 Greasemonkey 4+：

// ==UserScript==
// @name         Stack Exchange, Remove link underlines
// @version      0.2
// @match        *://*.stackexchange.com/*
// @match        *://*.stackoverflow.com/*
// @match        *://*.mathoverflow.com/*
// @match        *://*.serverfault.com/*
// @match        *://*.superuser.com/*
// @match        *://*.stackapps.com/*
// @match        *://*.askubuntu.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

var D               = document;
var newNode         = D.createElement ('style');
newNode.textContent = "a {text-decoration: none !important;}";

var targ    = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
targ.appendChild (newNode);