gistfile1.js

(function($) {
  // add a button for it
  $('.Message a[href*="View.html?Post="]')
    .after($('<span class="messagePreview">&hellip;</span>'));
  
  // make the buttons work
  $('.messagePreview').click(function(evt) {
    console.log("Previewing message...");

    var postID = $(evt.target).parent()
        .find('a[href*="View.html?Post="]').attr('href').split("=")[1];
    
    // it fetches the comment via XHR from the lovely API powdertoy.co.uk has on every page
    var x = new XMLHttpRequest(); 
    x.open("GET", window.location.pathname.replace(/html/, "json"));
    debugger;
    // Might be wise.
    xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');


    x.onreadystatechange = function() {
      if (x.readyState === 4) {
        console.log("Got some delicious JSON!"); 
        try {
          var post = JSON.parse(x.responseText); 
          var i = 0; 

          // Posts are in an array of objects rather than key/value by ID. Find Post with proper ID.
          while (post.Posts[i] && post.Posts[i++].ID != postID);

          if (!post.Posts[i]) 
            return console.log("Didn't find a post with that ID!");

          var mx = evt.pageX || evt.clientX + document.body.scrollLeft;
          var my = evt.pageY || evt.clientY + document.body.scrollTop;

          var $box = $('<div id="commentBox" style="position: absolute; top:'+my+'px; left:'+mx+'px; border:3px solid black;">'+post.Posts[i].Post+'</div>');
          $box.appendTo($(document.body));
        }
        catch (err) {
          console.log(err); 
        }
      }
    }
    x.send();
  });

})($ || jQuery || window.jQuery);