DEV Community: Suriya Prakash

Real-Time Notifications in MERN using Socket.IO

Suriya Prakash — Fri, 30 Jan 2026 09:00:57 +0000

Real-time notifications are a must for modern applications—whether it’s admin alerts, user signups, or background job updates.

In this article, I’ll walk through how to implement Socket.IO notifications in a MERN stack, using a real production-style backend setup.

🧱 Tech Stack

MongoDB
Express.js
React.js
Node.js
Socket.IO
node-cron (for scheduled background jobs)

📌 Use Case

Notify admins when a new user signs up
Send real-time alerts when a technician’s work exceeds 2 hours
Persist notifications in MongoDB
Push notifications instantly to connected clients

⚙️ Server Setup (Socket.IO + Express)

First, we create an HTTP server and attach Socket.IO to it.

const http = require("http");
const { Server } = require("socket.io");

const server = http.createServer(app);

const io = new Server(server, {
  cors: {
    origin: "*",
  },
});

app.set("io", io);

Why app.set('io', io)?
This allows us to access the Socket.IO instance anywhere in our app, including controllers and services.

🧩 Express Middleware & Routes
All normal Express middleware still works:

app.use(express.json());
app.use(cors());
app.use(helmet());
app.use("/api/admin", adminRouter);

Socket.IO runs alongside your REST APIs—not instead of them.

🔔 Emitting Notifications on User Signup
When a user completes signup, we:

Save the notification in MongoDB
Emit a real-time event via Socket.IO

Signup Controller (Important Part)

const io = req.app.get('io');

const notification = await Notification.create({
  type: 'signup',
  message: `New user registered: ${user.basicInfo.fullName}`,
  userId: user._id,
  time: new Date(),
  read: false
});

io.emit('notification', notification);

What’s happening here?

io.emit() broadcasts to all connected clients
You can later replace this with:
- io.to(userId).emit() (user-specific)
- io.to("admin").emit() (role-based rooms)

⏱ Background Notifications using Cron Jobs

We also send notifications automatically when a technician works longer than 2 hours.

Cron Job Example

cron.schedule('*/5 * * * * *', async () => {
  const inProgressTechServices = await TechnicianUserService.find({
    status: "in-progress",
    adminNotified: { $ne: true }
  });

  for (const techService of inProgressTechServices) {
    let totalSeconds = techService.workDuration || 0;

    if (techService.workStartedAt) {
      totalSeconds += Math.floor((Date.now() - techService.workStartedAt) / 1000);
    }

    if (totalSeconds >= 7200) {
      await Notification.create({
        title: "Technician work exceeded 2 hours",
        message: "Service request exceeded time limit",
        type: "work_overdue"
      });

      techService.adminNotified = true;
      await techService.save();
    }
  }
});

This ensures:

Notifications are automatic
No duplicate alerts
Works even if no user is logged in

⚛️ Frontend (React) – Listening to Notifications

On the React side:

import { io } from "socket.io-client";

const socket = io("http://localhost:5000");

useEffect(() => {
  socket.on("notification", (data) => {
    console.log("New Notification:", data);
  });

  return () => socket.off("notification");
}, []);

🧠 Best Practices

✅ Store notifications in DB
✅ Emit only IDs or small payloads
✅ Use Socket.IO rooms for scalability
✅ Combine REST APIs + sockets
❌ Don’t rely on sockets alone for persistence

🎯 Final Thoughts

Socket.IO works best when:

REST handles data
Sockets handle events

Custom Bezier Tool in Konva.js with React + Redux

Suriya Prakash — Thu, 28 Aug 2025 05:46:06 +0000

Building a Custom Bezier Tool in Konva.js (React + Redux)

If you’ve ever tried building a Pen Tool (like in Photoshop, Illustrator, or Figma), you’ll know how challenging it can be.

Doing this inside Konva.js is not straightforward — handling Bezier curves, multiple path options, and state management requires careful design.

