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

Question

作为 rollout of new network site themes, many of the Stack Exchange sites I visit regularly now have links in posts and comments underlined 的一部分。

更喜欢无下划线的外观，因为我主要使用 Chrome (68.0.3440.106 (Official Build) (64-bit)) 和 Edge (42.17692.1004.0)，它们似乎没有一个全局覆盖设置，我安装了 Tampermonkey and wrote a small userscript, based on 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        *://*.whosebug.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);
})();

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

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

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

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

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

Answer 1

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

对于纯 CSS/style 更改，Stylus 更合适，通常优于 Tampermonkey。

无论如何，要avoid/reduce用Tampermonkey闪烁你做需要@run-at document-start.否则页面会在添加样式之前进行大量渲染。

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

页面 CSS（或其他扩展）也有可能正在使用 !important; 或通过 link 的 [=15] 应用 CSS =] 属性。如果您的脚本失败，请为此检查页面源代码（以及上述浏览器控制台）。

无论如何，根据 linked 答案注入 CSS —— 并消除不需要的垃圾 —— 你的脚本变成：

// ==UserScript==
// @name         Stack Exchange, Remove link underlines
// @version      0.2
// @match        *://*.stackexchange.com/*
// @match        *://*.whosebug.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        *://*.whosebug.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);

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

Removing underline style for Stack Exchange links without flicker

css

google-chrome

userscripts

tampermonkey

microsoft-edge