如何让Greasemonkey突出显示访问过的图像链接？

Question

我使用的网站显示各种图片链接，但没有提供关于我已访问过的链接的可视指示。

Greasemonkey如何调整链接以便我可以一目了然地看到我访问过哪些链接？

例如，给定的链接如下：

<a href="/056"> <img src="pic_A.png"> </a>
<a href="/138"> <img src="pic_1.png"> </a>
<a href="/144"> <img src="pic_B.png"> </a>
<a href="/150"> <img src="pic_2.png"> </a>
<a href="/153"> <img src="pic_C.png"> </a>
<!-- etc. -->

Greasemonkey可以指出访问了哪些？

Answer 1

Greasemonkey可以使用GM_addStyle()来设置a:visited img个帖子的样式。

但有一点需要注意：
:visited CSS will only accept color rules.这是出于安全原因;见上一个链接。

这是一种方法：

1. 为所有相关图片链接添加边框。
2. 然后:visited CSS可用于更改已访问链接的边框颜色 重要提示：:visited不能用于添加尚不存在的边框。
3. 这确实概述了所有图像，但目前没有其他方法。 JavaScript无法检测访问过的链接;只有CSS可以。 （这是安全性变化的重点。）


这样做的完整Greasemonkey / Tampermonkey脚本如下所示：

// ==UserScript==
// @name     Stylize visited image links
// @include  https://fiddle.jshell.net/BrockA/40dc7m31/*
// @grant    GM_addStyle
// ==/UserScript==
GM_addStyle ( "                                 \
    a img {                                     \
        border: 5px solid blue !important;      \
        background: lightblue  !important;      \
    }                                           \
    a:visited img {                             \
        border: 5px solid purple !important;    \
        background: purple !important;          \
    }                                           \
" );


您可以在this handy jsFiddle page.

上对其进行测试

• 没有脚本，图片链接如下所示：
  

• 在脚本之后，访问过的链接以紫色标出：
  

注意：

1. Stylish add-on也可以进行这种仅限CSS的更改。
2. 相关问题：How can I detect visited and unvisited links on a page?

Answer 2

这就是CSS中的a:visited。

a:visited {
  text-decoration: underline;
  color: #09d;
}

如果<a>标签内有图片，您可以这样做：

a:visited {
  border: 1px dotted green;
}