Bookmarklet to ajax wikipedia links into the page one paragraph at a time

ajaxipedia.js

/*
   This is a Bookmarklet to make Wikipedia a bit more enjoyable.
   
   1. save the one line of javascript as a bookmark
   2. click it on any wikipedia page
   3. all links will now load into the page on click
   4. click the loaded paragraph again to load the next
   5. after reading transforms back to a link, also all links that can't be loaded
   6. you have to re-activate the bookmarklet if you navigate away or refresh the page
   8. there are empty paragraphs sometimes
*/

javascript:Array.prototype.slice.call(document.links).forEach(function(e){e.µ=0;e.ß=e.href;e.o=e.innerText;e.href="javascript:void(0)";e.onclick=function(){x=new XMLHttpRequest();x.responseType="document";x.open("GET",e.ß);x.onreadystatechange=function w(){if(x.readyState==4){if(x.status!=200)return e.href=e.ß,e.innerText+=" couldn't load";var z=x.response.querySelectorAll("#mw-content-text>p");if(z[e.µ]){e.innerHTML="<p style='padding:15px;color:#eee;background:hsl("+Math.random()*360+",60%,30%)'>"+z[e.µ].innerText+"</br><p>"+e.µ+" of "+z.length+"</p>";e.µ++;e.onclick=w;}else{e.innerText=e.o;setTimeout(function(){e.href = e.ß},2000)}}};x.send()}});void(0)



//Here is the clean version of it to check how it works, you don't need that part to use it.

javascript:Array.prototype.slice.call(document.links).forEach(function(e){
  e.µ=0;
  e.ß=e.href;
  e.o=e.innerText;
  e.href="javascript:void(0)";
  e.onclick=function(){
    x=new XMLHttpRequest();
    x.responseType="document";
    x.open("GET",e.ß);
    x.onreadystatechange=function w(){
      if(x.readyState==4){
        if(x.status!=200)return e.href=e.ß,e.innerText+=" couldn't load";
        var z=x.response.querySelectorAll("#mw-content-text>p");
        if(z[e.µ]){
          e.innerHTML="<p style='padding:15px;color:#eee;background:hsl("+Math.random()*360+",60%,30%)'>"+
          z[e.µ].innerText+"</br><p>"+e.µ+" of "+z.length+"</p>";
          e.µ++;
          e.onclick=w;
        }else{
          e.innerText=e.o;
          setTimeout(function(){e.href = e.ß},2000)
        }
      }
    };
    x.send()
  }
});void(0)


//And here the same, this time clearly named

javascript:Array.prototype.slice.call(document.links).forEach(function(LINK){
   LINK.COUNTER  =0; //could have been done with a var, didn't realize until just now. Could have also been done without a var (challenge mode)
   LINK.PATH     =LINK.href;
   LINK.NAME     =LINK.innerText;
   LINK.href     ="javascript:void(0)";
   LINK.onclick  =function(){
      xhr=new XMLHttpRequest();
      xhr.responseType="document";
      xhr.open("GET",LINK.PATH);
      xhr.onreadystatechange=function LOADED(){
         if(xhr.readyState==4){
            if(xhr.status!=200)
            return LINK.href=LINK.PATH,
            LINK.innerText+=" couldn't load"; //provide some user feedback why this link didn't work and revert to normal link
               var LIST=xhr.response.querySelectorAll("#mw-content-text>p");//selecting the content from loaded document
               if(LIST[LINK.COUNTER]){
                  LINK.innerHTML="<p style='padding:15px;color:#eee;background:hsl("+Math.random()*360+",60%,30%)'>"+//make nice
                  LIST[LINK.COUNTER].innerText+"</br><p>"+LINK.COUNTER+" of "+LIST.length+"</p>";
                  LINK.COUNTER++;
                  LINK.onclick=LOADED; //shortcut the loading so it doesn't refetch the document
               }else{
                  LINK.innerText=LINK.NAME;
                  setTimeout(function(){LINK.href = LINK.PATH},2000) //need a timeout here because my mouse is broken
               }
            }
         };
      x.send()
   }
});void(0)