How can I get Greasemonkey to highlight visited image links?
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:
- 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.
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?
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad