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?

score 4 · Accepted Answer · edited May 23 '17 at 10:27

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:

Add a border to all relevant image links.
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.
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:

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

This works, thanks. I assume there's no way to do this without impacting the css of the unvisited links (I tried replacing your blue with transparent, but it breaks the other rule) ? — JohnRU, Dec 16 '15 at 20:47
Correct. `:visited` can't change the thickness, transparency, or existence of the border. But you *can* set the unvisited link's border color to the same color as the background, EG white for many pages. — Brock Adams, Dec 16 '15 at 20:49

Johannes · Answer 2 · 2015-12-16T01:14:03.527

0

That's what a:visitedin the CSS is for.

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

In case of an image inside the <a> tag you could for example do this:

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

edited Dec 16 '15 at 01:14

answered Dec 16 '15 at 01:07

Johannes

64,305
18
73
130

1

I'm sorry but it doesn't seem to work. text-decoration and color are only for texts, not images, and the border option does not seem to be applicable for security reasons – JohnRU Dec 16 '15 at 01:14
security reasons? I doubt that, a border can't do any harm... But you might try to add `!important`, like this: `a:visited { border: 1px dotted green !important; }` – Johannes Dec 16 '15 at 01:16
1

oopps, I just saw that `greasemonkey` tag now. So you are not writing code yourself, I assume. I have to admit I don't know Greasemonkey, the above answer was given with changing the original code in mind... – Johannes Dec 16 '15 at 02:03

How can I get Greasemonkey to highlight visited image links?

2 Answers2