HackerNews (https://news.ycombinator.com/) styles visited links with a similar color to unvisited links. I want to style the visited links a contrasting color.
I'm new to Tampermonkey (and web/js in general). I did search and the closest I found was this this code, which I modified. Sadly it doesn't appear to have any affect on visited links' color.
// ==UserScript==
// @name Hacker News Visited Link Highlighter
// @description Highlights visited links on Hacker News with a different color
// @namespace http://tampermonkey.net/
// @match https://news.ycombinator.com/*
// @version 2024-01-13
// ==/UserScript==
// History:
// --------
// 2024-01-13 First version
(function () {
GM_addStyle("a:visited { color: #FF0084 }");
})();
You can either just add the line @grant GM_addStyle
to your userscript header, like so:
// ==UserScript==
// @name Hacker News Visited Link Highlighter
// @description Highlights visited links on Hacker News with a different color
// @namespace http://tampermonkey.net/
// @match https://news.ycombinator.com/*
// @version 2024-01-13
// @grant GM_addStyle
// ==/UserScript==
Or you can also just inject the desired HTML yourself, like this:
// ==UserScript==
// @name Hacker News Visited Link Highlighter
// @description Highlights visited links on Hacker News with a different color
// @namespace http://tampermonkey.net/
// @match https://news.ycombinator.com/*
// @version 2024-01-13
// ==/UserScript==
(function() {
'use strict';
document.querySelector('body').insertAdjacentHTML('beforeend', init_css() );
setTimeout( () => {
//The setTimeout ensures the new element exists in the DOM
//before trying to attach this event handler
document.querySelector('#myDiv').addEventListener('click', () => {
alert('You clicked me');
});
},100);
function init_css(){
return `
<div id="myDiv">Here is my div</div>
<style id="myInitCss">
a:visited { color: #FF0084; }
#myDiv{position:absolute;top:0;left:0;padding:50px;font-size:18px;color:blue;background:wheat;z-index:99999999999;}
</style>
`;
}
})();
Using the 2nd method also demonstrates how you can add things like new DIVs, buttons, etc to the web page also. (Of course, you would remove the #myDiv element and associated style if not desired - that bit is there by way of example only)