That’s why I’m sharing my implementation here — not as a polished final library, but as knowledge-sharing for anyone trying to implement a Pen/Bezier tool in a Konva.js + React + Redux stack.

Hopefully, this helps you avoid some of the pain points I went through.

⚡ Setup

Install dependencies:

npm install konva react-konva react-redux @reduxjs/toolkit react-icons

🏗️ Redux Slice (toolSlice.js)

Here’s how I structured my toolSlice to support Bezier options and control points:

// toolSlice.js

// ...Bezier option state...
initialState: {
  // ...
  bezierOption: "Straight Segments",
  spiroPoints: [],
  bsplinePoints: [],
  controlPoints: [],
  // ...
},

reducers: {
  setBezierOption: (state, action) => {
    state.bezierOption = action.payload;
  },
  addSpiroPoint: (state, action) => {
    state.spiroPoints.push(action.payload);
  },
  addBSplinePoint: (state, action) => {
    const point = action.payload;
    if (point && typeof point.x === "number" && typeof point.y === "number") {
      state.bsplinePoints.push(point);
    } else {
      console.error("Invalid point format in reducer:", point);
    }
  },
  clearBSplinePoints: (state) => {
    state.bsplinePoints = [];
  },
  addControlPoint: (state, action) => {
    state.controlPoints.push(action.payload);
    console.log("Updated controlPoints in Redux:", [...state.controlPoints]);
  },
  setControlPoints: (state, action) => {
    console.log("Setting control points in Redux:", action.payload);
    state.controlPoints = action.payload;
  },
  clearControlPoints: (state) => {
    state.controlPoints = [];
  },
  // ...other bezier-related reducers...
  addBezierPoint: (state, action) => {
    const selectedLayer = state.layers[state.selectedLayerIndex];
    const lastBezierShape = selectedLayer.shapes.find(
      (shape) => shape.type === "Bezier"
    );
    if (lastBezierShape) {
      lastBezierShape.points.push(...action.payload);
      console.log("Updated Bezier points in Redux:", lastBezierShape.points);
    } else {
      selectedLayer.shapes.push({
        id: `bezier-${Date.now()}`,
        type: "Bezier",
        points: action.payload,
        strokeColor: state.strokeColor,
        strokeWidth: 2,
      });
      console.log("New Bezier shape added:", action.payload);
    }
  },
  clearBezier: (state) => {
    state.shapes = state.shapes.filter((shape) => shape.type !== "Bezier");
  },
}

export const {
  setBezierOption,
  addSpiroPoint,
  addBSplinePoint,
  clearBSplinePoints,
  addControlPoint,
  setControlPoints,
  clearControlPoints,
  addBezierPoint,
  clearBezier,
} = toolSlice.actions;

🎨 Panel Component (Panel.jsx)

This is where I render the Bezier tool inside the Konva canvas:

// panel.jsx

// ...Bezier tool cursor icon...
const toolCursors = {
  Bezier: <BsVectorPen size={20} color="black" />,
};

// ...Bezier option state...
const bezierOption = useSelector((state) => state.tool.bezierOption);

// ...Bezier drawing state...
const controlPoints = useSelector((state) => state.tool.controlPoints);

// ...Bezier path rendering...
{
  selectedTool === "Bezier" && (
    <Path
      data={getBezierPath()}
      stroke="black"
      strokeWidth={2}
      fill={isShapeClosed ? "rgba(0,0,0,0.1)" : "transparent"}
      closed={isShapeClosed}
    />
  )
}

// ...Bezier path generator...
const getBezierPath = () => {
    if (controlPoints.length < 2) {
      console.warn("Not enough control points to generate a path.");
      return "";
    }

    const [start, ...rest] = controlPoints;
    let path = `M ${start.x},${start.y}`;

    for (let i = 0; i < rest.length; i++) {
      const point = rest[i];
      path += ` L ${point.x},${point.y}`;
    }

    if (isShapeClosed) {
      path += ` Z`;
    }

    return path;
  };

