mTurk HIT Fullscreen Crosshair CSS (as Userscript)

Userscript adapatation (and improvement) of code found at https://codepen.io/michaelsboost/pen/fnizu - applied to mTurk.

  1. // ==UserScript==
  2. // @name mTurk HIT Fullscreen Crosshair CSS (as Userscript)
  3. // @namespace salembeats
  4. // @version 1.7
  5. // @description Userscript adapatation (and improvement) of code found at https://codepen.io/michaelsboost/pen/fnizu - applied to mTurk.
  6. // @author Cuyler Stuwe (salembeats) using code adapted from Michael Schwartz
  7. // @include *
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. // *****************************************************************************
  12.  
  13. function isNotMturkFrame() {
  14. return !(
  15. window !== window.top &&
  16. document.referrer.includes("worker.mturk.com/projects/")
  17. );
  18. }
  19.  
  20. if(isNotMturkFrame()) {return;}
  21.  
  22. // *****************************************************************************
  23.  
  24. // Just here for faster autocomplete suggestions.
  25.  
  26. const CROSSHAIR_STYLES = {
  27. DOTTED: "dotted",
  28. DASHED: "dashed",
  29. SOLID: "solid"
  30. };
  31.  
  32. const CROSSHAIR_COLORS = {
  33. BLACK: "black",
  34. RED: "red",
  35. GREEN: "green",
  36. BLUE: "blue"
  37. };
  38.  
  39. // *****************************************************************************
  40. // SET UP YOUR CROSSHAIR STYLE HERE.
  41. // *****************************************************************************
  42.  
  43. const CROSSHAIR_THICKNESS_PX = 1;
  44. const CROSSHAIR_STYLE = CROSSHAIR_STYLES.DOTTED;
  45. const CROSSHAIR_COLOR = CROSSHAIR_COLORS.RED;
  46. const SHOULD_MODIFY_POINTER_TO_CROSSHAIR_CURSOR = true;
  47.  
  48. // *****************************************************************************
  49.  
  50. document.body.insertAdjacentHTML("beforeend", `
  51. <div id="crosshair-h" class="hair"></div>
  52. <div id="crosshair-v" class="hair"></div>
  53. `);
  54.  
  55. document.head.insertAdjacentHTML("beforeend", `
  56. <style>
  57.  
  58. * {
  59.  
  60. ${SHOULD_MODIFY_POINTER_TO_CROSSHAIR_CURSOR ? "cursor: crosshair !important;" : ""}
  61.  
  62. }
  63.  
  64. #crosshair-h {
  65.  
  66. width: 100%;
  67.  
  68. }
  69.  
  70. #crosshair-v {
  71.  
  72. height: 100%;
  73.  
  74. }
  75.  
  76. .hair {
  77.  
  78. position: fixed;
  79. top:0; left:0;
  80.  
  81. margin-top: 0px; /* The offset here by the original author made zero sense. */
  82. margin-left: 0px; /* The offset here by the original author made zero sense. */
  83.  
  84. background: transparent;
  85.  
  86. border-top: ${CROSSHAIR_THICKNESS_PX}px ${CROSSHAIR_STYLE} ${CROSSHAIR_COLOR};
  87. border-left: ${CROSSHAIR_THICKNESS_PX}px ${CROSSHAIR_STYLE} ${CROSSHAIR_COLOR};
  88.  
  89. pointer-events: none;
  90.  
  91. z-index: ${Number.MAX_SAFE_INTEGER};
  92.  
  93. }
  94. </style>
  95. `);
  96.  
  97. let cH = document.getElementById('crosshair-h'),
  98. cV = document.getElementById('crosshair-v');
  99.  
  100. document.addEventListener("mousemove", e => {
  101. cH.style.top = e.clientY + "px";
  102. cV.style.left = e.clientX + "px";
  103. });

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址