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