我怎样才能让 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

这就是 CSS 中 a:visited 的用途。

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

如果图像位于 <a> 标签内，您可以这样做：

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

Answer 2

Greasemonkey 可以通过使用 GM_addStyle() 样式 a:visited img links.

来做到这一点

但有一个警告：
:visited CSS will only accept color rules. 这是出于安全考虑；看前面的link.

这是一种方法：

为所有相关图像添加边框 links.
然后:visited CSS可以用来改变访问过的link的边框颜色。
重要提示：:visited 不能用于添加尚不存在的边框。
这确实是勾勒所有图像，但目前没有其他方法。 JavaScript 无法检测到已访问的 link；只有 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.

上测试

没有脚本，图像-link看起来像这样：
脚本之后，访问过的links用紫色勾勒出来：

备注：

Stylish add-on也可以做这种CSS-only的改变。
相关问题：How can I detect visited and unvisited links on a page?

我怎样才能让 Greasemonkey 突出显示访问过的图像链接？

How can I get Greasemonkey to highlight visited image links?

html

javascript

css

greasemonkey