How can I get Greasemonkey to highlight visited image links?

Question

I use a site that displays various image links, but which gives no visual indicator as to which links I've already visited.

How can Greasemonkey tweak the links so that I can see, at a glance which links I've visited?

For example, given links like:

<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. -->

Can Greasemonkey indicate which ones have been visited?

Answer 1

Greasemonkey can do this by using GM_addStyle() to style a:visited img links.

But there is a caveat:
:visited CSS will only accept color rules. This is for security reasons; see the previous link.

Here's one approach:

1. Add a border to all relevant image links.
2. Then :visited CSS can be used to change the border color of visited links.
   IMPORTANT:   :visited can't be used to add a border where one does not already exist.
3. This does outline all images, but there is currently no other way. JavaScript cannot detect visited links; only CSS can. (This is the whole point of the security changes.)

A Complete Greasemonkey/Tampermonkey script, that does that, looks like:

// ==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;          \
    }                                           \
" );

You can test it on this handy jsFiddle page.

• Without the script, the image-links look like this:
  

• After the script, the visited links are outlined in purple:
  

---

Notes:

1. The Stylish add-on can also make this kind of CSS-only change.
2. Related question: How can I detect visited and unvisited links on a page?