Userscript adapatation (and improvement) of code found at https://codepen.io/michaelsboost/pen/fnizu - applied to mTurk.
// ==UserScript==
// @name mTurk HIT Fullscreen Crosshair CSS (as Userscript)
// @namespace salembeats
// @version 1.7
// @description Userscript adapatation (and improvement) of code found at https://codepen.io/michaelsboost/pen/fnizu - applied to mTurk.
// @author Cuyler Stuwe (salembeats) using code adapted from Michael Schwartz
// @include *
// @grant none
// ==/UserScript==
// *****************************************************************************
function isNotMturkFrame() {
return !(
window !== window.top &&
document.referrer.includes("worker.mturk.com/projects/")
);
}
if(isNotMturkFrame()) {return;}
// *****************************************************************************
// Just here for faster autocomplete suggestions.
const CROSSHAIR_STYLES = {
DOTTED: "dotted",
DASHED: "dashed",
SOLID: "solid"
};
const CROSSHAIR_COLORS = {
BLACK: "black",
RED: "red",
GREEN: "green",
BLUE: "blue"
};
// *****************************************************************************
// SET UP YOUR CROSSHAIR STYLE HERE.
// *****************************************************************************
const CROSSHAIR_THICKNESS_PX = 1;
const CROSSHAIR_STYLE = CROSSHAIR_STYLES.DOTTED;
const CROSSHAIR_COLOR = CROSSHAIR_COLORS.RED;
const 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} ${CROSSHAIR_COLOR};
border-left: ${CROSSHAIR_THICKNESS_PX}px ${CROSSHAIR_STYLE} ${CROSSHAIR_COLOR};
pointer-events: none;
z-index: ${Number.MAX_SAFE_INTEGER};
}
</style>
`);
let cH = document.getElementById('crosshair-h'),
cV = document.getElementById('crosshair-v');
document.addEventListener("mousemove", e => {
cH.style.top = e.clientY + "px";
cV.style.left = e.clientX + "px";
});