// ...Bezier path from points...
const getBezierPathFromPoints = (points, isClosed) => {
    if (points.length < 1) return "";

    const [start, ...rest] = points;
    let path = `M ${start.x},${start.y}`;

    for (let i = 0; i < rest.length; i++) {
      const point = rest[i];
      path += ` L ${point.x},${point.y}`;
    }

    if (isClosed) {
      path += ` Z`;
    }
    return path;
  };

// ...Bezier option select handler...
const handleOptionSelect = (option) => {
  dispatch(setBezierOption(option));
  dispatch(clearSpiroPoints());
  dispatch(clearBSplinePoints());
  dispatch(clearParaxialPoints());
  dispatch(clearStraightPoints());
};

// ...Bezier path rendering for options...
{selectedTool === "Bezier" && (
  bezierOption === "Straight Segments" ? (
    straightPoints.length > 1 && (
      <Path
        data={`M ${straightPoints.map((p) => `${p.x},${p.y}`).join(" L ")}${isShapeClosed ? " Z" : ""}`}
        stroke="black"
        strokeWidth={2}
        fill={isShapeClosed ? fillColor : "transparent"}
        closed={isShapeClosed}
      />
    )
  ) : bezierOption === "Spiro Path" ? (
    renderSpiroPath()
  ) : bezierOption === "BSpline Path" ? (
    renderBSplinePath()
  ) : bezierOption === "Paraxial Line Segments" ? (
    renderParaxialSegments()
  ) : (
    controlPoints.length > 1 && (
      <Path
        data={getBezierPath()}
        stroke="black"
        strokeWidth={2}
        fill={isShapeClosed ? fillColor : "transparent"}
        closed={isShapeClosed}
      />
    )
  )
)}

🖱️ Interaction Handlers

Dragging and closing paths:

// ...Bezier points update...
const handleDragMove = (e, index) => {
  if (selectedTool === "Bezier" && bezierOption === "Spiro Path") {
      const { x, y } = e.target.position();
      dispatch(updateControlPoint({ index, point: { x, y } }));
    }
    if (selectedTool === "Bezier" && bezierOption === "BSpline Path") {
      const { x, y } = e.target.position();
      dispatch(updateControlPoint({ index, point: { x, y } }));
    }
};

// ...Bezier double click handler...
const handleDoubleClick = () => {
    if (newShape && newShape.type === "Bezier") {
      dispatch(addShape(newShape));
      setNewShape(null);
      setIsDrawing(false);
    }
    if (selectedTool === "Bezier" && bezierOption === "Spiro Path" && spiroPoints.length > 1) {
      const pathData = generateSpiroPath(spiroPoints, 0.5, isShapeClosed);


      dispatch(
        addShape({
          id: `spiro-${Date.now()}`,
          type: "Spiro Path",
          path: pathData,
          stroke: strokeColor,
          strokeWidth: 2,
          fill: fillColor || "black",
        })
      );

      dispatch(clearSpiroPoints());
      return;
    }

    if (selectedTool === "Bezier" && bezierOption === "BSpline Path" && bsplinePoints.length > 1) {
      const pathData = generateBSplinePath(bsplinePoints, 0.5, true);

      dispatch(
        addShape({
          id: `bspline-${Date.now()}`,
          type: "Path",
          path: pathData,
          stroke: strokeColor,
          strokeWidth: 2,
          fill: isShapeClosed ? fillColor : "black",
        })
      );


      dispatch(clearBSplinePoints());
      setIsDrawing(false);
    }

    if (selectedTool === "Bezier" && bezierOption === "Paraxial Line Segments") {
      if (paraxialPoints.length < 2) {
        console.warn("Not enough points to create a shape.");
        return;
      }


      let pathData = paraxialPoints
        .map((point, index) => {
          return index === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`;
        })
        .join(" ");


      if (isShapeClosed) {
        pathData += " Z";
      }


      dispatch(
        addShape({
          id: `paraxial-${Date.now()}`,
          type: "Path",
          path: pathData,
          stroke: strokeColor,
          strokeWidth: 2,
          fill: isShapeClosed ? fillColor : "black",
        })
      );


      dispatch(clearParaxialPoints());
      setIsDrawing(false);
    }

    if (selectedTool === "Bezier" && bezierOption === "Straight Segments" && straightPoints.length > 1) {
      let pathData = straightPoints
        .map((point, index) => (index === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`))
        .join(" ");
      if (isShapeClosed) pathData += " Z";
      dispatch(
        addShape({
          id: `straight-${Date.now()}`,
          type: "Path",
          path: pathData,
          stroke: strokeColor,
          strokeWidth: 2,
          fill: isShapeClosed ? fillColor : "transparent",
        })
      );
      dispatch(clearStraightPoints());
      setIsDrawing(false);
      setIsShapeClosed(false);
      return;
    }
  };

