591_picture_shortcuts_tampermonkey_chrome

591_tampermonkey.js

// ==UserScript==
// @name     591 click next and previous with arrow-keyss
// @version  1
// @grant    none
// @match https://*.591.com.tw/*
// @run-at   document-start
// ==/UserScript==


(function() {
    'use strict';


KeyboardEvent        = (typeof KeyboardEvent === "object")  ?  KeyEvent  :  [];
const LEFT_KEY  = KeyboardEvent.DOM_VK_LEFT   ||  37;
const RIGHT_KEY = KeyboardEvent.DOM_VK_RIGHT  ||  39;

function checkPhotosDetailOpen() {
	return document.getElementsByClassName("photos-detail").length != 0;
}

function checkSmallPhotosDetailOpen() {
	return document.getElementsByClassName("small-images-list").length != 0;
}

function openPhotosDetail() {
	if(!checkPhotosDetailOpen()){
    var bigImages = document.getElementsByClassName("big-images");
    var smallImages = document.getElementsByClassName("small-images-list");
    if ( bigImages.length > 0 && bigImages[0].getElementsByTagName("img")?.length > 0) {
			bigImages[0].getElementsByTagName("img")[0].click();
    } else if (smallImages.length > 0) {
    	// alternate view, when a big image exists
    	smallImages[0].getElementsByTagName("img")[0].click();
    }
	}
}

function closePhotosDetail() {
	if(checkPhotosDetailOpen()){
		document.getElementsByClassName("close-btn")[0].click();
	}
}

function checkRemarksClosed() {
  var remarkBtn = document.getElementsByClassName("remark-btn");
  return remarkBtn.length > 0 && remarkBtn[0].getElementsByTagName("span")[0].innerHTML == "查看全部";
}

function expandRemarks() {
  if(checkRemarksClosed()) {
  	document.getElementsByClassName("remark-btn")[0].click();
  }
}


function keyboardHandler (zEvent) {
	var bBlockDefaultAction = false;

	//--- Assume we want only the plain keys, not the modified versions.
	if (zEvent.altKey  ||  zEvent.ctrlKey  ||  zEvent.shiftKey) {
		//-- Do nothing (most user-friendly option, in most cases).
	}
	else {
		if (zEvent.which == LEFT_KEY || zEvent.key == "h") {
			openPhotosDetail();
			var prevButtons = document.getElementsByClassName('prev-btn');
			var prevButton = prevButtons[0];
			prevButton.click();
			bBlockDefaultAction = true;
		}
		else if (zEvent.which == RIGHT_KEY || zEvent.key == "l") {
			openPhotosDetail();
			var nextButtons = document.getElementsByClassName('next-btn');
			var nextButton = nextButtons[0];
			nextButton.click();
			bBlockDefaultAction = true;
		} else if (zEvent.key == " ") {
			openPhotosDetail();
			bBlockDefaultAction = true;
		} else if (zEvent.key == "Escape" || zEvent.key == "j") {
      closePhotosDetail();
      // expand remarks on page movement, since harder to get to do after all JS loaded
      expandRemarks();
      window.scrollBy(0, 150);
			bBlockDefaultAction = true;
		} else if (zEvent.key == "k") {
      closePhotosDetail();
      // expand remarks on page movement, since harder to get to do after all JS loaded
      expandRemarks();
      window.scrollBy(0, -150);
			bBlockDefaultAction = true;
		}
	}

	if (bBlockDefaultAction) {
		zEvent.preventDefault ();
		zEvent.stopPropagation ();
	}
}

window.addEventListener ("keydown", keyboardHandler, false);

window.addEventListener('load', function() {
}, false);

})();

Thanks for making this.
I would recommend changing get* to just querySelector or querySelectorAll, which gives you a jquery style query interface to use.
For example, you can simplify the big images query to:

    const bigImages = document.querySelector(".big-images  img");

Also I would change var to const or let where appropriate.