mTurk HIT Fullscreen Crosshair CSS (as Userscript)

Userscript adapatation of code found at https://codepen.io/michaelsboost/pen/fnizu
当前为 2018-02-19 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         mTurk HIT Fullscreen Crosshair CSS (as Userscript)
// @namespace    salembeats
// @version      1.2
// @description  Userscript adapatation of code found at https://codepen.io/michaelsboost/pen/fnizu
// @author       Cuyler Stuwe (salembeats) using code adapted from Michael Schwartz
// @include      *
// @grant        none
// @require      http://code.jquery.com/jquery-3.3.1.slim.min.js
// ==/UserScript==
 
// *****************************************************************************
 
function isNotMturkFrame() {
	return !(
		window !== window.top &&
		document.referrer.includes("worker.mturk.com/projects/")
	);
}
 
if(isNotMturkFrame()) {return;}
 
// *****************************************************************************
 
const CROSSHAIR_STYLES = {
	DOTTED: "dotted",
	DASHED: "dashed",
	SOLID: "solid"
};
 
const CROSSHAIR_COLORS = {
	BLACK: "black",
	RED: "red"
};
 
// *****************************************************************************
// SET UP YOUR CROSSHAIR STYLE HERE.
// *****************************************************************************
 
const CROSSHAIR_THICKNESS_PX              = 1;
const CROSSHAIR_STYLE                     = CROSSHAIR_STYLES.DOTTED;
const CROSSHAIR_COLOR                     = CROSSHAIR_COLORS.BLACK;
SHOULD_MODIFY_POINTER_TO_CROSSHAIR_CURSOR = true;
 
// *****************************************************************************
 
document.body.insertAdjacentHTML("beforeend", `
<div id="crosshair-h" class="hair"></div>
<div id="crosshair-v" class="hair"></div>
`);
 
document.head.insertAdjacentHTML("beforeend", `
<style>
 
* {
${SHOULD_MODIFY_POINTER_TO_CROSSHAIR_CURSOR ? "cursor: crosshair !important;" : ""}
}
 
#crosshair-h {
width: 100%;
}
 
#crosshair-v {
height: 100%;
}
 
.hair {
position: fixed;
top:0; left:0;
margin-top: 0px; /* The offset here by the original author made zero sense. */
margin-left: 0px; /* The offset here by the original author made zero sense. */
background: transparent;
border-top: ${CROSSHAIR_THICKNESS_PX}px ${CROSSHAIR_STYLE} #000;
border-left: ${CROSSHAIR_THICKNESS_PX}px ${CROSSHAIR_STYLE} #000;
pointer-events: none;
z-index: ${Number.MAX_SAFE_INTEGER};
}
</style>
`);
 
$(document).ready(function() {
 
	var cH = $('#crosshair-h'),
		cV = $('#crosshair-v');
 
	window.addEventListener("mousemove", e => {
	});
 
	$(this).on('mousemove touchmove', function(e) {
 
		// Original author was using pageX and pageY, but we really need clientX and clientY.
		cH.css('top', e.clientY);
		cV.css('left', e.clientX);
	});
 
});
欢迎访问Greasy Fork镜像