## 🖼️ Rendering and Editing Bezier Shapes

Finally, when rendering shapes from the Redux store, I handle Bezier shapes separately so they can be selected, dragged, and transformed just like other shapes:

if (shape.type === "Bezier") {
  const isSelected = selectedShapeIds.includes(shape.id);
  return (
    <React.Fragment key={shape.id}>
      <Path
        ref={(node) => {
          if (node) shapeRefs.current[shape.id] = node;
          else delete shapeRefs.current[shape.id];
          console.log("Bezier ref for", shape.id, node);
        }}
        id={shape.id}
        data={getBezierPathFromPoints(shape.points, shape.closed)}
        stroke={isSelected ? "blue" : shape.stroke || shape.strokeColor || "black"}
        strokeWidth={shape.strokeWidth || 2}
        fill={shape.fill || (shape.closed ? shape.fillColor : "transparent")}
        closed={shape.closed}
        rotation={shape.rotation || 0}
        draggable={
          !shape.locked &&
          selectedTool !== "Node" &&
          selectedTool !== "Mesh" &&
          selectedTool !== "Connector"
        }
        onDragMove={handleDragMove}
        dash={getDashArray(shape.strokeStyle)}
        onClick={(e) => {
          e.cancelBubble = true;
          if (shape.locked) return;
          if (!selectedShapeIds.includes(shape.id)) {
            dispatch(selectShape(shape.id));
          }
        }}
        onMouseDown={(e) => {
          e.cancelBubble = true;
        }}
        onTransformStart={(e) => {
          e.cancelBubble = true;
        }}
        onTransformEnd={(e) => handleBezierTransformEnd(e, shape)}
        onDragEnd={(e) => {
          const { x, y } = e.target.position();
          dispatch(updateShapePosition({ id: shape.id, x, y }));
        }}
      />
      {isSelected &&
        !shape.locked &&
        shapeRefs.current[shape.id] &&
        selectedTool !== "Node" && (
          <Transformer
            ref={transformerRef}
            nodes={selectedShapeIds
              .map((id) => shapeRefs.current[id])
              .filter(Boolean)}
            boundBoxFunc={(oldBox, newBox) => {
              if (newBox.width < 5 || newBox.height < 5) {
                return oldBox;
              }
              return newBox;
            }}
            enabledAnchors={[
              "top-left",
              "top-center",
              "top-right",
              "middle-left",
              "middle-right",
              "bottom-left",
              "bottom-center",
              "bottom-right",
            ]}
            skewEnabled={true}
          />
        )}
    </React.Fragment>
  );
}

Flow Summary

[User Input]
   |
   |-- Click / Drag / Double-Click
   v
