How can I get Tampermoney to set the color of visited links?

Question

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

})();

Answer 1

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)