How can I get Greasemonkey to highlight visited image links?

- 1 answer

Ad

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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/056"> <img src="pic_A.png"> </a>
<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/138"> <img src="pic_1.png"> </a>
<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/144"> <img src="pic_B.png"> </a>
<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/150"> <img src="pic_2.png"> </a>
<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/153"> <img src="pic_C.png"> </a>
<!-- etc. -->

Can Greasemonkey indicate which ones have been visited?

Ad

Answer

Ad

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:
    before

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


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?
Ad
source: stackoverflow.com
Ad