[Panel Component]
   |
   |-- selectedTool === "Bezier" ?
         |
         +--> Yes → Read bezierOption & controlPoints from Redux
         |          |
         |          +--> Call appropriate path generator:
         |                 |
         |                 +--> Straight Segments → getStraightPath()
         |                 |
         |                 +--> Spiro Path       → generateSpiroPath()
         |                 |
         |                 +--> BSpline Path     → generateBSplinePath()
         |                 |
         |                 +--> Paraxial Segments → renderParaxialSegments()
         |                 |
         |                 +--> Default / Custom → getBezierPath()
         |
         +--> No → Ignore / other tools
   v
[Interaction Handlers]
   |
   |-- handleDragMove → update controlPoints in Redux
   |-- handleDoubleClick → generate pathData
          |
          |-- Dispatch addShape / clearPoints actions
   v
[Redux Slice (toolSlice)]
   |
   |-- Stores:
   |     - controlPoints
   |     - straightPoints / spiroPoints / bsplinePoints / paraxialPoints
   |     - bezierOption
   |-- Reducers update state based on dispatched actions
   v
[Redux Store Updates]
   |
   |-- Triggers re-render in Panel
   v
[Bezier Rendering]
   |
   |-- Uses <Path /> to draw shape
   |-- stroke / fill / closed / draggable
   |-- Calls getBezierPathFromPoints if rendering saved shapes
   v
[Optional Transformer / Editing]
   |
   |-- Shows transformer if shape selected
   |-- Drag / Scale / Rotate → dispatch updateShapePosition
   v
[Canvas Updated / Shape Rendered]

✅ Conclusion

This setup lets me switch between Bezier variants and manage them cleanly in Redux.
It’s flexible enough to expand with more path types and keeps drawing logic decoupled from state.

Centralized MTurk HIT Catcher with PHP & Userscripts

Suriya Prakash — Wed, 27 Aug 2025 07:13:10 +0000

Managing multiple MTurk accounts can be tedious. What if you could paste multiple HIT set IDs once and let a userscript automatically accept HITs for all connected accounts?

Here’s how I built a centralized MTurk HIT catcher using PHP, a JSON endpoint, and a userscript.

Features

Central PHP page to save and manage HIT set IDs.
Toggle catching HITs on/off.
JSON endpoint for userscripts to fetch IDs.
Userscript auto-accepts HITs for multiple accounts.
Server rendering using Ngrok for remote access.

PHP Controller (hitaccept.php)

This page allows you to save HIT set IDs, see the current status, and serve IDs as JSON.

<?php
$file = __DIR__ . "/hit_ids.json";
$statusFile = __DIR__ . "/status.txt";

if (isset($_GET["toggle"])) {
  $status = ($_GET["toggle"] === "off") ? "off" : "on";
  file_put_contents($statusFile, $status);
  echo "Status set to $status. <a href='hitaccept.php'>Back</a>";
  exit;
}

if ($_SERVER["REQUEST_METHOD"] === "POST") {
  $data = $_POST["hit_ids"] ?? "";
  $ids = array_filter(array_map("trim", explode("\n", $data)));
  file_put_contents($file, json_encode($ids));
  echo "Saved! <a href='hitaccept.php'>Back</a>";
  exit;
}

if (isset($_GET["json"])) {
  header("Content-Type: application/json");
  $status = file_exists($statusFile) ? trim(file_get_contents($statusFile)) : "on";
  $ids = file_exists($file) ? file_get_contents($file) : "[]";
  echo json_encode([
    "status" => $status,
    "ids" => json_decode($ids, true)
  ]);
  exit;
}

$current = file_exists($file) ? file_get_contents($file) : "[]";
$status = file_exists($statusFile) ? trim(file_get_contents($statusFile)) : "on";
?>
<!DOCTYPE html>
<html>
<head>
  <title>MTurk HIT Controller</title>
