change url links on document load

Question

i have this js bookmarklet that makes all the current page's font colors black. what i wanted is to maintein the effect of the bookmarklet even clicking on the page's links

javascript:(
function(){ 
 var newSS, styles='* { color: black !important }';
 if(document.createStyleSheet) { 
  document.createStyleSheet("javascript:'"+styles+"'"); 
 } else { 
  newSS=document.createElement('link'); 
  newSS.rel='stylesheet'; 
  newSS.href='data:text/css,'+escape(styles); 
  document.getElementsByTagName("head")[0].appendChild(newSS); 
 }
}
)();

so i though if there is a way we can change the current page's links into something like

<a href="javascript:'load link location' then 'apply color effect'">Link</a>

*cant actually think of the right codes lol i don't want to use stylish addons or something like that xD

Answer 1

So there are a couple of parts to this:

1. Write some javascript to intercept all link clicks and redirect to your function. See Use Javascript to Intercept All Document Link Clicks.
2. Write the function that gets called on link intercept. This function would do the following:
   1. Pull the href of the link and place it in document.location.
   2. Call your black highlight function

So roughly the code would look something like this:

functionToHighlightTextBlack();  // Apply to current page

// Apply to future page
for (var ls = document.links, numLinks = ls.length, i=0; i < numLinks; i++){
    ls[i].onClick = function() {
       document.location = ls[i].href;
       functionToHighlightTextBlack();
    }
}