Small script to browse to previous/next comic...

Hello wonderful people!

So, something different. I made short Tampermonkey/Greasemonkey script, so you can go to previous/next comic directly when reading - by pressing left/right arrows on the keyboard, or by pressing buttons in top-right corner.

I hope it's ok to share it.

How to use it: After installing Tampermonkey or Greasemonkey in your browser, create a new user script and paste this code. Open any Extra Fabulous Comic, and you should have two buttons in top-right corner of the page. You can then navigate to previous/next comic by pressing those buttons, or by keyboard arrows left or right.

// ==UserScript==
// @name     Extra Fabulous Comics browser
// @version  1
// @grant    none
// @include  https://www.extrafabulouscomics.com/__*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
// ==/UserScript==

function ChangePage( diff ) {
  var url = document.location.href.split('__');
  if( url.length != 2 ) return;
  
  var n = parseInt( url[1] );
  n += diff;

  // Change URL
  var newUrl = url[0] + '__' + ('000' + n).substr(-3);
  document.location.href = newUrl;
}

function OnKeyPressed(e) {
  e = e || window.event;
  switch( e.key ) {
    case 'ArrowLeft': ChangePage( -1 ); break;
    case 'ArrowRight': ChangePage( 1 ); break;
  }
}


function CreateButtons()
{
  document.addEventListener( 'keydown', OnKeyPressed );
  
  highestZ = 0;   
  $("div").each(function() {
    var _current = parseInt( $(this).css("zIndex"), 10 );
    if( _current > this.highestZ ) {
      this.highestZ = _current + 5;
    }
  });

  $('body').append( `
<div style="position: fixed; z-index:` + (this.highestZ + 500) + `; top: 0px; right: 0px; background: #ecebeb; border: 1px solid #333; border-radius:5px; padding: 8px;">
		<input type="button" id="btnPrev" class="canHide" value="Prev" style="border-radius: 2px" />
		<input type="button" id="btnNext" class="canHide" value="Next" style="border-radius: 2px" />
</div>
` );
  
  $('#btnPrev').click( function() {
    ChangePage( -1 );
  } );
  $('#btnNext').click( function() {
    ChangePage( +1 );
  } );
}


window.addEventListener( 'load', CreateButtons, false );