</head>
<body>
  <h2>📋 Paste HIT Set IDs (one per line)</h2>
  <form method="POST">
    <textarea name="hit_ids" rows="6" cols="60"></textarea><br><br>
    <button type="submit">💾 Save IDs</button>
  </form>

  <h3>Current HIT IDs</h3>
  <pre><?php echo htmlspecialchars($current); ?></pre>

  <h3>Status: <?php echo strtoupper($status); ?></h3>
  <p>
    <a href="?toggle=on">▶️ Start Catching</a> |
    <a href="?toggle=off">⏹ Stop Catching</a>
  </p>

  <p>JSON endpoint: <a href="hitaccept.php?json">hitaccept.php?json</a></p>
</body>
</html>

What it does:

Save multiple HIT set IDs.
Toggle catching on/off.
Serve a JSON endpoint for your userscript.

Userscript for Auto-Accepting HITs

Install in Tampermonkey or Greasemonkey:

// ==UserScript==
// @name         MTurk Central HIT Catcher
// @namespace    yourdomain.com
// @version      1.0
// @description  Accept HITs automatically from set_ids provided by central server
// @match        https://worker.mturk.com/*
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';

    const SERVER_URL = "https://your-ngrok-url.ngrok-free.app/hitaccept.php?json";
    const FETCH_INTERVAL = 10000; // 10s

    function fetchSetIdsAndCatch() {
        GM_xmlhttpRequest({
            method: "GET",
            url: SERVER_URL,
            onload: function(response) {
                try {
                    let data = JSON.parse(response.responseText);
                    if (data.status === "off") {
                        console.log("⏹ Catcher stopped by server.");
                        return;
                    }

                    let ids = data.ids || [];
                    ids.forEach(id => {
                        let acceptUrl = `https://worker.mturk.com/projects/${id}/tasks/accept_random?format=json`;
                        GM_xmlhttpRequest({
                            method: "GET",
                            url: acceptUrl,
                            onload: function(res) {
                                if (res.status === 200 && res.responseText.includes("task_id")) {
                                    console.log("✅ Accepted HIT:", id);
                                } else {
                                    console.log("❌ No HITs available for:", id);
                                }
                            }
                        });
                    });

                } catch (e) {
                    console.error("Error parsing JSON:", e);
                }
            }
        });
    }

    setInterval(fetchSetIdsAndCatch, FETCH_INTERVAL);
    console.log("🚀 MTurk Central HIT Catcher started, polling every", FETCH_INTERVAL/1000, "seconds");
})();

Running the Project

Start your PHP server locally:

php -S localhost:8000

Expose it to the internet via Ngrok:

ngrok http 8000

Replace SERVER_URL in your userscript with your Ngrok URL:

https://your-ngrok-url.ngrok-free.app/hitaccept.php?json

Open the Tampermonkey dashboard and activate the script.
Go to hitaccept.php, paste your HIT set IDs, and click Start Catching.
Check your browser console for logs:

HIT accepted
No HITs available

Summary

With this setup, you can:

Centralize multiple HIT IDs.
Control the catching process via a web interface.
Automatically accept HITs across multiple accounts.

It’s perfect for heavy MTurk users or small teams who need automation without manual repetition.

Automating MTurk HIT Acceptance with a Tampermonkey Userscript

Suriya Prakash — Wed, 13 Aug 2025 07:06:52 +0000

If you’ve ever worked on Amazon Mechanical Turk (MTurk), you know how time-sensitive high-paying HITs can be. Blink, and they’re gone. Manually scanning for HITs that meet your pay criteria can be tedious — and sometimes impossible when competing with other workers.

That’s why I built a Tampermonkey userscript to automatically accept MTurk HITs based on two conditions:

Reward threshold (minimum pay I’m willing to work for)
Set ID (to target specific requesters or tasks)

This post walks you through how I implemented it, so you can understand the logic, customize it for your own needs, and maybe even improve it.

Why Tampermonkey?

Tampermonkey is a browser extension that allows you to run custom JavaScript on specified web pages. For MTurk, this means you can inject your own automation into the interface without modifying any server-side code.

Easy to install
Works across browsers
Flexible and scriptable

The Problem

Manually hunting for high-paying HITs wastes time and causes missed opportunities. I wanted:

Automatic filtering so only HITs above a certain reward appear in my workflow.
Direct acceptance of those HITs without extra clicks.

My Approach

I broke the problem into three steps:

Fetch & parse HIT data from the MTurk search results page.
Apply filters based on reward and set ID.
Trigger acceptance via MTurk’s accept URL when criteria are met.

Implementation

Install Tampermonkey

Chrome: https://tampermonkey.net/
After installation, click the Tampermonkey icon → "Create a new script."

The Script

Script Metadata

Tampermonkey scripts start with a header that describes the script, permissions, and the pages it should run on.

// ==UserScript==
// @name         MTurk Auto-HIT Catcher
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Automatically accepts MTurk HITs based on reward & HIT Set ID
// @author       YourName
// @match        https://worker.mturk.com/match
// @grant        GM.getValue
// @grant        GM.setValue
// ==/UserScript==

Setup & Global Variables
We use an async function so we can load stored data (like the block list) before starting.

(async function() {
    'use strict';

    var blockList = await loadBlockList();
    var baseUrl = 'https://worker.mturk.com';
    var tasks = {};

    var isTimerRunning = false;
    var timer;

    let isSearching = false;
    let acceptedCount = 0;
    const maxAcceptedHits = 10;
    let searchHitId = null;

Adding the Control Panel to MTurk
We create an HTML template for our settings and inject it into MTurk’s DOM.

function appendHTMLElements() {
    var rewardTemplate = `
<div class="row">
    <div class="col-sm-3 form-inline">
        <h3><strong>Parameters</strong></h3>
        <label for="filters-min-reward">
            <span class="m-r-xs">Pays at least $</span>
            <input class="form-control reward-filter" id="filters-min-reward" value="1" type="number" step="0.01">
        </label>
    </div>
    <!-- Additional UI controls omitted for brevity -->
</div>
    `;

    var el = document.querySelector('#MainContent');
    if (el) {
        el.innerHTML = rewardTemplate;
    }

    // Attach button handlers
    document.getElementById("timer").onclick = toggleTimer;
    document.getElementById("block").onclick = blockRequestor;
    document.getElementById("search-toggle").onclick = toggleSearchByHitId;
    document.getElementById("close-captcha").onclick = () => {
        document.getElementById("captcha-modal").style.display = "none";
    };

    updateBlockEl();
}

Managing Blocked Requesters
We can save unwanted requesters so they’re ignored in future searches.

async function blockRequestor() {
    var block = getBlockText();
    if (blockList.indexOf(block) < 0) {
        blockList.push(block);
        await saveBlockList();
    }
}

function updateBlockEl() {
    var listEl = document.getElementById('block-list');
    listEl.innerHTML = '';
    for (var id of blockList) {
        var blockEl = document.createElement('span');
        blockEl.id = id;
        blockEl.innerHTML = `<span><a href="#"><i class="fa fa-minus-circle"></i>${id}</a></span>`;
        blockEl.onclick = removeBlockList;
        listEl.appendChild(blockEl);
    }
}

async function removeBlockList() {
    blockList.splice(blockList.indexOf(this.id), 1);
    await saveBlockList();
}

async function loadBlockList() {
    return JSON.parse(await GM.getValue("autoHitBL", '[]'));
}

async function saveBlockList() {
    await GM.setValue("autoHitBL", JSON.stringify(blockList));
    updateBlockEl();
}

Searching & Auto-Accepting by HIT Set ID
This is the core automation — repeatedly trying to accept a HIT until it succeeds or reaches the limit.

function toggleSearchByHitId() {
    const btn = document.getElementById("search-toggle");

    if (!isSearching) {
        const hitId = document.getElementById("search-hit-id").value.trim();
        if (!hitId) {
            alert("Please enter a HIT Set ID.");
            return;
        }
        searchHitId = hitId;
        acceptedCount = 0;

        const acceptUrl = `/projects/${hitId}/tasks/accept_random?ref=w_pl_prvw`;
        const task = { hit_set_id: hitId, accept_project_task_url: acceptUrl };

        isSearching = true;
        btn.textContent = "Stop";
        btn.classList.replace("btn-primary", "btn-danger");

        acceptMultipleHits(task);
    } else {
        isSearching = false;
        searchHitId = null;
        btn.textContent = "Start";
        btn.classList.replace("btn-danger", "btn-primary");
    }
}

function acceptMultipleHits(task) {
    async function attempt() {
        if (!isSearching || acceptedCount >= maxAcceptedHits) return;

        try {
            const res = await fetch(baseUrl + task.accept_project_task_url, { credentials: 'include' });
            const html = await res.text();

            if (html.toLowerCase().includes("captcha")) {
                isSearching = false;
                document.getElementById("captcha-modal").style.display = "flex";
                return;
            }

            // Extract HIT details and add to accepted list
            addAcceptedHitToList(task);
            acceptedCount++;

        } catch (err) {
            console.error("Error accepting HIT:", err);
        }

        if (isSearching) setTimeout(attempt, 750);
    }
    attempt();
}

Displaying Accepted HITs
We show a live-updating list of accepted tasks.

function addAcceptedHitToList(task) {
    const listEl = document.getElementById("accepted-hits-list");
    const listItem = document.createElement("li");

    const fullUrl = task.work_url.startsWith('http') ? task.work_url : `${baseUrl}${task.work_url}`;
    listItem.innerHTML = `
        <div>
            <strong>${task.requester_name}</strong> —
            <a href="${task.accept_project_task_url}" target="_blank">${task.title}</a>
            — <span style="color: green;">$${task.monetary_reward.amount_in_dollars}</span>
            — <a href="${fullUrl}" target="_blank">[Work Link]</a>
        </div>
    `;
    listEl.insertBefore(listItem, listEl.firstChild);
}

Fetching & Processing New HITs
The script can also scan for new tasks automatically.

function getNewTasks() {
    if (isSearching) return;
    getContent('/?page_size=20&filters[qualified]=true&filters[masters]=false&sort=updated_desc&filters[min_reward]=' + getMinReward(),
        function(err, doc) {
            var currTasks = parseTasks(doc);
            for (let task of currTasks) {
                if (task.assignable_hits_count > 0 && blockList.indexOf(task.requester_id) < 0) {
                    processTask(task);
                    break;
                }
            }
        });
}

async function processTask(task) {
    try {
        const res = await fetch(baseUrl + task.accept_project_task_url, { credentials: 'include' });
        task.work_url = res.url;
        task.isAccepted = true;
        updateTaskEl(task);
        addAcceptedHitToList(task);
    } catch (err) {
        console.error("Error processing task:", err);
    }
}

Utility Functions
Helpers for fetching and parsing HITs.

function getContent(url, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', url);
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200 || httpRequest.status === 403) {
                var doc = new DOMParser().parseFromString(httpRequest.responseText, "text/html");
                callback(null, doc);
            }
        }
    }
}

function parseTasks(doc) {
    let el = doc.querySelector('div[data-react-class*="HitSetTable"]');
    if (el) {
        return JSON.parse(el.getAttribute("data-react-props").replace('&quot;', '"')).bodyData;
    }
    return [];
}

Disclaimer

This script is for educational purposes only. Automating HIT acceptance may violate MTurk’s Terms of Service. Always check the rules and use responsibly.

Conclusion

With Tampermonkey, we can build a custom automation layer on MTurk that saves time, filters tasks, and streamlines work. You can extend this script with:

More filters (qualifications, keywords)
Notifications when HITs are accepted
A UI for setting parameters without editing code